Solved

Desktop and mobile visibility of home page banner

bikewiser
Tourist
8 0 1

Hi,

I have an issue with how banner image shows on desktop and mobile.

It's district theme, rtl

This is desktop:

bikewiser_0-1709450794949.png

 

and this is mobile:

bikewiser_1-1709450879433.png

 

Any chance to make the mobile same as desktop, the full image?

Thanks!

Accepted Solution (1)

ThePrimeWeb
Shopify Partner
1727 479 353

This is an accepted solution.

Hey @bikewiser,

 

Fitting the landscape image to mobile will make it look like this (Screenshow below)

ThePrimeWeb_0-1709464696107.png

 

 

If that is ok for you, just follow these instructions

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

 

<style>
@media only screen and (max-width: 767px) {
    div#shopify-section-template--20549318213927__de0d5c15-c2ed-458d-9df2-60e78ff95f90 .image-banner.px-rail .image-banner__image-contain {
        height: max-content !important;
        position: relative !important;
    }
    
    div#shopify-section-template--20549318213927__de0d5c15-c2ed-458d-9df2-60e78ff95f90 .image-banner.px-rail .image-banner__content {
        position: absolute !important;
    }
    
    div#shopify-section-template--20549318213927__de0d5c15-c2ed-458d-9df2-60e78ff95f90 .image-banner.px-rail .image-banner__image-contain img {
        object-position: center !important;
        object-fit: contain !important;
        height: max-content !important;
    }
    
    [data-section-id="template--20549318213927__de0d5c15-c2ed-458d-9df2-60e78ff95f90"] .image-banner__wrapper {
        min-height: 100% !important;
        position: unset !important;
    }    
}

</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_1-1709464832401.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website

View solution in original post

Replies 2 (2)

suyash1
Shopify Partner
9124 1135 1481

@bikewiser - it is possible bu then image will shrink on mobile

 

I recommend to use 2 separate banner sections, one for desk image and one for mobile. So now you have 2 banners and then using css one of them can be hidden based on device width

To build shopify pages use pagefly You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
Join me for beginner level training session

ThePrimeWeb
Shopify Partner
1727 479 353

This is an accepted solution.

Hey @bikewiser,

 

Fitting the landscape image to mobile will make it look like this (Screenshow below)

ThePrimeWeb_0-1709464696107.png

 

 

If that is ok for you, just follow these instructions

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

 

<style>
@media only screen and (max-width: 767px) {
    div#shopify-section-template--20549318213927__de0d5c15-c2ed-458d-9df2-60e78ff95f90 .image-banner.px-rail .image-banner__image-contain {
        height: max-content !important;
        position: relative !important;
    }
    
    div#shopify-section-template--20549318213927__de0d5c15-c2ed-458d-9df2-60e78ff95f90 .image-banner.px-rail .image-banner__content {
        position: absolute !important;
    }
    
    div#shopify-section-template--20549318213927__de0d5c15-c2ed-458d-9df2-60e78ff95f90 .image-banner.px-rail .image-banner__image-contain img {
        object-position: center !important;
        object-fit: contain !important;
        height: max-content !important;
    }
    
    [data-section-id="template--20549318213927__de0d5c15-c2ed-458d-9df2-60e78ff95f90"] .image-banner__wrapper {
        min-height: 100% !important;
        position: unset !important;
    }    
}

</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_1-1709464832401.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website