Site logo

Archived topic

Child Theme CSS bug

13 replies · Started by FunkyCss on March 15, 2020

Viewing posts 1–14 of 14

Hi ,

So i have noticed in two sites of mine where i work with Child themes , that some parts of the CSS will not be displayed but if insert them in the Customizer everything works fine .

I will give an example , i have a child theme where i have added David Merch Template css to my child theme , some parts like `.single-post .entry-content *+h2 {
margin-top: 48px;
}

h2.large-heading {
font-size: calc(28px + (44 - 28)*(100vw - 400px)/(1600 - 400));
line-height: 1.1em;
}`

Will not work , and many other . But most will work , its like a random stuff .

I have Disabled all cache everything done and still it does not work right .

This is the second site i notice this to happen . i will submit a link .

Hi there,

Can you guide me to the page and the element you are referring to?

Hi ,

Is to all pages , one example is for the H2 elements of the front page ,

There is a css

h2.large-heading {
font-size: calc(28px + (44 – 28)*(100vw – 400px)/(1600 – 400));
line-height: 1.1em;
}`

And some many more other css styles that simply does not work .

Hi there,

i can see those styles in the Customizer and in the Child Theme style sheet - both are being applied correctly. ie. if i disable the customizer styles then the child theme styles apply.

Did you fix this ?

Hi David , It looks like is not working to me , when i add more than 400 css to my child theme , some css cant be aplied like typography etc. i try to debug and see what is actually happening .

I would remove the duplicate CSS you have in the Customizer > Additional CSS - as this is loaded after the theme and child theme style sheets and can override them.

I have inserted the css in the customizer too to check if will be displayed the missing styles , and it worked and this is so strange , looks like some conflict is happening as some styles are recognized from the style.css but others not . if i take and insert them all to customizer all styles look to work perfect!

I will take a deeper look to any plugin / cache / redis conflict .

This sounds like it could be one of two things:

1. The file is cached. It could be your browser, or it could be server/plugin level caching.
2. There's a CSS error in your child theme stylesheet. Anything below the error won't work.

Hi Tom , unfortunately i cant fix this issue , it looks like CSS from the GP CHILD cant be displayed correctly -

1. Copy all the CSS from the Child theme and remove it from there and i paste it to Customizer , all looks to be ok and play super good .

2. I Dont have any CSS or JS minification i have disable all cache and is not the cache .

*** Some Images with the same css in customizer - > https://ibb.co/dtdHk0H - https://ibb.co/ZS1mbDc

*** Some Other with the same css in Child Theme - > https://ibb.co/RQCPjmv - https://ibb.co/5rQRKHr

Also This works in some pages but in other does not ( in Child Css ) - > Shop Page - https://ibb.co/Gd7DBcG , Home Page - https://ibb.co/wQbBnYs ( In the customizer works fine )

Any tips how to debug it with other possible ways ? i will now deactivated GP Premium Plugin to see if there is any conflict there .

Other Bug , H1 Product Font Site does not be recognized from CSS in Child Theme if i disable Woocomerce extension in Generatepress Pro Plugin , sudenly i works and font size is like it should be .

I am going to make this test in one other site that i have similar and i will add all customizer css to a child theme to see if there will be any issue .

I have transfered in the other site the css of customizer in the child theme , and the similarites are the same , the two sites have many things in common.

Maybe your custom CSS isn't specific enough? If you inspect it in Developer Tools, can you see your CSS being applied to the elements you're targeting?

The Customizer CSS displays lower in wp_head, so it's possible that it doesn't need to be as specific as the CSS in the child theme.

Hey Tom ,

Ok i got it , i will give it a test , all that css is from site library , just transfered them to Child Theme .

You can always check in Developer Tools. Just right-click + Inspect the element and you'll be able to see if the CSS is applied or not.

This archived topic is closed to new replies.