WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
Media queries are overriding the native css. (7 posts)

  1. Seahawksean
    Member
    Posted 8 months ago #

    Sorry if this is a repeat question but I couldn't find the answer browsing all the forum topics (wish wordpress would allow search for keywords within theme support forums).

    I can't figure out why my native css is being overridden by my media queries. My site: http://www.biologydesign.com/SarahCHanson

    I'm trying to adjust the padding of the social media icon container in the header. My browser size is set at 1170px (per Firefox dev tools window size) which I believe is the default width in the native css.

    .navbar-inner .social-block {
        padding-left: 46.5%;
    }

    This adjusts the padding-left as it should when no media queries are added. However when I add the following media queries

    @media screen and (max-width: 1366px) {
        .navbar-inner .social-block {
            padding-left: 54.5%;
        }
    }
    @media screen and (max-width: 1200px) {
        .navbar-inner .social-block {
            padding-left: 48%;
        }
    }

    the style from (max-width: 1200px) media query is being applied instead of the native when the browser window is set to 1170px. As a result the sm icons aren't lining up to the left edge of the menu as I would like.

    Perhaps it's the order of my media queries? If so, should they be listed largest to smallest, top to bottom or vice versa. I searched online and couldn't find a definitely answer. I know order is important, just not sure which way to order them.

    Thank you in advance for your assistance.

  2. ElectricFeet
    Member
    Posted 8 months ago #

    If you browse through the main css file for your skin inside customizr/inc/css, the @media queries in there don't seem to be in any particular order. However, they do seem to be non-overlapping (ish). I'm not sure how your max1366 will conflict with the min1200 in there.

    What happens if you merge your max1366 into the min1200 (making a min1200&max1366) and then call the old min1200 a min1367? -- if you understand my shorthand: it's late; I'm on an iPad(!).

  3. Seahawksean
    Member
    Posted 8 months ago #

    Thanx ElectricFeet. I think that did the trick. I should have just done that from the get go since I was going to have to eventually anyway. Not sure why there were overlaps though, since I just copied and pasted the queries over from the skin css. Granted it was like 2 AM when I did it and maybe I duplicated a couple in my haze.

    Also, I noticed there were a couple of different sets of queries in the skin css and I did copy all of them so perhaps a couple conflicted with each other.

    Also, just to make sure, the default width is 1170px, whereas the main native css is coded for that width. Correct? The largest px width of an element I could find in the skin css was 1170px, so I'm assuming that's right.

  4. Seahawksean
    Member
    Posted 8 months ago #

    I forgot to mention that I did also organize the queries smallest max-width to largest, from top to bottom. This did force some changes in the right direction as well.

    However, there were still some queries that were being overridden and discovered that there is a rhyme and reason to the order of the queries in the original skin css. It's because of the cascading.

    At max-width 980px, the mobile styling kicks in. My code was

    @media screen and (min-width: 768px) and (max-width: 979px) {
        .navbar-inner .social-block {
            padding-left: 45.5%;
        }
    }
    @media screen and (max-width: 980px) {
         .navbar-inner .social-block {
            padding-left: 35.6%;
        }
    }
    @media screen and (min-width: 981px) and (max-width: 1024px) {
        .navbar-inner .social-block {
            padding-left: 38.5%;
        }
    }
    @media screen and (min-width: 1025px) and (max-width: 1169px) {
         .navbar-inner .social-block {
            padding-left: 46.5%;
        }
    }

    but was still applying the (max-width: 980px) query. I realized that padding-left: 46.5% in (max-width: 979px) was now higher than (max-width: 979px). So, because of the cascading and the window was smaller that 980px, it was rendering the (max-width: 980) query. So, I just had to move a copy of the (max-width: 979px) query between (max-width: 1024px) and (max-width: 1169px) so that the values are still in descending order.

    @media screen and (max-width: 980px) {
         .navbar-inner .social-block {
            padding-left: 35.6%;
        }
    }
    @media screen and (min-width: 981px) and (max-width: 1024px) {
        .navbar-inner .social-block {
            padding-left: 38.5%;
        }
    }
    @media screen and (min-width: 768px) and (max-width: 979px) {
        .navbar-inner .social-block {
            padding-left: 45.5%;
        }
    }
    @media screen and (min-width: 1025px) and (max-width: 1169px) {
         .navbar-inner .social-block {
            padding-left: 46.5%;
        }
    }

    Now it makes perfect sense.

  5. ElectricFeet
    Member
    Posted 8 months ago #

    Thanks for this analysis. Now I'm back at my desktop, I can see that the basic Bootstrap in the theme's CSS has this:

    @media (min-width: 1200px) {...}
    @media (min-width: 768px) and (max-width: 979px) {...}
    @media (max-width: 767px) {...}
    @media (max-width: 480px) {...}
    @media (max-width: 979px) {...}
    @media (min-width: 980px) {...}

    and Nikeo has added this:

    @media (max-width: 1200px) {...}
    @media (max-width: 979px) {...}
    @media (max-width: 767px) {...}
    @media (max-width: 480px) {...}
    @media (max-width: 320px) {...}

    (Posting simply for completeness of the thread and to save others more research.)

  6. Seahawksean
    Member
    Posted 8 months ago #

    Yeah, I know what browser/screen sizes he has in his media queries and figured out that issue per my "explaination" above, but I was trying to confirm the default width in the native css. The largest .container size I see is 1170px and the suggested slider image size is 1170x500 per the dashboard instructions. However, I also saw on the customizr website (or somewhere else) that suggested slider image size is 1200x500. So not sure which one is the true default width. I was just wanting to set a max-width for the wrapping container, so I'm not having to design for browser resolutions 1900 and above.

  7. ElectricFeet
    Member
    Posted 7 months ago #

    Yes! Just discovered this wonderful bookmarklet*:
    http://seesparkbox.com/foundry/media_query_bookmarklet

    Drag the button to your bookmarks and it will tell you which @media queries are currently active at your current screen size. Amazingly useful.

    [* Note that it uses the author's js on github, so theoretically could change over time. You could copy it over and have it point to your own site instead.]

Reply

You must log in to post.

About this Theme

About this Topic