How can I reduce the gap between image and text in my theme?

Store Design

Topic summary

A user seeks help reducing excessive white space between an image and text on their product page using the Refresh theme.

Solution Provided:

  • A CSS code snippet targeting mobile devices (max-width: 749px) with a negative margin (-50px) to close the gap
  • Instructions to insert the code in theme.liquid file, just before the closing tag
  • The margin value can be adjusted (more negative = less space) for different mobile screen sizes

Alternative Approach:

  • Use the “Easy Edits” app from Shopify App Store to make the adjustment without touching code
  • The app allows testing edits and deleting without charges after making changes

Note: Part of the response text appears corrupted/reversed, but the core technical solution remains clear.

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

Please Can someone help decrease this gap between image and text

Refresh theme

https://hothugger.com/products/hot-hugger

Screenshot 2022-12-01 at 18.32.55.png
Screenshot 2022-12-01 at 18.32.55.png1254×1372 126 KB

2

Hi!

Here’s a code snippet that’ll work:

{% style %}
@media (max-width: 749px){
  div#ImageWithText--template--16671679185152__14b63092-94f3-4b3d-ae71-e3ae13e9d47e {
      margin-top: -50px;
  }
}

{% endstyle %}

Insert that into your theme.liquid file (online store > themes > click ‘…’ on the theme you want, then ‘edit code’). Insert it at the bottom of the file, right before the ‘’ tag.

You can increase the space by decreasing the ‘margin-top:’ in the code (as in further negative).

Alternatively, you can also use the app Easy Edits to make the edit yourself without touching any code. You can decrease the margin and make edits for each mobile size; Make the edit and delete the app without paying for anything, and keep the edits.

Fair disclaimer, Easy Edits is an app I’ve worked on. If you need any help inserting the code or using the app, just let me know!