CSS stylesheets not taking priority

  • Hello all,

    I’m pulling my hair out about my website, I managed to get it all working and somehow I’ve messed up the priority of my stylesheets… I used the Music-Lite theme as a base, and that works fine when you resize, but mine is borked somehow.

    When the window is resized smaller than 1023px wide, then style-mobile.css should take priority over style.css, but it doesn’t. Could you please have a quick look at the website and see if you can spot what I’ve done wrong? Some elements work and others don’t, for example the two columns I have change when the page is resized, but the mobile menu button doesn’t appear when the nav bar disappears, when it should. I can’t make head nor tail of it.

    For example, the element .content has the following css:

    from style.css:

    .content {
    position: relative;
    width: 100%;
    max-width: 1260px;
    margin: 0px auto 0px;
    /* padding: 24px; */
    box-sizing: border-box;

    from style-mobile.css:

    @media handheld, only screen and (max-width: 767px) [this one is for mobile, whereas 1023px is designed for tablets]
.content {
    padding: 10px;

    and yet the mobile stylesheet is second priority…

    Any help would be greatly appreciated!

    • This topic was modified 6 years, 5 months ago by renoized.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator t-p

    (@t-p)

    – For pro or commercial product support please contact the author directly on their site. They cannot support their customers here.

    – As the author is aware, commercial products are not supported in these forums. As you are their customer I am sure they will have no problem supporting you there. Also, forum volunteers are not given access to commercial products, so they would not know why your commercial theme or plugin is not working properly.

    Thread Starter renoized

    (@renoized)

    This is a post about CSS stylesheet priorities, not the specific theme I’m using. I have linked it, yes, but only to show what should happen on my website under certain conditions.

    Moderator t-p

    (@t-p)

    Are you working with a child theme?

    In your style-mobile.css example above for div.content …

    padding:10px will only work until 767px. This means that from 768px and above, div.content will revert to padding:24px as defined in style.css.

    If you want padding:10px to take priority up to 1023px, then you would have to place a .content rule under a media query with max-width:1023px and not max-width:767px

    Hope this helps.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘CSS stylesheets not taking priority’ is closed to new replies.