2

I would like to edit the styling of ui main container class in Semantic UI. Currently, we have:

<div class="ui main container"></div>

However, I want the following style to be applied:

<div class="ui main container" style="width:1825px"></div>

I have tried the following CSS selector:

<style>
  .ui.main.container {
      width: 1825px;
  }
</style>

However, this does not affect the styling of the div as expected. I tried moving the location of the <style> tag, and trying different css selector combinations but to no avail. Is there any reason the style is not being overridden? How can I imitate the effect of the inline style (which actually gets applied)?

Peabrain
  • 519
  • 2
  • 12
  • As per @Anjs, you often will have to apply the Important override for SUI styles. You can use F12 in Chrome then right-click the container element and eventually find it in the Elements tab of the dev tools. From there the styles tab on the rhs shows how the element is styled, abnd the Computed tab is also useful. From those you can see your element-level style being overridden by the SUI styles. You can manually try out specific style settings with/without !important to see the effect. Setting a hard-coded value might not be best practice. – Vanquished Wombat Nov 10 '21 at 12:38

1 Answers1

1

Try adding !important to override the style. Like shown below

.ui.main.container {
  width: 1825px !important;
}
Anjs
  • 586
  • 4
  • 11