Archived topic
Hero image on mobile - too much padding between image and heading
7 replies · Started by Scott on June 17, 2021
I've read and tried the solutions for responsive images, but am having an issue with the heading text and button that is over the hero on desktop. I got the image to be responsive, but there is A LOT of grey space between the image and the heading/button on mobile. I've tried changing the padding and margins on mobile, but can seem to decrease that space.
site: https://secure-spark.com/tg/
screenshot of desktop: https://share.getcloudapp.com/5zuYBGp0
screenshot from my iPhone: https://share.getcloudapp.com/jkuPLZKe
How can I eliminate that spacing?
Thanks so much,
Michelle
Hi Michelle,
You are using 100% and 20% for padding:
https://www.screencast.com/t/diKIsAFDOG
And that is a lot of padding, perhaps you wanted to use px instead?
I removed all of the padding on the container and heading. There's a little padding on the button, but that is all that is left within Generate Blocks. Is there somewhere else that I should edit this? I don't see any difference on mobile after removing those.
Thanks!
I just checked the site and don't see any differences at all compared to when I saw it last time. It's still showing 100% 20% for padding.
Can you confirm?
Make sure to clear your plugin cache or any server cache if you are using them as well.
Oh, that is on desktop. I changed that to pixels. Mobile doesn't have any padding in the container: https://share.getcloudapp.com/YEuZRyzP
Can you try background size cover instead of contained?
I figured out the issue and a work around. Thanks for your help!
Glad to hear :)
