CSS STYLES NOT ALWAYS APPLIED

Dear,

I’m facing a problem for which I have difficulties to identify where it comes from. If you navigate on my site, trying to move across different pages (doesn’t matter which one, just navigate), at some point, you’ll see that the icons in the header will become smaller and the mobile sidebar will be mis-aligned in the left. See attachments.

Can you help me identify why this happens? In the staging site (credentials below), I’ve disabled all plugins, switched to parent theme, removed any custom JS code, updated everything to latest version, and cleared cache everywhere. However, issue is still there.
Thanks

Attachments:

You must be logged in to view attached files.

Hello,

I watched the video you attached and visited your website.

The issue you mentioned is not visible on my end the icons are not changing size. Please clear cache and check back.

Screenshot for Clarification: https://gyazo.com/adbadae317021c5493bc73325fd90866

Best Regards

You must navigate a lot on the site to find the issue. It’s not by just visiting 1 page. You must naviguate a lot, try moving multiple times across pages.

Cache has already been cleared, it is NOT a cache issue.

Hello,

Your issue has been Resolved on the staging website. I have adjusted the CSS you are using and now the issue is not occurring on the staging site.

Please deactivate cache plugin, clear browser cache and check back.

Regards.
Xtemos Studios

I have deleted all custom css on the staging, and cleared all cache.

1) I don’t understand why the mobile sidebar has sometimes a padding to the left (sometimes yes, sometimes). I know that there is a 17px padding on the TITLE but not on the column/row itself.

See video : https://jeriss.tinytake.com/msc/NTcxMTczMF8xNzY0ODc5NA

2) Can you please tell me which css classes should I use to increase the font-size of each of these 4 icons separately?

See attachment.

Attachments:

You must be logged in to view attached files.

Hello,

I watched the video you attached.

1) Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

.mobile-nav .wd-nav-vertical>li>a {
    padding-left: 10px;
}

2) Please try adding the following Custom CSS for that.

The following CSS is combined for the menu burger, wishlist and My account icon:

.whb-top-bar .wd-header-my-account.wd-tools-element .wd-tools-icon:before, .whb-top-bar .wd-header-wishlist.wd-tools-element .wd-tools-icon:before, .whb-top-bar .wd-header-mobile-nav.wd-tools-element .wd-tools-icon:before {
    font-size: 22px;
}

The following CSS is for the cart icon:

.whb-top-bar .wd-header-cart.wd-tools-element .wd-tools-icon:before {
    font-size: 33px;
}

Best Regards

Dear,

Thanks for your answer. Problem 2) is resolved.

But Problem 1) still remains despite the code provided. Maybe I didn’t explain the issue well. The problem is that sometimes there is a white padding on the left of the mobile sidebar. I don’t understand why sometimes it appears. It should never appear. There shouldn’t be any padding. See attachment. The issue doesn’t always appear, it appears sometimes yes sometimes no.

Attachments:

You must be logged in to view attached files.

Hello,

You are Most Welcome.

We are Glad that one of your issues has been Resolved.

Please remove the previous Custom CSS and try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

.widgetarea-mobile {
    padding: 0px !important;
}

Regards.
Xtemos Studios

Problem solved, thanks!

Most Welcome!!!

I’m so happy to hear you are pleased with the Theme and Support. XTEMOS strives to deliver the best customer experience, and it makes our day to hear we have accomplished that.

We count ourselves lucky to have you as a customer. You can always reach us at any time. We are always here to help you.

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards.

[Author]

Posts