[Resolved] Child Theme CSS bug

Home Forums Support Child Theme CSS bug

  • This topic has 13 replies, 4 voices, and was last updated 6 months ago by Tom.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1195313
    FunkyCss

    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 .

    #1195631
    Leo
    Staff
    Customer Support

    Hi there,

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

    #1196008
    FunkyCss

    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 .

    #1196083
    David
    Staff
    Customer Support

    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 ?

    #1196134
    FunkyCss

    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 .

    #1196179
    David
    Staff
    Customer Support

    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.

    #1196604
    FunkyCss

    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 .

    #1196822
    Tom
    Lead Developer
    Lead Developer

    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.

    #1201625
    FunkyCss

    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/dtdHk0Hhttps://ibb.co/ZS1mbDc

    *** Some Other with the same css in Child Theme – > https://ibb.co/RQCPjmvhttps://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 .

    #1201635
    FunkyCss

    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 .

    #1201648
    FunkyCss

    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.

    #1201909
    Tom
    Lead Developer
    Lead Developer

    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.

    #1201930
    FunkyCss

    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 .

    #1202154
    Tom
    Lead Developer
    Lead Developer

    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.

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