Can't get CSS in child theme to work

Hey,

sorry to bother you guys, but I am trying to move all my css code from “global” and “custom” and “single pages” to my style.css in the PRO child theme. I deleted the css within the theme and moved it to my style.css in the child theme. The problem is that nothing really happens so I copied everything back - for now.

I read some entries within this support forum but couldn’t figure out where the problem is. I am using your pre-set child theme.

1 Like

Hi @syquest,

Thanks for writing in.

You do not need to delete the CSS in your parent theme. Only add style.css in your child theme. You can check the link below on how to setup your child theme.

If still not helping, please share us your admin credentials and FTP so we could check your setup closer.

Don’t forget to set it as private reply.

Thanks.

I am sorry, I maybe explained it a bit confusing.

I did not delete the style.css or its content within the theme main folder. I deleted all custom css within the theme configurator (frontend).

I sure do have a style.css in my childtheme (which I downloaded from you), but everything I write in there doesn’t do anything, so I am still stuck to put my custom css in your configurator / customizer. And that is actually my problem. The style.css within my childtheme is not working and I have no clue why.

Hello There,

Thank you for the clarifications. You must understand first how the styles were being outputted in the page. This is the order:

  • stack styles
  • child theme’s style.css
  • WordPress Additional css in the customizer
  • Customizer’s custom css or Theme Options custom css
  • Cornerstone’s custom css.

Take notice that the child theme’s style.css is loaded first therefore, all your styles added in it were overwritten or overridden with the defaults or theme options settings.

I have checked the contents of your child theme’s style.css and I saw invalid css.

.x-child-theme-active element {
    @media (max-width: 480px) {
        .el13.x-anchor, .el14.x-anchor {
            font-size: 1em;
        }
        .el13.x-anchor .x-anchor-content {
            padding: 0.5em 0.5em 0.5em 0.5em;
        }
        .el14.x-anchor .x-anchor-content {
            padding: 0.5em 0.5em 0.5em 0.5em;
        }
    }
    @media (min-width: 481px) and (max-width: 767px) {
        .el13.x-anchor,
        .el14.x-anchor {
            font-size: 1.3em;
        }
        .el13.x-anchor .x-anchor-content {
            padding: 0.5em 0.5em 0.5em 0.5em;
        }
        .el14.x-anchor .x-anchor-content {
            padding: 0.5em 0.5em 0.5em 0.5em;
        }
    }
    @media (min-width: 768px) and (max-width: 979px) {
        .el13.x-anchor,
        .el14.x-anchor {
            font-size: 1.6em;
        }
        .el13.x-anchor .x-anchor-content {
            padding: 0.5em 0.5em 0.5em 0.5em;
        }
        .el14.x-anchor .x-anchor-content {
            padding: 0.5em 0.5em 0.5em 0.5em;
        }
    }
    @media (min-width: 980px) and (max-width: 1199px) {
        .el13.x-anchor,
        .el14.x-anchor {
            font-size: 1.8em;
        }
        .el13.x-anchor .x-anchor-content {
            padding: 0.5em 0.5em 0.5em 0.5em;
        }
        .el14.x-anchor .x-anchor-content {
            padding: 0.5em 0.5em 0.5em 0.5em;
        }
    }
    /* END - Button styling for front page small sizes */
    /* WOOCOMMERCE STUFF */
    .woocommerce div.product .summary .price>.amount {
        color: lightcoral;
        font-size: 8em;
    }
    div.product_meta {
        display: none;
    }
    /* Search Result Styling */
    .has-post-thumbnail .entry-featured {
        border-bottom: 2em solid transparent;
        width: 25% !important;
        margin: 0 auto;
    }
    // Author & other Meta stuff
    .p-meta {
        display: none;
    }
    // Text of search result
    .entry-content {
        margin-top: 1em;
        font-size: 1.2em !important;
        line-height: 1;
    }
}

Please update it and remove the:

.x-child-theme-active element {
}

because it is not helping. What you must do is to have it this way:


@media (max-width: 480px) {
    .x-child-theme-active .el13.x-anchor, 
    .x-child-theme-active .el14.x-anchor {
        font-size: 1em;
    }
    .x-child-theme-active .el13.x-anchor .x-anchor-content {
        padding: 0.5em 0.5em 0.5em 0.5em;
    }
    .x-child-theme-active .el14.x-anchor .x-anchor-content {
        padding: 0.5em 0.5em 0.5em 0.5em;
    }
}
@media (min-width: 481px) and (max-width: 767px) {
    .x-child-theme-active .el13.x-anchor,
    .x-child-theme-active .el14.x-anchor {
        font-size: 1.3em;
    }
    .x-child-theme-active .el13.x-anchor .x-anchor-content {
        padding: 0.5em 0.5em 0.5em 0.5em;
    }
    .x-child-theme-active .el14.x-anchor .x-anchor-content {
        padding: 0.5em 0.5em 0.5em 0.5em;
    }
}
@media (min-width: 768px) and (max-width: 979px) {
    .x-child-theme-active .el13.x-anchor,
    .x-child-theme-active  .el14.x-anchor {
        font-size: 1.6em;
    }
    .x-child-theme-active .el13.x-anchor .x-anchor-content {
        padding: 0.5em 0.5em 0.5em 0.5em;
    }
    .x-child-theme-active .el14.x-anchor .x-anchor-content {
        padding: 0.5em 0.5em 0.5em 0.5em;
    }
}
@media (min-width: 980px) and (max-width: 1199px) {
    .x-child-theme-active .el13.x-anchor,
    .x-child-theme-active .el14.x-anchor {
        font-size: 1.8em;
    }
    .x-child-theme-active .el13.x-anchor .x-anchor-content {
        padding: 0.5em 0.5em 0.5em 0.5em;
    }
    .x-child-theme-active .el14.x-anchor .x-anchor-content {
        padding: 0.5em 0.5em 0.5em 0.5em;
    }
}

/* END - Button styling for front page small sizes */
/* WOOCOMMERCE STUFF */
.x-child-theme-active .woocommerce div.product .summary .price>.amount {
    color: lightcoral;
    font-size: 8em;
}
.x-child-theme-active div.product_meta {
    display: none;
}
/* Search Result Styling */
.x-child-theme-active .has-post-thumbnail .entry-featured {
    border-bottom: 2em solid transparent;
    width: 25% !important;
    margin: 0 auto;
}
// Author & other Meta stuff
.x-child-theme-active .p-meta {
    display: none;
}
// Text of search result
.x-child-theme-active .entry-content {
    margin-top: 1em;
    font-size: 1.2em !important;
    line-height: 1;
}

This will force the css in the child theme to take effect and prevent it from being overridden. Some styles may still not be applied especially if there is an inline css or those elements in the stack styles.css has css with !important in it.

Hope this explains it briefly.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.