How to remove only one media rule property from external css


Tags: css,media-queries

Problem :

I have bootstrap.min.css, which defines:

@media (min-width: 768px) .modal-dialog {
    width: 600px;
    margin: 30px auto; 
}

@media (min-width: 992px) .modal-lg {
    width: 900px;
}

I want width: auto; for "modal-dialog modal-lg" screens between 768 to 992px. So I try in my css:

@media (min-width: 768px) .modal-dialog {
    width: auto !important;
}

but this does not applies.

Then, I googled something like this:

@media (min-width: 768px) {
  body .modal-dialog {
      width: auto !important;
  }
}

But this overrides also @media (min-width: 992px). How to override only (min-width: 768px) rule?



Solution :

This media query should achieve what you asked. You set the minimum AND the maximum width where to apply the desired changes.

@media (min-width: 768px) and (max-width: 992px) {
    .modal-dialog {
        width: auto;
    }
}

!important should not be necessary unless you have to overwrite another !important :)


    CSS Howto..

    How to have elements copy other element's auto height css?

    How to set width correctly in CSS - Need to fix bug with Safari on Mac and on iPad

    CSS: How to create a button with an arrow placedo on the right

    How to get css width of class?

    How to make element sizes to fill cell sizes and increase font in free jqgrid inline and form editing

    How to add a banner inside a div at the bottom?

    How to divide 3 divs(CSS + MVC)

    How to target certain text to make bold using css

    How to move one element to the right of another using CSS?

    How can I use :hover with multiple classes

    How to change CSS style without id or class

    how can I align text/image/links within a grid
    of the twitter bootstrap css?

    how to make a div stay in a div

    How to make this css crossbrowser?

    How to Center Logo in Responsive Header [closed]

    Animation performance jQuery, css transition ? How can i have a better performance here?

    Simple CSS layout - how can I achieve this layout, and make it scale easily?

    how to define minimum height for tbody in css

    How to fix the alignment of my sub-menu

    How to align div to the bottom of another div in HTML?

    CSS How to get the same height?

    How do you format php error messages? they don't respect css

    How to do a “true” carbon fiber CSS background

    Why isn't my div content showing?

    Mapbox GeoJSON loaded via local URL: icons not showing popup properties

    how to change other element css when selected element has new class

    How to CSS sandbox/reset an entire DIV area in the current page?

    Text overlay over image on hover. How to stop other divs from moving

    How to take whole available width in bootstrap css?

    How to manage css of big websites within team environment without mess?