CSS in Child Theme Not Displaying Properly

[dmblover41]

Hello, I have a strange problem that has been driving me crazy the past few days. I’m running Dante with a child theme, and am using the child theme’s style.css file (via the WP editor) to customize the look of the site. Recently as I’ve been doing more customization, I notice that when refreshing the page after saving the CSS file it will look correct (style applied), but I refresh it again immediately, it will display without the style applied. This is without changing the CSS file or anything else in WP. The screenshots attached were taken one right after the other, with only a page refresh in between. The first time it displayed correctly, the second time it did not (notice the font size of the text in the numbered area and the size of the flags in the top bar).

I’m building this site for a client and it’s becoming increasingly frustrating not only because of all the time I’m spending troubleshooting, but because I can’t be confident that it will display correctly for him.

Please help!

[Mohammad – SUPPORT]

Hi,
Please share website URL with login credential so i can check and fix the issue .

Thanks 🙂
With Best Regards
Swift Ideas

[dmblover41]

This reply has been marked as private.

[Mohammad – SUPPORT]

Hi,
Its working fine at my side as i tested . Please check with after clear cache and hard refresh [CTRL+F5] or another machine .

Thanks
With Best Regards
Swift Ideas

[dmblover41]

Mohammad,

Thanks, but when I first posted about the issue I had already cleared the catch and done multiple hard refreshes – that’s when I’d see it display correctly one time, but incorrectly after another refresh. If you were testing the text and flag images, those are displaying correctly now because I also copied that CSS into the Custom CSS/JS field in the Theme Options. That seems to work, but if you remove it there (but still have it in the Child Theme’s style.css file), the same issue occurs. Any ideas?

Thanks,
Ryan

[Mohammad – SUPPORT]

Hi,
Some times child theme style.css dont override all rules of parent theme so Custom CSS is best way to put custom css . Custom CSS will override all rules sure . So its best way to use custom css .

Thanks 🙂
With Best Regards
Swift Ideas

[dmblover41]

Is there any reason why? Even if the !important tag is used?

[Mohammad – SUPPORT]

Hi,
Yes !important is also good to override inline and all type of css rule .

Thanks

[dmblover41]

But I had !important on these in the child theme’s style.css file and it still didn’t work correctly. So in that case I have no choice but to put it in the custom CSS area? I just want to be sure. Ideally I’d like to have it all in one location.

[Mohammad – SUPPORT]

Hi,
Please can you post css that is used by you at custom css so i can check in detail .

Thanks

[dmblover41]

Yes, here’s what I added to the child theme’s style.css file (and worked intermittently), but seemed to work all the time when added to the custom CSS area.

.lang {float: right !important; margin-right: 10px; color: #999 !important; padding-top: 4px; font-size: 14px !important;}
.flagimg {height: 24px !important; width: 24px !important;}

[Mohammad – SUPPORT]

Hi,
Google language selector embed internel css for these elements so your css in style.css will not work perfectly .

[dmblover41]

I looked at the Google Language plugin and there is an external CSS file it loads, but my !important tags should override it.

Regardless, the .lang class just applied to simple text I added to the top bar (no associated with Google plugin), and I was experiencing the same issue.

[Mohammad – SUPPORT]

Hi,
Please put all custom css here so i will put at style.css to check .
Thanks

[dmblover41]

/* LICENSE & DETAILS
==================================================

Theme Name: Duralum Products, Inc
Theme URI: http://www.duralum.com
Description: Custom theme for Duralum
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Template: dante
Version: 1.0
Author: Conrad Design
Author URI: http://www.conrad-design.com

All files, unless otherwise stated, are released under the GNU General Public License
version 3.0 (http://www.gnu.org/licenses/gpl-3.0.html)

==================================================
*/

/* ——————————————–
DANTE CSS IMPORT
——————————————– */

@import url(“../dante/style.css”);

/* ——————————————–
CHILD THEME CSS
——————————————– */

.pt10{padding-top: 10px !important;}
.pt15{padding-top: 15px !important;}
.pt20{padding-top: 20px !important;}
.pt25{padding-top: 25px !important;}
.pt30{padding-top: 30px !important;}
.pt40{padding-top: 40px !important;}
.pt50{padding-top: 50px !important;}
.pt60{padding-top: 60px !important;}
.pt70{padding-top: 70px !important;}
.pt80{padding-top: 80px !important;}
.pt90{padding-top: 90px !important;}
.pt100{padding-top: 100px !important;}

.pb10{padding-bottom: 10px !important;}
.pb15{padding-bottom: 10px !important;}
.pb20{padding-bottom: 20px !important;}
.pb25{padding-bottom: 10px !important;}
.pb30{padding-bottom: 30px !important;}
.pb40{padding-bottom: 40px !important;}
.pb50{padding-bottom: 50px !important;}
.pb60{padding-bottom: 60px !important;}
.pb70{padding-bottom: 70px !important;}
.pb80{padding-bottom: 80px !important;}
.pb90{padding-bottom: 90px !important;}
.pb100{padding-bottom: 100px !important;}

.pl10{padding-left: 10px !important;}

.mt10{margin-top: 10px !important;}
.mt15{margin-top: 10px !important;}
.mt20{margin-top: 20px !important;}
.mt25{margin-top: 10px !important;}
.mt30{margin-top: 30px !important;}
.mt40{margin-top: 40px !important;}
.mt50{margin-top: 50px !important;}
.mt60{margin-top: 60px !important;}
.mt70{margin-top: 70px !important;}
.mt80{margin-top: 80px !important;}
.mt90{margin-top: 90px !important;}
.mt100{margin-top: 100px !important;}

.mb10{margin-bottom: 10px !important;}
.mb15{margin-bottom: 10px !important;}
.mb20{margin-bottom: 20px !important;}
.mb25{margin-bottom: 10px !important;}
.mb30{margin-bottom: 30px !important;}
.mb40{margin-bottom: 40px !important;}
.mb50{margin-bottom: 50px !important;}
.mb60{margin-bottom: 60px !important;}
.mb70{margin-bottom: 70px !important;}
.mb80{margin-bottom: 80px !important;}
.mb90{margin-bottom: 90px !important;}
.mb100{margin-bottom: 100px !important;}

.pullleft{margin-left:0 !important; padding-left:0 !important;}

.menu-duralum-main-menu-container {padding-top:17px !important;} /* ADD SPACE ABOVE NAV ITEMS */
.graybg #main-container {background:#333 !important;} /*MAKES MAIN CONTAINER BG GRAY (BODY) */

.f-white {color: #fff !important;}
.impact-text-huge {font-size: 44px !important; font-family: “Museo500Regular”, Arial, Helvetica, Tahoma, sans-serif;}

.sf-icon-box-animated .front {padding: 40px 20px !important;} /* DECREASE HEIGHT OF ICON FLIP BOXES */
.sf-icon-box-animated .back {padding: 20px;} /* PADDING FOR BACK SIDE OF ICON FLIP BOXES */

.tight-icons h3{margin:15px 0 0 0;}
.tight-icons .sf-icon-box h3{margin:7px 0;}

.graphite, .graphite h1, .graphite h2, .graphite h3 {color:#666 !important;}
.cyan, .cyan h1, .cyan h2, .cyan h3 {color: #1dc6df !important;}

.sf-list {padding-left:22px;}
.sf-list i{margin-left: -22px;}
.spb-icon-heading i {color: #1dc6df !important;}

.li-no-title .sf-icon-box.sf-icon-box-left-icon-alt h3 {font-size: 16px !important;}

.list2 .sf-list {padding-left:18px;}
.list2 .sf-list i{margin-left: -18px;}

.textpad h1, .textpad h2, .textpad h3, .textpad p{padding-left: 15px !important; padding-right: 15px !important;}

#breadcrumbs a:hover {color: #333 !important;}

#wpmem_login legend, #wpmem_reg legend{font-family: “Museo500Regular”, Arial, Helvetica, Tahoma, sans-serif !important; font-weight:400 !important; padding-bottom:10px; font-style: normal !important;}

#wpmem_reg .req {
color: #1dc6df !important;
font-size: 22px;
line-height: 50%;
}

#wpmem_login #pwd {margin-top:5px !important;}

ul.sub-menu li {text-transform:none;}
ul.sub-menu {margin-top: -7px !important;} /* MAKE SUB-MENU LINE UP WITH BOTTOM OF MAIN MENU BOX – ONLY WHEN IT ISN’T REDUCED!!! */
.sticky-header-resized ul.sub-menu {margin-top: 25px !important;} /* MAKE SUB-MENU LINE UP WITH BOTTOM OF MAIN MENU BOX – ONLY WHEN IT’S REDUCED!!! */
.menu-item-12154 .sub-menu {width:350px !important} /* MAKE PRODUCTS MENU EXTRA WIDE */

.ltgrey .sf-icon-box-content-wrap{background: #f3f3f3!important; padding:15px 10px 10px !important; border:1px solid #ccc;}
.ww-colors h4 {color:white!important;}
.ww-colors .container {margin-left: -15px !important;}

.iconpad h3 {padding-left:25px; padding-top:10px;}
.iconpad .sf-icon-box-content {padding-left: 25px;}

.tb-right #flags {float: right !important;}
.lang {float: right !important; margin-right: 10px; color: #999 !important; padding-top: 4px; font-size: 14px !important;}
.flagimg {height: 24px !important; width: 24px !important;}
#top-bar {padding-top:0 !important; padding-bottom:2px !important;}