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 put a border on a triangle shape using css?

    How to force thumbnails to overflow right and not below

    How to embed video next to block element

    How to keep text aligned with the middle of a textarea?

    Background hover showing in CSS

    How do you create boxes like github's explore section?

    How to set a style one a parent element [duplicate]

    How to override a part of the style in the site.master page?

    How can I use the key name instead of value in map-get?

    How do I specify CSS classes for specific rows in a GridView?

    How can `animation-play-state` in CSS be initially set to `paused` and changed to `running`?

    How to override a filter:none in CSS

    How to apply css for 1900x600 width screen resolution only

    how to trim css code to just one line [closed]

    How to edit ol tags in rich text editor

    CSS / JS: How do I tell my page to be completely unselectable, except for stuff inside a div?

    How to display “a” to full of the line

    How to add an attribute other than style attributes to css?

    How to pin sidebar to the top of page but within its parent element using HTML/CSS only

    How to position text in a navigation “div.”

    Codeigniter: how to access css files from different views?

    How to loop through divs with no knowledge of what the user viewed and what they WANT to view

    Show/Hide & Change CSS functions are not working

    Canvas distorts drawing. How do I get the scale factor between the set size and the styled size?

    how to make a css “if opera,not…”

    How to use CSS sprites in table sorting headers?

    How to achieve this complex layout with CSS?

    how I can set color of anything in css [closed]

    How make my CSS responsive using Bootstrap 3.1

    How to Control Width of Title (H2) with CSS?