Your account expired support, please renew to get your support.
Renew support on the EnvatoCheck the license on the Envato

Home › Forums › Themes Support › HelpDesk › When you select two columns, all the alignment of the products is off

Viewing 8 reply threads
Save
  • Author
    Posts
    • June 18, 2020 at 9:46 pm #36914
      bmerton
      Support Expired

      Please see attached photos

      Attachments:
      You must be logged in to view attached files.
    • June 18, 2020 at 10:35 pm #36918
      Harry
      Support 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
      bmerton
      Support Expired

      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.
    • June 18, 2020 at 11:05 pm #36925
      Harry
      Support 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 #36927
      bmerton
      Support Expired

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

    • June 18, 2020 at 11:27 pm #36929
      Harry
      Support 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 #36931
      bmerton
      Support 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 #36934
      bmerton
      Support 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 #36935
      Harry
      Support 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

  • Author
    Posts
Viewing 8 reply threads
Save

You must be logged in to reply to this topic.