Hello. How to remove the border

Store Design

Topic summary

A user seeks help removing borders from product images on their Shopify store to match a desired appearance shown in reference screenshots.

Initial Solution Provided:

  • Add CSS code to base.css, style.css, or theme.css in the Assets folder
  • Code targets .product-media-container.constrain-height.fit-contain-media with width: 100% property

Follow-up Issue:
After implementing the first solution, an upper border remains visible on mobile screens (shown in second screenshot).

Additional Fix:
A mobile-specific CSS solution was provided:

  • Uses media query for screens max-width 749px
  • Targets .section-template--23175415890247__main-padding with padding-top: 0

Status: The discussion appears ongoing, awaiting confirmation if the mobile border fix resolves the remaining issue. Both solutions involve adding CSS code snippets to the theme files through Shopify’s admin dashboard.

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

Hello. How to remove the border so that it looks like the first photo

IMG_8776.jpeg
IMG_8776.jpeg1170Ă—1829 140 KB

579B2314-7CB2-48FE-8C58-B3127CDDDD66.jpeg
579B2314-7CB2-48FE-8C58-B3127CDDDD66.jpeg1170Ă—1667 90.4 KB

1 Like
2

Hi @Alex31

Pease, share store URL. Thanks!

3

https://devari.store/products/conrad-watch-copy

4

Thankks for the info, check this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. 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:
.product-media-container.constrain-height.media-fit-contain {
    width: 100% !important;
}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

1 Like
5

IMG_8781.jpeg
IMG_8781.jpeg1169Ă—2225 110 KB

Thank you very much for your help. You can somehow remove the upper border?

6

This is only for the mobile screen right? Please, add this code where you paste it. Thanks.

@media only screen and (max-width: 749px){
.section-template--23175415890247__main-padding {
    padding-top: 0;
}
}

And Save.

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!