[Resolved] Normal settings overwrite custom CSS

Home Forums Support [Resolved] Normal settings overwrite custom CSS

Home Forums Support Normal settings overwrite custom CSS

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #798822
    Matthias

    Hi,

    Somehow the normal settings for Mobile in the customizer overwrites my Custom CSS for Mobile.

    Anyway I can resolve this problem ?

    #798832
    David
    Staff
    Customer Support

    Hi there,

    it could a CSS specificity issue – ie. the theme is using a string of classes that are more specific then the ones you are using.

    Can you share the CSS that is being overridden.

    #798836
    Matthias

    I kinda fixed it by putting important behind it. But it weird because it always worked before. Somehow it was using since today the settings in the customizer

    /* ** mobile menu background** */

    @media
    (max-width: 1000px) {
    .main-navigation .main-nav ul li a {background-color: #fff !important} }


    @media
    (max-width: 1000px) {.main-navigation .main-nav ul ul li a {
    background: #FFA727 !important}}


    @media
    (max-width: 1000px) {.main-navigation .main-nav ul li:hover > a,
    .main-navigation .main-nav ul li:focus > a,
    .main-navigation .main-nav ul li.sfHover > a {
    color: #000 !important;
    background-color: #fff !important;
    }}


    @media
    ( max-width: 1000px ) {
    .main-navigation {
    background-color: #fff !important;
    }}

    /* ** blog body text size ** */

    @media
    (max-width: 768px) {
    body {
    font-size: 13px !important;
    }

    /* WIDGET mobile STYLING */


    @media
    (max-width: 768px) { .footer-widgets {
    padding-top: 100px !important;
    padding-right: 34px !important;
    padding-bottom: 100px !important;
    padding-left: 34px !important;
    }}

    /* Mobile header */
    .mobile-header-navigation .mobile-header-logo,
    .mobile-header-navigation .mobile-header-logo img {
    height: 100px !important;
    }


    @media
    (max-width: 768px) {
    .main-navigation .main-nav ul li a {
    line-height: 60px ;
    }
    }

    #798860
    David
    Staff
    Customer Support

    Theres a chance that Autoptimize as re-ordered the CSS which would mean it came before the theme styles and was therefore overwritten. Important does cure this from happening.

    Also to note, if you inspect the code of the nav, as it is a merged header the CSS rule for that menu items changes. To a more specific class. That could be the other issue, if you have changed those settings recently.

    #798865
    Matthias

    Thx! autooptimize seems to be problem.

    #798870
    David
    Staff
    Customer Support

    Might be worth reporting that to the author, we have seen a few instances where this is happening and Autoptimize ‘shouldn’t’ be re-ordering the CSS. Glad you got it fixed.

    #798905
    Matthias

    Hmm problem still isnt fixed, it only appairs on mobile. Al my other custom css on desktop seems to be fine

    #798923
    David
    Staff
    Customer Support

    Which particular CSS isn’t working? I looked at a couple of them and they are working e.g

    @media (max-width: 768px) {
    body {
    font-size: 13px !important;
    }

    Can see this on the single posts.

    #798926
    Matthias

    thx for the reply, I think I got it fixed.

    Do you recommend any optimization plugin ?

    #798964
    David
    Staff
    Customer Support

    We generally go with Autoptimize. Here is our optimization tips:

    https://generatepress.com/fastest-wordpress-theme/

    Most cache/optimization plugins do the same thing so when there is a lot of CSS they are prone to these issues.

    #799265
    Jesus Higuerey

    Matthias, I was in the same situation as you (same problem with Autoptimize). I looked around and I got rid of it and installed Fast Velocity Minify. At the end, my problem was gone and the site even got faster, since the files got smaller.

    Heres the link; https://wordpress.org/plugins/fast-velocity-minify/

    #799423
    David
    Staff
    Customer Support

    Thanks for the recommendation.

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.