Increase grid size

Store Design
, , ,

Topic summary

A user seeks to increase product image sizes in a slider by 30% on mobile, as they appear too small. The homepage slider is the specific area of concern.

A solution is provided involving CSS customization:

  • Navigate to Store Online ā†’ Theme ā†’ Edit Code ā†’ Assets/theme.css
  • Add a media query targeting screens up to 768px width
  • Modify .grid-overflow-wrapper .grid__item to use width: 50% and flex: 0 0 50%

Additional code is mentioned to fix a related desktop bug, though the full details appear corrupted in the conversation. The discussion includes screenshots showing the current mobile layout and proposed changes.

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

Hi, I would like to increase the size of the products on the slider by 30%, it seems like the images are really small on mobile, can anyone help?
THIS IS THE SECTION Iā€™M REFERRING TO on my homepage - for mobile.

Thank you in advance!!
https://ynco-ny.com/

Daniel19901_0-1715890520295.png
Daniel19901_0-1715890520295.png538Ɨ407 127 KB

2

Hi @Daniel19901 ,

May I suggest to update code these steps:

  1. Go to Store Online-> theme ā†’ edit code
  2. Assets/theme.css
  3. Add code below to end of file
@media only screen and (max-width: 768px) {
  body .grid-overflow-wrapper .grid__item {
    width: 50%;
    flex: 0 0 50%;
  }
}

EBOOST_0-1715897011128.png
EBOOST_0-1715897011128.png512Ɨ656 282 KB

I saw have a bug on desktop as well

EBOOST_1-1715897035218.png
EBOOST_1-1715897035218.png1884Ɨ509 112 KB

You can add code below to fix as well

#shopify-section-template--22657255964964__text_columns_KULknp .page-width {
  clear: both;
}
1 Like