Problem loading css codes

[bereim.com]

I have placed the css codes in the path below:
Theme Setting -> Custom CSS

When I open the product page, the codes are incompletely loaded:
https://ibb.co/GWD6Bpf

Now if I refresh the page again, the codes are correct:
https://ibb.co/2dPDSBp

I have purchased 2 licenses for 2 different sites and I have this problem on both sites. What is the solution to this problem?

• This topic was modified 1 year, 3 months ago by bereim.com.

Hello,

Your site is not reachable now.

Please insert the site admin access into the Private content below the message area. We will take a closer look at the case.

Best Regards

Access was granted and I put the information in the private area

Hello,

You have taken the wrong selectors.

You can change the font by means of the Advanced typography option, which allows you to choose the item from a drop-down or insert your custom CSS class. Please navigate to the Theme Settings > Typography > Advanced Typography.

Here is the documentation providing more detailed instructions: https://xtemos.com/docs/woodmart/advanced-typography-settings/

Best Regards

But my problem is not the font! My problem is css codes not loading!

My problem is not solved

Hello,

Please deactivate all the plugins except these ones:

Slider Revolution
Elementor
Woodmart Core
Contact Form 7
MailChimp for WordPress
WooCommerce
Safe SVG
Switch to the parent theme and check.

If the problem has gone, activate the plugins one by one, checking the issue to detect which one causes the problem.

Best Regards

This problem is not related to plugins! I have this problem for a long time and your support has not helped me to fix this problem

Please guide me if anyone is here. I have had this problem for more than 1 year and it has not been solved

Hello,

Taking into consideration of the CSS priority, you need to make your selector more cascade to override the priority default styles.

In order to make the selector cascade, you need to add body tag or .website-wrapper class.

For example https://prnt.sc/FA5z5uSMTBlc This is an incorrect selector as both selectors are absolutely equal and cannot override the styles.

This sample is correct: https://prnt.sc/UUAsa8O4UGwX as the custom CSS selector has the body tag.

You can read more about this nature here: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

If you have any questions please feel free to contact us.

Best Regards

[bereim.com]

Again the problem was not solved. I put the code here. How do I fix this problem?

.tabs-layout-tabs .shop_attributes {
  max-width: 850px;
}

.wd-nav-wrapper.wd-nav-tabs-wrapper.text-center {
    margin-top: -40px;
    margin-bottom: 0;
    text-align: right;
    background: #cb79df;
}
.tabs-layout-tabs .tabs li {
    display: inline-flex;
    margin-left: 0;
    color: #404040;
}
.tabs-layout-tabs .tabs li a {
    margin-left:3px;
    position: relative;
    display: inline-block;
    padding-top: 13px;
    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
    text-transform: uppercase;
    font-weight: inherit;
    font-size: 14px;
    opacity: .7;
    background-color: #f0f1f1;
}
.wd-nav[class*=wd-style-]>li.active>a{
	background:#ffffff;
}
wd-nav.wd-style-underline-reverse>li>a>.nav-link-text:hover {
	position:none;
}
.wd-nav.wd-style-underline-reverse>li>a>.nav-link-text:after {
    top: 40px;
}
.wd-nav[class*=wd-style-underline] .nav-link-text {
    position: initial;
}
.woocommerce-Tabs-panel{background:#ffff;padding:25px;border:1px solid #f0f1f1}
.tabs-layout-tabs .tabs li a:after{background-color: #f47ba8;}

• This reply was modified 1 year, 3 months ago by bereim.com.

Hi,

Woodmart has an automatic CSS generator that loads parts of CSS styles only for elements that are placed on the page. Since in that case, some styles are loaded dynamically, they are loading after theme settings custom styles. Having custom CSS code selectors with the same specificity as theme selectors make styles placed below an advantage over others. In that case, to overweight theme styles, your custom code selector needs to have a higher specificity.

Theme styles parts are generated every time you save theme settings and because of that, you may see issues after settings resave if your custom code is created with the wrong specificity.

Examples

WRONG. Your custom code selector is equal to the theme styles selector and depending on the position of styles on the web page your custom style may not overweight theme styles and may not work properly.

.tabs-layout-tabs .tabs li a {
    margin-left:3px;
    position: relative;
    display: inline-block;
    padding-top: 13px;
    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
    text-transform: uppercase;
    font-weight: inherit;
    font-size: 14px;
    opacity: .7;
    background-color: #f0f1f1;
}

CORRECT. This code contains an additional (.website-wrapper) class in the selector. In this case, the styles will always be overwritten by custom code, regardless of the position of the rest theme CSS code:

.website-wrapper .tabs-layout-tabs .tabs li a {
    margin-left:3px;
    position: relative;
    display: inline-block;
    padding-top: 13px;
    padding-bottom: 10px;
    padding-left: 15px;
    padding-right: 15px;
    text-transform: uppercase;
    font-weight: inherit;
    font-size: 14px;
    opacity: .7;
    background-color: #f0f1f1;
}

Unfortunately, this issue can’t be fixed only via WordPress theme, and to fix that, you need to refactor your custom CSS code by increasing the specificity of the selector. CSS Specificity is part of general CSS rules and in creating custom code via it, you need to do it accordingly to the rules, or in other cases in will not work properly.

Best Regards

Thank. Now I want those three spaces to be reduced and that red line to be moved to the bottom of the menu. what’s the solution?

Attachments:

You must be logged in to view attached files.

The problem was solved. Thanks

You are welcome! We are here to help.

Wish you a wonderful day!

[Author]

Posts