How to delete extra spacing between Text and Image/Icon

Store Design
, , ,

Topic summary

A user is experiencing inconsistent spacing between text and icons/images on their Shopify store pages. The issue appears in the page editor as no extra lines, but renders with unwanted gaps on the live site.

Initial Solution Attempted:

  • A CSS fix was provided targeting .rte.scroll-trigger.animate--slide-in p with margin: 0 !important; in the base.css file
  • This successfully removed spacing after icons but created a new problem: eliminated all spacing after titles site-wide
  • Adding manual line breaks in the editor creates excessive spacing

Current Status:

  • The spacing behavior is inconsistent across different pages—some titles have spacing, others don’t
  • User needs a more targeted solution that only affects spacing after icons/images, not all paragraph elements
  • A responder indicated this requires custom code to assign specific classes to images and target them individually via CSS
  • The issue remains unresolved, with the user requesting additional help to implement the more precise solution
Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

Hi lovely community,

is it possible to delete the extra spacing between the text and the icon here:

Here is the page:

https://www.chevaldore.com/pages/how-to-win-the-war-on-drugs

ChevalDor_0-1748026001974.png
ChevalDor_0-1748026001974.png464×728 32.2 KB

Kinda like here:

ChevalDor_2-1748026061890.png
ChevalDor_2-1748026061890.png472×164 7.99 KB

In the editor it is not possible, aparently there is no extra line:

ChevalDor_1-1748026041371.png
ChevalDor_1-1748026041371.png583×171 2.4 KB

Please HELP :smiley:

Have a lovely weekend.

God bless ya

Kind regards

Juls :smiley:

2

Hey Juls,

Yes this is possible to remove the extra space between the icon and text.

Paste this code in the end of base.css file.

.rte.scroll-trigger.animate--slide-in p {
    margin: 0 !important;
}

Here is how you can find the base.css file.

Go to Shopify Admin > Online Store > Edit Code > base.css

Lovely weekend.

Cheers :slightly_smiling_face:

3

Hi Flow,

thanks for the quick reply.

I tried it and it worked for the pictures. BUT now all the space after the title is gone. And if i add an extra line with the editor the spacing is to big.

Picture attached:

Is there a way to just cut the spacing after the icons? On this pages:

https://www.chevaldore.com/pages/how-to-end-the-war-on-drugs

https://www.chevaldore.com/pages/partners-purpose-of-donation

ChevalDor_0-1748031996999.png
ChevalDor_0-1748031996999.png1351×719 80.3 KB

4

This is possible and this need to do code in your theme file to assign a class to the picture only and target it via css.

5

Ok can you help me out with it?

Its a bit strange, sometimes there is a spacing after the title, and sometimes there isnt…

ChevalDor_0-1748033076894.png
ChevalDor_0-1748033076894.png651×537 45.9 KB

ChevalDor_1-1748033099404.png
ChevalDor_1-1748033099404.png668×645 43 KB

I mean Im fine with one or the other. But mixed up looks a bit strange :smiley:

Here it looks sweet because it is all the same:

https://www.chevaldore.com/pages/partners-purpose-of-donation

ChevalDor_2-1748033198116.png
ChevalDor_2-1748033198116.png421×578 27.1 KB