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

Viewing 8 reply threads
  • Author
    Posts
    • #36914
      bmerton
      Supported

      Please see attached photos

      Attachments:
      You must be logged in to view attached files.
    • #36918
      Harry
      Supported

      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

    • #36921
      bmerton
      Supported

      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.
    • #36925
      Harry
      Supported

      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

    • #36927
      bmerton
      Supported

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

    • #36929
      Harry
      Supported

      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

    • #36931
      bmerton
      Supported

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

    • #36934
      bmerton
      Supported

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

    • #36935
      Harry
      Supported

      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

Viewing 8 reply threads

You must be logged in to reply to this topic.