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

SarahTinySteps
Excursionist
34 0 6

Gap.JPG

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

Replies 9 (9)

SpyProtect
Shopify Partner
10 1 2

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.

Founder and Lead Developer of Spy Protect
SarahTinySteps
Excursionist
34 0 6

Thanks. Do you know how would I do that? 

 

Best

 

SpyProtect
Shopify Partner
10 1 2

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.

Founder and Lead Developer of Spy Protect
SarahTinySteps
Excursionist
34 0 6

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
Shopify Partner
10 1 2

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.

Founder and Lead Developer of Spy Protect

Beae_Anthony
Shopify Partner
436 167 175

Hi @SarahTinySteps ,

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

Beae - The NextGen Page Builder


- Was my answer helpful? Please hit Like or Mark it as solution!
- Get in touch with us: App Store | Blog
SarahTinySteps
Excursionist
34 0 6

Sure and thanks. 

 

You can see the block on any product page 

 

www.tinystepskids.co.uk

 

Best

S

Beae_Anthony
Shopify Partner
436 167 175

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>

Beae_Anthony_0-1695490083354.png

Best regards,

Anthony

 

Beae - The NextGen Page Builder


- Was my answer helpful? Please hit Like or Mark it as solution!
- Get in touch with us: App Store | Blog
SarahTinySteps
Excursionist
34 0 6

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