CSS oddity on WooCommerce Endpoints

[thisisbbc]

Hey guys,

So I’m having this weird issue where the CSS of a header is not updating properly on WooCommerce Endpoints. We have small icons that should wrap into columns as shown on the home page.

I went through this with WPEngine Support and they couldn’t find cache-related on their end.

Home page:

Cart page (same result with my-account, etc):

The CSS bit:

@media all and (max-width: 767px) {
  #menu-item-12813, #menu-item-12816 {max-width:250px;}
  #menu-item-12836 ul li {min-width:auto;width:33%;clear:none;}
  #menu-item-12836 ul li:last-child {clear:both;}
}

The weirdest thing is that I can still see the CSS being outputted on the WooCommerce Endpoint pages, but for some reason the rule is not applied.

Waiting for your feedback.

Thank you!

[ruenel]

Hello @thisisbbc,

Thanks for posting in! I could not replicate the issue of your site. When I check your site on my mobile phone, I am seeing it perfectly fine.

You may have a caching issue since you are using CDN. Please check out this documentation to know more about CDN caching:

• https://theme.co/docs/common-issues#disabling-cache
• https://theme.co/docs/common-issues#disabling-cdn

Please also test the site on an actual phone or using a private browsing mode.

Best Regards.