Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Semantic UI: adjusting width style of ui container

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:

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

<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)?

>Solution :

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

.ui.main.container {
  width: 1825px !important;
}
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading