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

Solved
jjjjohnjjj
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

Hello 

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes
jjjjohnjjj
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

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.

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
jjjjohnjjj
Tourist
3 1 0

This is an accepted solution.

Brilliant. Works like magic. Thanks so much!

0 Likes
HazelChicago
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
SoundsGood
Excursionist
38 0 9

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

@oscprofessional  - your solution (above) works for me on Desktop view, but not on the Mobile view. Is there anything that can be added to the code to adjust the Mobile view?

 

Thank you!

0 Likes