Home › Forums › Themes Support › HelpDesk › When you select two columns, all the alignment of the products is off
- This topic has 8 replies, 2 voices, and was last updated 3 years, 9 months ago by Harry.
-
AuthorPosts
-
-
June 18, 2020 at 9:46 pm #36914
-
June 18, 2020 at 10:35 pm #36918HarrySupport Expired
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 -
June 18, 2020 at 10:51 pm #36921
-
June 18, 2020 at 11:05 pm #36925HarrySupport Expired
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 -
June 18, 2020 at 11:13 pm #36927bmertonSupport Expired
That’s fine but i’m still not getting a single column on the mobile?!
-
June 18, 2020 at 11:27 pm #36929HarrySupport Expired
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 -
June 18, 2020 at 11:30 pm #36931bmertonSupport Expired
Harry – but I want 2 columns on the desktop now! Is the code on the mobile linked to the code on the desktop?
-
June 18, 2020 at 11:35 pm #36934bmertonSupport Expired
I’ve now changed it to 3 columns on the desktop. On the mobile, it’s still showing 2 columns!!!
-
June 18, 2020 at 11:38 pm #36935HarrySupport Expired
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
-
-
AuthorPosts
You must be logged in to reply to this topic.