DAWN THEME - Black box Outline around images in "image with text"

[embroiderysage]

Hello,

Can anyone help me solve this? I cannot figure out how to get rid of the thin black outline box around my images in the “image with text” boxes on the Dawn Theme.

My url is: embroideryandsage.com

Thanks so much for your help!!

[goldi07]

Hello @embroiderysage

Thanks for sharing the screenshots. The thin black outline around the images in the “Image with text” sections of your Dawn Theme is likely caused by a CSS rule applying a border or box-shadow to images.

To remove the black outline, follow these steps:

Step-by-Step Fix via Custom CSS:

1. Go to your Shopify Admin.

2. Navigate to Online Store > Themes.

3. Find Dawn and click Customize.

4. In the theme editor, click the three dots (⋮) in the top-left corner and choose Edit code.

5. Under Assets, open base.css or component-image-with-text.css (whichever is present).

6. Scroll to the bottom and add this custom CSS:

/* Remove black outline from image-with-text images */
.image-with-text__media img {
  border: none !important;
  box-shadow: none !important;
}

If you’re using a .section-template–… class specific to your section, or a unique image container, you can add that as well, but the above selector should work globally for those sections.

After Saving:
. Refresh your storefront.

. Check the “Image with text” sections — the black outlines should be gone.

Thank you

[Mustafa_Ali]

hey @embroiderysage dear follow these steps
Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->before the ----->
before the body ----->
if this code work please do not forget to like and mark it solution

[tim_1]

In this section settings find “Custom CSS” and paste this:

.image-with-text__media {
  --media-border-width: 0;
}

If you want this to apply to all sections of this type, use “Custom CSS” under “Theme settings” (the cog icon in Customizer)

[embroiderysage]

thanks this worked!

for anyone needing to do the same I added the code specifically here:

1. Go to your Shopify Admin.

2. Navigate to Online Store > Themes.

3. Find Dawn and click Customize.

4. In the theme editor, click the three dots (⋮) in the top-left corner and choose Edit code.

5. Under Assets, open base.css or component-image-with-text.css (whichever is present).

6. Scroll to the bottom and add this custom CSS: