How can I decrease the size of my product image on the homepage?

Store Design
, , , , ,

Topic summary

A user seeks to reduce the size of product images displayed on their homepage at driptrove.com. An attached screenshot illustrates the current oversized product display on mobile devices.

Proposed Solution:

  • Add custom CSS to the theme’s stylesheet
  • Target product grid items with a max-width property
  • Apply changes specifically for mobile screens (max-width: 767px)

Technical Details:
The suggested CSS code targets .product-row .product-grid--item elements and sets max-width: 150px within a media query for smaller screens.

Status: The discussion appears resolved with a specific CSS solution provided, though implementation confirmation is pending.

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

I want To Reduce Size Of Product On Home Page

My URL driptrove.com

IMG_20240409_185741.jpg
IMG_20240409_185741.jpg1080×1956 135 KB

Want Like This :fast_down_button:

IMG_20240409_185727.jpg
IMG_20240409_185727.jpg1080×1546 104 KB

2

Add This Css in Your theme.css File

@media screen and (max-width:767px){
    .product-row .productgrid--item {
        max-width: 150px;
    }
}