Background full screen on Iphone

[OCEANL]

Hello! How can I make the background image full screen on mobile? Currently, it appears in landscape mode and looks strange on iPhone. I'm using spotlight theme.

 

[BSSCommerce-B2B · Accepted solution]

Hi @OCEANL ,
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file base.css, theme.css, styles.css, custom.css or theme.scss.liquid

Step 3: Insert the below code at the bottom of the file -> Save

@media screen and (max-width: 749px) {
div#Banner-template--21547080384855__image_banner_pw7tGw {
    height: 100vh;
}
}

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 

[BSSCommerce-B2B]

Hi
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

[OCEANL]

Hello,

The URL is https://oceanlhane.com/password

Password: peempe

[OCEANL]

Hello @BSSCommerce-B2B - any update?

[BSSCommerce-B2B · Accepted solution]

Hi @OCEANL ,
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file base.css, theme.css, styles.css, custom.css or theme.scss.liquid

Step 3: Insert the below code at the bottom of the file -> Save

@media screen and (max-width: 749px) {
div#Banner-template--21547080384855__image_banner_pw7tGw {
    height: 100vh;
}
}

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 

[BSSCommerce-B2B · Accepted solution]

hi @OCEANL 

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file section-image-banner.css. Search for the following CSS snippet

@media screen and (max-width: 749px) {
    .banner--medium:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
        min-height: 34rem;
    }
}

Please change to it

@media screen and (max-width: 749px) {
    .banner--medium:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
        min-height: 100vh;
    }
}

Result

I apologize for missing the notification.

If it helps you, please like and mark it as the solution.

[PageFly-Noah]

This is Noah from PageFly - Shopify Page Builder App

Hi @OCEANL  I can help you. Please can you provide the website url (and password if have). Thank you.

Best regards,

Noah | PageFly

[OCEANL]

Hello,

The URL is https://oceanlhane.com/password

Password: peempe

[OCEANL]

Hello @PageFly-Noah - any update?