ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

• Back to forum

  Posted in: Atelier
• May 23, 2017 at 9:25 pm #325738
  wayward_studio

  Member

  Post count: 71

  Hi team,

  I’ve just changed the layout of my shop page and would like to decrease the gutter size horizontally and vertically around the products.

  I remembered that I had asked for some code last time I edited using a different template. I found the following code in my custom CSS that I think may be related to that, or if it isnt I would like to know if I can delete this?

  The code is:

  .page-heading-hidden+.inner-page-wrap.woocommerce-shop-page {
  margin-top: 0px;
  }

  .woocommerce ul.products.multi-masonry-items.gutters li.product {
  padding-bottom: 20px!important;
  margin-bottom: 0;
  }
  .woocommerce ul.products li.product {
  padding: 0 10px;
  }

  Thank you for your assistance as always!

  May 24, 2017 at 9:39 am #325765
  David Martin – Support

  Moderator

  Post count: 20834

  You can adjust the gutter padding and bottom margin using this:

  .woocommerce .products .product.product-display-gallery, 
  .woocommerce .products .product.product-display-gallery-bordered, 
  .woocommerce .products.product-type-gallery .product, 
  .woocommerce .products.product-type-gallery-bordered .product {
      margin-bottom: 0px;
  }
  .woocommerce ul.products li.product {
      padding: 0 0px;
  }

  May 24, 2017 at 11:03 am #325800
  wayward_studio

  Member

  Post count: 71

  This reply has been marked as private.
  May 24, 2017 at 11:11 am #325803
  David Martin – Support

  Moderator

  Post count: 20834

  Glad to help you.

  The layout is also adjust using Masonry fitRows for the grid layout so that could explain the slight discrepancy you describe.

  If you have found the theme/support useful, we appreciate it if you can leave feedback on our item if you have the time as it really helps us out.

  Thanks.

  May 24, 2017 at 11:25 pm #325900
  wayward_studio

  Member

  Post count: 71

  This reply has been marked as private.
  May 28, 2017 at 11:12 pm #326257
  Swift Ideas – Ed

  Keymaster

  Post count: 15264

  Hi @wayward_studio

  Please try adding this CSS, and you can adjust as you like:

  .masonry-items .blog-item {
      margin-bottom: 10px;
      padding-left: 5px;
      padding-right: 5px;
  }

  – Ed

  May 30, 2017 at 10:26 am #326415
  wayward_studio

  Member

  Post count: 71

  This reply has been marked as private.
  June 1, 2017 at 12:09 pm #326686
  Rui Guerreiro – SUPPORT

  Keymaster

  Post count: 25779

  The url you placed above is returning Not Found.
  Can you provide a new url and describe exactly what you want to change?

  Thanks

  -Rui

  June 1, 2017 at 11:31 pm #326762
  wayward_studio

  Member

  Post count: 71

  This reply has been marked as private.
  June 5, 2017 at 3:26 pm #326944
  David Martin – Support

  Moderator

  Post count: 20834

  This will change all masonry blog items.

  Your page contains Page Builder image assets, not masonry blog items – I am not clear on what you want to change now. Please clarify.

  Thanks.

• Back to forum

  Posted in: Atelier