Spacing of items on collections page and "related items" on product page

Store Design
1

Hello Everyone and @LitCommerce , @AvadaCommerce

Theme is Minimal, Site is: https://indoorchef.myshopify.com/ password: powcru

2 questions…

I spent a lot of time trying to solve this on my own from old posts, but could not figure it out. I’m trying to better align the products on my collections pages and the “Related products you might like” on my individual product page. My Collections Page product images should be larger and extend across the page, not be columnized under the Collections Page main image. Also, the “related products” cuts off on the mobile view because it is so far aligned left by default. Below are some pictures for reference.

In this picture below you can see how the products bundle to the left. I would like to have them spread across the space, and centered.

Screenshot 2022-01-24 221147.png
Screenshot 2022-01-24 221147.png1263×686 278 KB

This image below is the mobile view and you can see how it is cut off. I would like to have related products also centered or spread evenly across the open space.

Screenshot 2022-01-24 221045.png
Screenshot 2022-01-24 221045.png558×655 22.8 KB

Thanks in advance for any help…

Justin

2

Hi @inchef ,

  • With Collection page: Go to Assets > theme.scss.liquid and paste this at the bottom of the file:
#smokeless-indoor-grills .grid-link__container,
#copper-indoor-grills .grid-link__container{
  display: flex !important;
}
#smokeless-indoor-grills .grid-link__container .grid__item,
#copper-indoor-grills .grid-link__container .grid__item{
  width: 50% !important;
}

Hope it helps!

1 Like
3

Thank you so much @LitCommerce ! This is EXACTLY what I was trying to do.

1 Like