[Resolved] Normal settings overwrite custom CSS

[Matthias]

Hi,

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

Anyway I can resolve this problem ?

[David]

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.

[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 ;
}
}

[David]

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.

[Matthias]

Thx! autooptimize seems to be problem.

[David]

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.

[Matthias]

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

[David]

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.

[Matthias]

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

Do you recommend any optimization plugin ?

[David]

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.

[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/

[David]

Thanks for the recommendation.

[Author]

Posts