locked
Bootstrap RRS feed

  • Question

  • User-279708737 posted

    I have a Div that has a @media rule that shrinks a bunch of divs nested inside it but I have a div deep down that I need to ignore the @media shrinking rule. How do I do this or is it even possible? 

    Wednesday, November 14, 2018 2:55 PM

All replies

  • User753101303 posted

    Hi,

    Just adding a later rule for this kind of div doesn't work ? Or you could try https://developer.mozilla.org/en-US/docs/Web/CSS/:not to exclude it.

    Which kind of "shrinking" rule is this ? you are chaning the max-width, max-height ?

    Wednesday, November 14, 2018 3:24 PM
  • User-279708737 posted

    I tried this but I think I got the syntax wrong:

    .navbar-toggle not(header-productcategory)
    {
        display: block;
        margin-right: 0;
        width: 44px;
        padding: 10px;
        margin-top: 12px;
        margin-bottom: 12px
    }

    Sorry I grabbed the wrong code here is what I tried:

    @media only screen and (min-width: 992px) 
    {
    	not(header-productcategory)
        .navbar-toggle {
        display: none}
    }

    Wednesday, November 14, 2018 5:43 PM
  • User839733648 posted

    Hi WhiteBoxGaming,

    You could negate your selectors with the :not() attribute for the selectors you don't want the query style applied to in css like below.

    .page{ /* Styles that apply to all ".page" elements before media query */ }
    
    @media only screen and(min-width: 992px) {
      /* Defines styles for elements with the "page" class */
      .page:not(:first)     { 
          /* Excludes first matching element with "page" class */ }
      .page:not(.firstpage) { 
          /* Excludes elements with the "firstpage" class */ }
      .page:not(#firstpage) { 
          /* Excludes element with id="firstpage" */ }

    Best Regards,

    Jenifer

    Thursday, November 15, 2018 6:14 AM