How to make this image fit (Desktop, mobile, and tablet)

Store Design
,
1

I was wondering how I would make this Image with Text Overlay fit to the screen for desktop, mobile, and tablet. I used the recommended resolution 1500 x 800px but it cuts off on all devices. There’s an option for the slideshow section show full-screen images which will resize the image to fit the entire screen but text overlay does not have this option.

The top is cut off on the desktop:

Capture.PNG
Capture.PNG1794×695 151 KB

This is on mobile:

Capture.PNG
Capture.PNG564×402 126 KB

This is on a tablet:

Capture.PNG
Capture.PNG924×433 198 KB

Website: gripmags.myshopify.com

Password: password

Please help.

2

Hello @GripMags

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

div#shopify-section-725f412e-d0cc-4baf-a06d-56e7bce4933a .ImageHero__ImageWrapper, 
    div#shopify-section-725f412e-d0cc-4baf-a06d-56e7bce4933a .ImageHero__Image {
        position: relative;
    }
    div#shopify-section-725f412e-d0cc-4baf-a06d-56e7bce4933a .ImageHero{
        min-height: auto !important;
    }
    div#shopify-section-725f412e-d0cc-4baf-a06d-56e7bce4933a .ImageHero__Image{
        background: none !important;
    }
    div#shopify-section-725f412e-d0cc-4baf-a06d-56e7bce4933a .ImageHero__Image picture{
        display: block !important;
    }
}

Output:

WebDeskSolution_0-1676636400771.png
WebDeskSolution_0-1676636400771.png647×388 85.9 KB

If you find our reply helpful, please hit Like and Mark it as a Solution.

An award-winning North American Shopify Development Agency That Delivers Powerful Results, Innovation, and Secure Digital Transformation.

3

Hi @GripMags ,

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/theme.scss->paste below code at the bottom of the file:

.ImageHero--large {
    min-height: auto !important;
    padding-top: 53.4% !important;
}
.ImageHero__ImageWrapper,
.ImageHero__ImageWrapper .ImageHero__Image {
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

PageFlyRichard_0-1676641320725.png
PageFlyRichard_0-1676641320725.png339×439 39.1 KB

I hope it would help you
Best regards,

Richard | PageFly

4

Hello Richard, I am having the same exact issue with my store. My main image with text overlay will not auto-resize for mobile or tablet. I have tried adding your code to my theme file, but that did not work for me. Am I doing something else wrong? My store is 8labscbd.com.

Thank you for the help!

5

Please stop with the fake codes.