Background full screen on Iphone

Shopify Discussion

Topic summary

Main issue: On the Spotlight theme, the hero/background image displays in landscape on iPhone and doesn’t fill the mobile screen. The requester asked how to make it full screen and shared a password-protected preview link.

Key updates:

  • Helpers requested the store URL and password; the requester provided them.
  • Proposed fix 1 (CSS): In base.css/theme.css/styles.css/custom.css/theme.scss.liquid, add a mobile media query setting the specific banner container’s height to 100vh.
    • Code: @media (max-width: 749px) { div#Banner-template–… { height: 100vh; } }
    • 100vh sets the element height to the full viewport height on mobile.
  • Proposed fix 2 (CSS): In section-image-banner.css, change the mobile rule for .banner–medium … .banner__content from min-height: 34rem to min-height: 100vh.

Artifacts: Before/after screenshots are provided and are central to understanding the visual result.

Status/outcome:

  • Solutions with step-by-step edits and code were provided, with visual evidence of full-screen results.
  • No confirmation from the requester yet; resolution not explicitly marked as solved and remains open.
Summarized with AI on December 26. AI used: gpt-5.
1

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.

Screenshot 2024-06-19 at 19.43.47.png
Screenshot 2024-06-19 at 19.43.47.png1484×504 508 KB

2

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.

3

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

4

Hello,

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

Password: peempe

5

Hello,

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

Password: peempe

6

Hello @PageFly-Noah - any update?

7

Hello @BSSCommerce-B2B - any update?

8

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:

BSSCommerceB2B_1-1719219544091.png
BSSCommerceB2B_1-1719219544091.png417×839 459 KB

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

9

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

BSSCommerceB2B_0-1719219611938.png
BSSCommerceB2B_0-1719219611938.png625×895 425 KB

I apologize for missing the notification.

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