How to make featured collection smaller on the sense theme?

Store Design
,

Topic summary

A user needed to reduce the size of their “New Arrivals” featured collection on their Shopify store’s homepage using the Sense theme. The collection images (600x600px) were too large to fit on one screen in desktop view.

Solution provided:

  • Add custom CSS code to the assets/component-slider.css file
  • The CSS targets desktop screens (min-width: 990px) and adjusts the grid item width and margins
  • Uses media queries to control the slider’s maximum width and centering

Outcome:
The CSS solution worked perfectly and resolved the sizing issue.

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

Hi my store link is here I have also uploaded an image of the issue.

I am trying to make my featured collection “New Arrivals” on my main page smaller. As you can see on the desktop, it cannot fit into one screen shot. The pictures in the collection are only 600 x 600 px. I appreciate any help!

Screen Shot 2023-01-09 at 2.36.57 PM.png
Screen Shot 2023-01-09 at 2.36.57 PM.png1366×653 230 KB

2

@Maddielynn

Please add the following CSS code to your assets/ component-slider.css bottom of the file.

@media screen and (min-width: 990px){
.slider--desktop.grid--1-col-desktop .grid__item {
    width: calc((25% - var(--desktop-margin-left-first-item)) - var(--grid-desktop-horizontal-spacing) * 9) !important;
    margin-left: auto !important;
}
}

@media screen and (min-width: 990px){
.slider--desktop {
    max-width: 950px !important;
    margin: 0 auto !important;
}
}

Thanks!

1 Like
3

Thank you so much!!! It worked perfectly!

1 Like
4

@Maddielynn

Welcome Again!

Thanks!