Solved

Make Home Page Image Banner Full Screen Height On Mobile Devices

aryakatpally
Visitor
3 0 0

Hi, i would like my home screen image banner in mobile to be of full height. How can i do this please let me know.

Thank you so much. Attaching the current and desired images belowWhatsApp Image 2023-11-17 at 5.38.37 PM.jpegWhatsApp Image 2023-11-17 at 5.38.08 PM.jpeg

Accepted Solution (1)

Abdosamer
Shopify Partner
821 146 163

This is an accepted solution.

Hi @aryakatpally , Go to section-image-banner.css and add the following code :

@media (max-width:749px){
    .banner--large.banner--mobile-bottom:not(.banner--adapt) .banner__media, .banner--large.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt)>.banner__media {
    height: 100vh !important;
}
}
Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Work samples

View solution in original post

Replies 3 (3)

Abdosamer
Shopify Partner
821 146 163

This is an accepted solution.

Hi @aryakatpally , Go to section-image-banner.css and add the following code :

@media (max-width:749px){
    .banner--large.banner--mobile-bottom:not(.banner--adapt) .banner__media, .banner--large.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt)>.banner__media {
    height: 100vh !important;
}
}
Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Work samples
aryakatpally
Visitor
3 0 0

Thank you so much, it worked! I changed the 100vh to 70vh and it's perfect. 

Thank you again! Really grateful

Abdosamer
Shopify Partner
821 146 163

Glad it helped, fell free to contact me if you run into any problems in the future.

Buy me a Coffee
Email : abdelrahamansamer71@gmail.com
Chat on WhatsApp
Work samples