Column Width for Mobile WooCommerce

Hi Heather-

Thanks for reaching out, and thanks for the question about using WooCommerce with the Cobalt WordPress Theme. And a special thanks for helping us comply with the WordPress Forum guidelines by moving your original question over here.

As I mentioned in the original question, your Custom CSS code here would normally work out-of-the-box with Cobalt, but it looks like you have another Custom CSS rule that’s interfering:

.container,.infinite-footer-container,.page-template-template-builder-php .entry-content>.twitter-share {
padding: 0 100px;
}

Since that rule uses the general .container class, it’s also adding 100 pixels on both the left- and right-side of your mobile view. I’d modify your Custom CSS rule like this:

@media screen and (max-width: 768px) { 
.woocommerce ul.products[class*=columns-] li.product, 
.woocommerce-page ul.products[class*=columns-] li.product { 
width: 100% !important; 
} 
main.container { padding: 0 10px; }
}

That way, you can keep the custom padding on .container as well as make sure that your products are large enough on narrow screens. You can adjust the 10px value to suit your preferences.

Hi Heather!

I took a look at your Checkout page and I wrote some CSS that should allow that Create an Account? button to stretch to the length of the other bars on that page.


.woocommerce-checkout .create-account .woocommerce-form__label-for-checkbox {
display: flex;
align-items: center;
}
.woocommerce-checkout .create-account .woocommerce-form__label-for-checkbox span {
width: 100%;
}


That code worked in the development tools in my browser, so hopefully it has the same effect when implemented through your website’s Customizer.

I think the best place to get help for the issues with the Asset Cleanup plugin is in their public support forums on WordPress.org. Their team should be able to help you write the appropriate enqueue scripts so you don’t have to reload your CSS on every WooCommerce page if you make a change. I also recommend trying out Code Snippets for managing custom PHP scripts on your website. That plugin allows you to add custom PHP without having to directly modify the functions.php file in your theme and should prevent your custom code from being overwritten whenever the theme files are updated.

Please let us know if you have any other questions for us!