How do I reduce the gap within "image and text" element on mobile display? (Debut theme)

Solved
Highlighted
Tourist
3 1 0

I have an "image and text" element on my home page (using debut theme). It looks great on desktop when the image and text are side by side, but on mobile the image is shown above the text. This is great, but the problem is there is a big margin between the bottom of the image and the beginning of the text - is there any way I can reduce this gap? I've been googling for hours but I can't find this exact issue anywhere.

0 Likes
Highlighted

Hello 

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Tourist
3 1 0

Hi Pallavi,

 

Correct, I need to reduce the gap you've highlighed (between the bottom of the image and the top of the text), it just looks far too much on a mobile display.

 

Thanks.

 

John

0 Likes
Highlighted

This is an accepted solution.

Hello 

Please add below css to theme.scss.liquid

#shopify-section-feature-row .feature-row__text {
    padding-top: 5px !important;
}

You can adjust the space by just changing the numbers according to your requirement.

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
1 Like
Highlighted
Tourist
3 1 0

This is an accepted solution.

Brilliant. Works like magic. Thanks so much!

0 Likes
Highlighted
New Member
1 0 0

Hi oscprofessional,

 

I used your solution, but it only partially worked. I have 3 image with text sections in a row on my home page and your solution is working on the bottom one, but it doesn't seem like it's working for the other two.

 

If it makes a difference, the home page is a large banner image, rich text file, 3 image with text in a row, and then the instafeed app.

 

Thanks so much for any help you can provide.

0 Likes