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.