Make Home Page Image Banner Full Screen Height On Mobile Devices

Solved
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
313 46 51

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;
}
}
Email : abdelrahamansamer71@gmail.com
Buy me a Coffee
Chat on WhatsApp

View solution in original post

Replies 3 (3)
Abdosamer
Shopify Partner
313 46 51

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;
}
}
Email : abdelrahamansamer71@gmail.com
Buy me a Coffee
Chat on WhatsApp
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
313 46 51

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

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