How to reduce the size of the photos of featured collection in my homepage?

Store Design

Topic summary

A store owner seeks help reducing the size of product photos in a featured collection carousel on their homepage, which they find too large.

Solutions Provided:

Multiple CSS-based solutions were offered:

  • Dan-From-Ryviu suggested adding margin adjustments via Custom CSS in Theme settings
  • DaisyVo provided code to reduce product grid item width to approximately 1/7th of container width on desktop screens
  • topnewyork recommended editing theme.css/base.css directly to set maximum width and center the collection

Current Status:

The original poster confirmed one solution worked but created a new issue: the collection is now cramped in the center rather than stretched across the page. They’ve requested additional help to expand the width while maintaining the reduced photo sizes.

The discussion remains ongoing with the layout adjustment still needed.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

Hi! on my home page i have this section for featured collection in a carousel type. however i find the photos abit big. Please help on how to reduce the size of the photos a little bit. thank you.

Shop url - https://greenpaxusa.myshopify.com/
pw - xuldeb

Screenshot_12.png
Screenshot_12.png1909×768 276 KB

2

Hi @GreenPax

Please add this code to Cutom CSS in Online Store > THemes > Customize > Theme settings

@media (min-width: 750px) {
#Slider-template--23380050182462__featured_collection_77xqVJ { margin: 0 5rem; }
}
3

Hi @GreenPax

I hope you are well. You can follow our instructions below:

1/ Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
2/ From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
3/ Copy the code below and paste it there

Here is the code for Step 3:

@media screen and (min-width: 1024px){
ul.grid.product-grid.contains-card.contains-card--product li {
    width: calc(100% / 7.2) !important;
}
}

image (43).png
image (43).png1905×789 435 KB

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

4

Hello, @GreenPax

  1. Go to Online Store
  2. Edit Code
  3. Find theme.css/base.css file
  4. Add the following code in the bottom
div#collection-template--23380050182462__featured_collection_77xqVJ {
    width: 100% !important;
    object-fit: cover;
    max-width: 90rem !important;
    height: auto;
    margin: 0 auto !important;
}

Thanks!

1 Like
5

Hi! it did work, however will you be able to stretch it out alittle bit? it’s all cramped in the center

Screenshot_13.png
Screenshot_13.png1885×646 135 KB