CSS Styling not Loading on Desktop? Working on Mobile

  • Resolved rachel8t4

    (@rachel8t4)


    4 years, 2 months ago

    Hello!

    I’m hoping someone can help, I’ve been searching and searching and getting nowhere. I noticed the other day that a lot of my CSS styling has stopped displaying on desktop. Things like the fonts reverting to default styles and sizing, borders missing etc. Even with an !important attribute, it’s not working anymore. The CSS is still there in the customizer, but it seems to be getting ignored. Strangely though, it still seems to be working on mobile view which has me really confused…

    For example the main menu font should be Special Elite in black, but it’s displaying on desktop as Lato in grey.

    Has anyone else had this happen? Any suggestions at all would be appreciated. Theme is SiteOrigin Unwind, so I will post there also in case it’s a theme issue, but I really have no idea…

    Thanks in advance!
    Rachel

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

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hello Rachel,

    I love your business concept, and the name is so cool too!

    Here’s what’s happening:

    The theme’s “style.min.css” file has the menu coded as follows:

    .main-navigation>div li a {
    text-transform: uppercase;
    color: #626262;
    font-family: Lato,sans-serif;
    font-size: .8rem;
    letter-spacing: 1px;
    padding: 15px;
    margin: -15px;
}

    However, the styling added to the Customizer shows:

    @media screen and (max-width: 768px)
.main-navigation>div li a {
    text-transform: uppercase;
    color: #000000 !important;
    font-family: 'specialelite' !important;
    font-size: 9.5pt;
}

    This code will only display if the device width is less than or equal to 768px, which means your site will only use the code on mobile phones and tablets.

    Could you please remove @media screen and (max-width: 768px), inside the Additional CSS section of the Customizer so that it looks like this (you can remove the !important as you won’t need that anymore)?:

    
.main-navigation>div li a {
    text-transform: uppercase;
    color: #000000 !important;
    font-family: 'specialelite' !important;
    font-size: 9.5pt;
}

    That should fix your problem:



    You can repeat the same steps for the other issues like the borders. I’m assuming they’re under the “@media screen and (max-width: 768px)” section. If you have any trouble doing that, please post the code here and I can have a look at it.

    Thread Starter rachel8t4

    (@rachel8t4)

    Thanks heaps Niall! There was a missing bracket on one of the @media screen snippets, so now that is back in the rest of the css seems to be picking up as it should be. I put it through a couple of different css validators too, and the missing bracket went unnoticed. Thank you again for you help, @media screen was definitely the culprit ??

    You’re welcome, Rachel! Glad you managed to fix your site. ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘CSS Styling not Loading on Desktop? Working on Mobile’ is closed to new replies.