How can I make a full height hero image on mobile?

Store Design
1

Currently I’m using a landscape image for my hero section in a “Image with text overlay” widget, while this fills out the desktop view nicely (full height and width) it does not scale properly on mobile. The image only scales to fill the width on mobile while I would like it to scale to the full height of the mobile viewport by zooming, rather than being confined by width. Is there a way to force image height by stretching/zooming on mobile ? My URL is www.halfspaced.com

Thank you,

HeroStretch.jpg
HeroStretch.jpg1069×1580 121 KB

2

@Halfspaced ,

.homepage-sections-wrapper.homepage-sections-wrapper--white {
    padding: 0;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme-index.min.scss.liquid

3

Thanks for your help @oscprofessional but unfortunately that doesn’t seem to work, that code removes the padding from all homepage sections, it doesn’t do anything to scale the image to full height…

4

@Halfspaced ,

Hi,

Your issue is solved or not? yet