Critical CSS and WooCommerce

  • Resolved kallym

    (@kallym)


    5 years, 4 months ago

    I have found that when Critical CSS is enabled, it pulls in a WooCommerce CSS file, woocommerce-smallscreen.css, but does not include the wrapping media query for max 768 screen size. I disabled all of the Optimization settings then enabled one at a time and Generate Critical CSS is the setting that causes the problems.

    I put woocommerce-smallscreen.css in the CSS Excludes in Tuning, but it does not help with the Critical CSS problem. The product columns, which should be 22.05% width on larger screens are being displayed at 48%, which should only happen under 768px.

    Is there are Critical CSS Rule that can help?

    I think this is the style that is causing the problem:
    .woocommerce ul.products[class*=columns-] li.product, .woocommerce-page ul.products[class*=columns-] li.product { width: 48%; float: left; clear: both; margin: 0 0 2.992em }

    I tried adding a rule in the Critical CSS rules, for min width 768px, but couldn’t get it quite right.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi @kallym, could you try to add this rule to CCSS rules?

    @media only screen and (min-width:768px){
    .woocommerce ul.products[class*=columns-] li.product, .woocommerce-page ul.products[class*=columns-] li.product{
		float: left;
		margin: 0 2.8% 2.992em 0;
		padding: 0;
		position: relative;
		width: 22.05%;
		margin-left: 0;
		clear: none;
    }
}
    Thread Starter kallym

    (@kallym)

    Thanks for your reply, sorry it took me a while to get back to this. That worked partially in that it is now displaying the correct 4 columns. However, the rows were not lining up correctly. Some product tiles are longer and prevent the first li in the row from floating all the way to the left. I removed the clear:none and that appears to have worked. So this is resolved. ??

    Plugin Support LiteSpeed Lisa

    (@lclarke)

    Glad to hear it! Thanks for letting us know ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Critical CSS and WooCommerce’ is closed to new replies.

Tags