When you select two columns, all the alignment of the products is off

[bmerton]

Please see attached photos

Attachments:

You must be logged in to view attached files.

[Harry]

Hi,

The issue because the images of product not fit content. If you want on 2 columns the image align, please go to Appearance > Customize > WooCommerce > Product Images > Thumbnail width and change to 570 but it will make your site slower because load bigger images.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[bmerton]

This has solved the alignment problem but it’s made the overlapping problem worse…see attached.

Attachments:

You must be logged in to view attached files.

[Harry]

This issue related Jetpack lazyload image option. I turn it off it now ok.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[bmerton]

That’s fine but i’m still not getting a single column on the mobile?!

[Harry]

Please go to Theme Option > WooCommerce > Product Listing Settings > Column and change to 3 columns of product per row.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[bmerton]

Harry – but I want 2 columns on the desktop now!  Is the code on the mobile linked to the code on the desktop?

[bmerton]

I’ve now changed it to 3 columns on the desktop.  On the mobile, it’s still showing 2 columns!!!

[Harry]

Hi, please change prev code to

@media only screen and (max-width: 736px) {
.products .jas-col-xs-6.product {
	-ms-flex-preferred-size: 100%;
	-webkit-flex-basis: 100%;
	flex-basis: 100%;
	max-width: 100%;
	width: 100%;
}}
@media only screen and (max-width: 480px) {
.products .jas-col-xs-6:nth-child(2n), .products.jas-masonry .jas-col-xs-6:first-child, .products.jas-masonry .jas-col-xs-6:nth-child(2n+1) {
	padding-left: 1rem;
}
.products .jas-col-xs-6:first-child, .products .jas-col-xs-6:nth-child(2n+1), .products.jas-masonry .jas-col-xs-6:nth-child(2n) {
	padding-right: 1rem;
}}

it will work when you change desktop to 2 columns

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Author]

Posts