How to remove this space?

Topic summary

A Shopify store owner encountered unwanted spacing around images in their “Image and text” section, which was interfering with border styling.

Issue identified:

  • Extra space appeared on the sides and bottom of images
  • The spacing was disrupting the visual design

Proposed solution:
A support team member (DaisyVo from Avada) provided CSS code to adjust image positioning:

  • Navigate to Shopify admin > Online store > Theme > Customize
  • Add custom CSS targeting .image-with-text__media > img with top: 2.5% !important

Resolution:
The original poster resolved the issue independently before implementing the suggested fix. They discovered the root cause was previously edited code affecting height and width of all media content globally, which was also impacting these images. The problem is now fixed.

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

I’ve been looking in the code but I can’t seem to figure out the problem, but for some reason the image in the “Image and text” section just has extra space at the sides and bottom and idk how to remove it. I’d like to remove it cause its messing with my border because the space on the top is smaller then the bottom.

Any advice would be greatly appreciated!

Web link is: https://dododuck.ca/products/dodo-duck

Hi @TheDuckDuck

I hope you are well.

Step 1: You can go to your Shopify admin > Online store > Theme > Customize

Step 2: Copy the code below here:

.image-with-text__media > img {
    top: 2.5% !important;
}

Step 3: Add the code to Custom CSS field from the theme here: (https://prnt.sc/xUkRHs4_gFyI) and save the change.

I hope it can help. Thank you!

Best,

Daisy - Avada Support Team.

1 Like

Nvm, I found what the problem was, I edited a code elsewhere that effects the height and width of all media content, so it was also effecting those images too. I fixed the problem now but regardless I still really appreciate the help :slightly_smiling_face: