PC Product and Featured Products images Too Big

Shopify Discussion
, ,

Topic summary

A Shopify store owner wants to reduce the size of featured product and main product images on desktop only, without affecting mobile display. Screenshots show oversized product images on the site.

Initial Solution Attempts:

  • The_ScriptFlow provided CSS code adding 40px padding to product images
  • This partially worked but created an unwanted grey background
  • Additional code was provided to remove the background and adjust main product media

Mobile Display Issue:

  • The desktop fixes caused product images to appear with excessive padding on mobile
  • A media query was suggested to apply different padding (40px 20px) on screens under 767px width
  • The user reported this solution didn’t resolve the mobile display problem

Current Status:

  • The discussion remains unresolved as the mobile layout issue persists
  • The_ScriptFlow is working on an updated solution
  • Growthunitdigital offered an alternative approach using max-width constraints within a desktop-only media query (min-width: 769px), suggesting 400px as a starting point that can be adjusted
Summarized with AI on October 26. AI used: claude-sonnet-4-5-20250929.
1

Hello my website is thedrakeplushie . com
Is there a way to make my featured product and my main product image smaller because right now they are too big. I just want to change the size on PC not on mobile.
Thank you

Screen Shot 2025-07-25 at 1.16.07 PM
Screen Shot 2025-07-25 at 1.16.07 PM928×1288 81.3 KB

2

Please paste this code in the end of base.css file.

.media.media--transparent.media--hover-effect img {
  padding: 40px;
}
3

Hello it dosen’t seem to work.

4

Actually it does work but there is this grey background on it and the main product photo didnt change

Screen Shot 2025-07-25 at 1.56.53 PM
Screen Shot 2025-07-25 at 1.56.53 PM1002×1102 70 KB

5

Screen Shot 2025-07-25 at 1.57.17 PM
Screen Shot 2025-07-25 at 1.57.17 PM1920×997 61.6 KB

I want this to be smaller too

6

In order to change the background & make the product media image smaller you need to paste this coding.

.card--card, .card--standard .card__inner {
 background: transparent !important;
}
.product__media.media.media--transparent img{
padding: 40px !important;
}
1 Like
7

Hello when I open the website on mobile the product photos look like this after adding your code

Screen Shot 2025-07-25 at 5.41.03 PM
Screen Shot 2025-07-25 at 5.41.03 PM596×904 104 KB

8

To fix this issue please paste the following code in the end of base.css file.

@media only screen and (max-width: 767px) {
.product__media.media.media--transparent img {
  padding: 40px 20px !important;
}
}
9

Hello when I add this code it sitll looks the same

Screen Shot 2025-07-26 at 9.50.33 AM
Screen Shot 2025-07-26 at 9.50.33 AM634×868 130 KB

10

Could you please let me know how it suppose to show? Or could you please share the screenshot of how it was before.
Thanks

11

Screen Shot 2025-07-26 at 9.54.55 AM
Screen Shot 2025-07-26 at 9.54.55 AM642×1078 38.1 KB

12

Wait let me gave you solution code.

1 Like
13

Hi @thedrakeplushie :waving_hand:

Yes, you can definitely adjust the size of your featured product or main product image only on desktop by targeting it with CSS media queries.

Here’s a quick fix you can try:

:white_check_mark: How to reduce product image size on desktop:

  1. Go to Online Store > Themes > Customize
  2. Click the three dots (⋮) in the top-left → choose Edit code
  3. Open your base.css or theme.css file (depends on your theme)
  4. Add this code at the bottom:

css

CopyEdit

@media screen and (min-width: 769px) {
  .product__media,
  .product__media img,
  .featured-product .media,
  .featured-product .media img {
    max-width: 400px !important;
    height: auto !important;
    margin: 0 auto;
  }
}

You can tweak the max-width: 400px to something smaller or larger based on what looks best.

This will shrink your main and featured product images on desktop only, leaving mobile untouched.

If you’d like me to take a closer look and fine-tune the layout or spacing, feel free to reach out, I can assist further or send a short video walkthrough.