Why do my images have gray borders on wheelweightsmachine.com?

Store Design
, ,

Topic summary

A Shopify store owner encountered unwanted gray borders appearing around custom Photoshop images across their site (wheelweightsmachine.com). The borders appeared on multiple design elements including the homepage, product pages, and mobile views.

Resolution Process:

  • Initial CSS code targeting .image-with-text__media-item resolved borders on the desktop homepage
  • Additional CSS targeting .product-media-container elements fixed product page borders on desktop
  • Mobile view required separate media query with max-width: 767px (not min-width) to apply the same border removal

Final Outcome:
All CSS solutions were added to the theme’s base.css file. After multiple iterations and code adjustments for different page types and viewports, the issue was fully resolved across desktop and mobile platforms.

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

I created my own images using photoshop and resized all of them. But when i try to add these image into different design elements, They keep leave gray border around them. Examples are below. And my site name is wheelweightsmachine.com

Im looking for the replays, thanks.

2.JPG
2.JPG640×720 40.9 KB

1.JPG
1.JPG1023×442 20 KB

3.JPG
3.JPG1056×710 62.6 KB

2

write this code in your custom css section

.image-with-text .image-with-text__media-item>* {
border: none;

}

3

Hello @MYILDIZ

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

.image-with-text__media.image-with-text__media--adapt.gradient.color-background-1.global-media-settings.media {
    border: none;
}
1 Like
4

Thank you sir, it solved the problem at the main page but at the product page same problem keeps going which is shown at the last photo from my question.

5

Hello @MYILDIZ

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

.product-media-container.media-type-image.media-fit-contain.global-media-settings.gradient.constrain-height {
    border: none;
}
1 Like
6

Things i said solved above for the desktop appearance, for the mobile appearance no problem has solved mentioned at question.

7

It solved, im really appreciated for all your helps. How to apply same things for the mobile page?

8

Hello @MYILDIZ

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

@media screen and (min-width: 767px){
.image-with-text__media.image-with-text__media--adapt.gradient.color-background-1.global-media-settings.media {
    border: none;
}
.product-media-container.media-type-image.media-fit-contain.global-media-settings.gradient.constrain-height {
    border: none;
}
}
9

it didn’t work for me this time

10

Hello @MYILDIZ

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

@media screen and (max-width: 767px){
.image-with-text__media.image-with-text__media--adapt.gradient.color-background-1.global-media-settings.media {
    border: none;
}
.product-media-container.media-type-image.media-fit-contain.global-media-settings.gradient.constrain-height {
    border: none;
}
}
1 Like
11

My problems are done. Thank you for all your supports sir, you really helped me here. Have a good day.

1 Like