Featured collection items are spaced awkwardly—how to fix? (Supply Theme)

Highlighted
Tourist
6 0 1

Hi,

 

I am using the Supply theme with featured collections on my home page. The items (4 per row on desktop, 2 per row on mobile) look great on smaller screens like phones and laptops, but when the screen gets bigger (like on desktop computers) the spacing starts to look really awkward.

 

Specifically, the product name and price are all the way to the bottom left of the cell and the product image is centered. This results in the products looking really awkward and not aligned with the images/name. 

 

I'm thinking that a solution could be having 8 products per row on a bigger screen instead of 2 rows of 4 products. Does anyone know how to do this in the theme's code? When I do that, is there a way to ensure that the theme won't try to force 8 products into the row on a screen that is slightly bigger than a laptop, but not big enough to fit 8 products?

 

Another option would be showing two product photos per cell on bigger screens... is this possible to code?

 

I hope I am making sense with this question! Thanks in advance if anyone can help me out :)

1 Like
Highlighted
Shopify Partner
9252 1179 3248

Hello, @roombodi 

Thanks for post.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Tourist
6 0 1

The URL is roombodi.com. You can see the awkward home page spacing by zooming out with "command minus" Thank you!

0 Likes
Highlighted
Shopify Partner
9252 1179 3248

@roombodi 

Thanks for update

do you mean like this?

Bedding Sets Twin, Twin XL, Queen for Dorm & Bedroom Decor _ roombodi.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Tourist
6 0 1

@KetanKumar Yes that is exactly the problem although my issue was primarily with featured collections on the home page

0 Likes
Highlighted
Excursionist
20 0 5

I can also see the issue with title of the items is not centered

 

Please, help to fix this issue

Happens on all pages with desctope mode

th.psylofashion.com

not centered.png

 

please, advise

1 Like
Highlighted
Shopify Partner
9252 1179 3248

@eddyzp 

Thanks for the update.

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.product-card {
    text-align: center;

  .price {
  align-items: center;

  .price__regular, .price__sale {

margin-right: 0;
}

  }

}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Excursionist
20 0 5

Thank you very much,

 

fast and effective!!! the issue is fixed now

1 Like
Highlighted
Shopify Partner
9252 1179 3248

@eddyzp 

Thanks for update and support

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like