Hi again, i would like to make my product photos fit in the grey background on my product page.
Im happy for all help you gave me, many thanks in advance. 
My url:
Topic summary
A user seeks help resizing product images to fit within grey backgrounds on their Shopify product pages.
Solution Provided:
- Navigate to Shopify admin → Online Store → Themes → Actions → Edit code
- Locate the CSS file (base.css, style.css, or theme.css) in the Assets folder
- Add CSS code targeting
.media.media--transparent.media--hover-effect imgwith padding adjustments (30px suggested) - Include additional CSS to remove background gradients from card elements
Outcome:
The original issue was successfully resolved. The user confirmed satisfaction with the results.
Follow-up Question:
A new issue emerged regarding unwanted grey coloring appearing in brand boxes on the brands page. The user provided a screenshot and asked how to remove this background color.
The discussion remains open with the secondary question awaiting response.
1 Like
Hi @Dekanten
Check this one.
- From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
- Find the theme that you want to edit and click on “Actions” and then “Edit code”.
- In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.media.media--transparent.media--hover-effect img {
padding: 12px !important;
}
.card__inner.color-accent-2.gradient.ratio {
background: none !important;
}
-
And Save.
-
Result:
-
If you like more space just adjust the padding.
-
This is size 30px.
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
1 Like
Hello and thank u so much, everything is just fine now.
I had to use the component card and everything goes well, happy with the result. Many thanks for all help.
