Increase grid size on mobile

Store Design
,

Topic summary

A user seeks help increasing the grid size for product displays on mobile devices, as the current layout appears too small. Desktop view is satisfactory.

Solution provided:

  • Two separate CSS code snippets were shared to address different pages
  • For product listing pages: Add code to assets/component-product-listing.css that adjusts padding for screens 360px and wider
  • For the homepage: Add code to assets/base.css targeting screens under 551px, modifying product carousel and grid padding/width

Status: The issue appears resolved with specific technical implementation steps provided. The user needs to implement the CSS modifications in their theme files.

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

Hi,

Can you please help to increase grid size only on mobile. Desktop looks fine. On main page the grid size looks pretty small.

https://www.rivaajethnic.com/

Thanks!

RivaajEthnic_0-1738132993164.png
RivaajEthnic_0-1738132993164.png335×510 85.2 KB

1 Like
2

@RivaajEthnic

Please add the following CSS code to your assets/ component-product-listing.css bottom at the file.

@media (min-width: 360px) {
    .productGrid .product {
        padding-left: 2px !important;
        padding-right: 2px !important;
        margin-bottom: 0;
    }
}

Thanks!

3

@RivaajEthnic

CSS for home page

Please add the following CSS code to your assets/ base.css bottom at the file.

@media (max-width: 551px) {
    .halo-product-block .products-carousel .product, .halo-product-block .products-grid .product {
        padding: 0 5px;
        max-width: 308px !important;
        width: 100% !important;
    }
}

Thanks!