Search code examples
htmlcssadminlte

Override media queries in CSS files with custom CSS in HTML

I am using an HTML template (Admin LTE) for my angular project. In it I tried to override a default width specification using this in my index.html head section

  @media(min-width: 768px)
  {
    body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .content-wrapper, body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .main-footer, body:not(.sidebar-mini-md):not(.sidebar-mini-xs):not(.layout-top-nav) .main-header
    {
      margin: left 300px!important;
    }
  }

But when executing, its not at all taking my custom css in index.html, instead it takes the 250px which is hardcoded in the CSS file

enter image description here

SO How to override this?

Solution

  • CSS is not valid as shown in dev tools:

    margin: left 300px !important

    Try:

    margin-left: 300px !important