Docs

[Ying-Fu Li]

Hi,

I’m working on a website and am encountering some problems with CSS not catching on. For instance, I use CSS code to remove the background on the social icons. On the desktop it works quite alright but when I switch to mobile phone view the backgrounds are back again. Could you take a look for me?

[Ying-Fu Li]

This reply has been marked as private.

[Rad]

Hi there,

Thanks for writing in.

Is it the twitter icon? I don’t see any difference from desktop and mobile. And I can’t verify the CSS, it’s not running on X theme. Maybe I’m looking on different page?

Thanks!

[Ying-Fu Li]

You have to log in as I have a ‘maintenance’ page active. That’s why I send the login credentials.

[Christian]

Hey Ying,

Please add the code below in your Appearance > Customize > Custom > CSS

.x-social-global a {
    background-color: transparent;
}

Hope that helps. 🙂

[Ying-Fu Li]

Well, now the background still appears on hover.

[Ying-Fu Li]

See attached image what happens: As soon as the screen goes under 1024px the css stops working.

[Christian]

Hey Ying,

I don’t see the CSS code I’ve given in your Customizer Custom CSS. Please replace the code with the one below to included the hover

.x-social-global a, .x-social-global a:hover {
background-color: transparent !important;
}

Thanks.

[Ying-Fu Li]

Got it to work. One question though: why won’t it catch on when I add the css in the style sheet of the child theme? I rather have all css in style.css instead of in the customizer.

[Christian]

That has to do with CSS specificity (see https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/). style.css is an external stylesheet while the Customizer’s CSS is an internal one and internal CSS has more weight than external CSS. Thus, overriding X Styles should be done in the Customizer.

Thanks.

[Ying-Fu Li]

Okay. Well, on the Facebook page for X-theme users one member explained that you should use the style sheet because that is the proper way css get loaded. He said that the Customizer just injects the css into the header of the html. So not really sure as to what is the best practice 😉

[Rupok]

Hi there,

Thanks for updating. Customizer CSS is for your few tweaks and injecting some custom CSS won’t affect your site performance in any way. However if you have lot of custom CSS then you should move them to Child Theme’s CSS. But some settings are already on Customizer settings. So if you somehow want to overwrite them then you have to use Customizer > Custom > CSS otherwise you will need to use !important tag on Child theme.

Hope this makes sense.

[Ying-Fu Li]

Okay. So if I have like 100 lines of css rules I should move at least a good portion to the style sheet?

[John Ezra]

Hi there,

Thanks for writing in! Yes, you can move the ones that are more or less permanent changes, snippets you are unlikely to change for a while that has gone through your testing etc.

Ideally all your CSS should be in your style.css file, however the customizer and Cornerstone custom CSS has live previews so it’s easier to test your CSS in those locations before moving them to your style.css file.

Hope this helps – thanks!

[Author]

Posts