Remove border outline on section

Store Design

Topic summary

A user encountered unwanted light gray border outlines on image and text sections in their Shopify store and sought removal guidance.

Solution Provided:
Multiple experts offered nearly identical solutions:

  • Navigate to Online Store → Themes → Edit Code
  • Locate the theme.liquid file
  • Insert custom CSS code above the </head> tag to remove borders

CSS Approaches:

  • Mobile-only fix: Target .product-media-container with border: 0 using media query @media only screen and (max-width: 749px)
  • Universal fix: Apply border removal without media queries for both desktop and mobile
  • Alternative: Add code in main.css (or base.css/style.css) at the bottom

Key Steps:

  1. Access theme code editor
  2. Find theme.liquid
  3. Paste provided CSS snippet before closing </head> tag
  4. Save changes

All respondents included screenshots demonstrating the before/after results and requested the user mark helpful responses as solutions.

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

My image + text sections have a light gray outline border. How do I remove this?

Here is the store link: https://nattlig.no/products/nattligputen

Here is a screenshot:

Nattlig_0-1725971385286.png
Nattlig_0-1725971385286.png465×708 139 KB

3 Likes
2
  • Here is the solution for you @Nattlig
  • Please follow these steps:

z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg
z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg1865×854 94.6 KB

  • Then find the theme.liquid file.
  • Then add the following code at the before tag and press ‘Save’ to save it.
  • Here is the result you will achieve:

BSSTekLabs_0-1725971628822.png
BSSTekLabs_0-1725971628822.png377×819 145 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
3

Hey @Nattlig

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1725971940711.png
Moeed_0-1725971940711.png384×679 109 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

4

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

BSSCommerceB2B_0-1725973548128.png
BSSCommerceB2B_0-1725973548128.png400×189 26.6 KB

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Result:

BSSCommerceB2B_1-1725973616262.png
BSSCommerceB2B_1-1725973616262.png1191×912 189 KB

5

Hi @Nattlig

is this for mobile only? For the mobile:

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

@media only screen and (max-width: 749px){
.product-media-container.media-type-image.media-fit-cover.global-media-settings {
    border: 0;
}
}

And Save.

For both mobile and dekstop:

Same Instruction.

.product-media-container.media-type-image.media-fit-cover.global-media-settings {
    border: 0;
}

And save.

result:

Made4uoRibe_0-1725985667249.png
Made4uoRibe_0-1725985667249.png394×455 138 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

6

Hi @Nattlig

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

Hope this can help you solve the issue

Best regards,

Richard | PageFly