Text Column with Images (Impulse Theme) - Code to reduce gap between Image and text

[SarahTinySteps]

 

Hello there

I am using the Impulse theme and have a Text column with Images on my product page but the gap between the image and text is quite large and looks a bit odd. I can remove the gap by using images that fill the whole space but that looks weird with Icons (the icons look way too big if I do that). 

I wondered if anyone could help with a bit of code for me to use to reduce the gap?

Thanks if you can help!

Best

TSK

[SpyProtect]

Without seeing the code and the specific page I can only guess. But, you could use negative margins in these specific cases but you should rather fix the underlying issue. However, here is a negative margin example that you could put on either the image - margin-bottom: -XYpx - or text - margin-top: XYpx.

[SarahTinySteps]

Thanks. Do you know how would I do that? 

Best

[SpyProtect]

You can add the negative margins under "Custom CSS" in your Theme editor to the images/text elements that you select. Just scroll down in the right-hand side panel until you reach Custom CSS.

[SarahTinySteps]

Thanks so much for taking the time to help but I am not a coder. I've just taken a look in my Theme editor and i think i found the section... but i am not sure what i need to change and where. 

Hopefully someone will drop in who is used to the Impulse Theme. 

[SpyProtect]

Just paste the margin code on one of these elements and you should see the gap change live. It may change other parts of the site as well so you must be careful with what you edit specifically.

If you don't have coding experience, you may want to hire someone for small edits like this. It will probably be a better value for your time as you can focus on selling instead. Loads of freelancers that are just starting out and looking for their first 5-star reviews may be open to helping you basically for free.

[Beae_Cass]

Hi @SarahTinySteps ,

Could you please share your store URL, so that I can help you

[SarahTinySteps]

Sure and thanks. 

You can see the block on any product page 

www.tinystepskids.co.uk

Best

S

[Beae_Cass]

Hi @SarahTinySteps ,

This is Anthony from Beae Landing Page Builder, and I’m happy to assist you today.

While I acknowledge that this issue falls short of the desired outcome, I have an idea that I believe might be of help:

1. Go to Online Store -> Theme -> Edit code
2. Open your theme.liquid file
3. Paste below code before </body>:

<style>
.image-wrap.text-spacing {
    padding-bottom: 70% !important;
}
</style>

Best regards,

Anthony

[SarahTinySteps]

Hi Anthony 

Thanks for taking the time to help. Why does this fall short in your opinion? Just checking before I try it. 

Best

S