Background full screen on Iphone

Solved

Background full screen on Iphone

OCEANL
Tourist
8 0 0

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

Accepted Solutions (2)
BSSCommerce-B2B
Shopify Partner
565 114 137

This is an 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: 

BSSCommerceB2B_1-1719219544091.png

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 

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


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

BSSCommerce-B2B
Shopify Partner
565 114 137

This is an 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

BSSCommerceB2B_0-1719219611938.png

I apologize for missing the notification.

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

 

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


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 8 (8)

BSSCommerce-B2B
Shopify Partner
565 114 137

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.

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


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
OCEANL
Tourist
8 0 0

Hello,

 

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

Password: peempe

OCEANL
Tourist
8 0 0

Hello @BSSCommerce-B2B - any update?

BSSCommerce-B2B
Shopify Partner
565 114 137

This is an 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: 

BSSCommerceB2B_1-1719219544091.png

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 

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


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
BSSCommerce-B2B
Shopify Partner
565 114 137

This is an 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

BSSCommerceB2B_0-1719219611938.png

I apologize for missing the notification.

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

 

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


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

PageFly-Noah
Shopify Partner
1317 233 268

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

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

OCEANL
Tourist
8 0 0

Hello,

 

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

Password: peempe

OCEANL
Tourist
8 0 0

Hello @PageFly-Noah - any update?