How can I adjust mobile banner height to fill entire screen?

[saadrafi]

i have written code to make separate images for desktop and mobile

desktop looks fine:

from litcommerce https://community.shopify.com/c/shopify-design/separate-banner-images-on-mobile-and-desktop-dawn-theme/td-p/1362462

from @LitCommerce https://community.shopify.com/c/shopify-design/separate-banner-images-on-mobile-and-desktop-dawn-the...

Now i want mobile one to be longer to fill entire screen for mobile like this:

longer picture for mobilei want the red area to be filled with image banner on mobile

for this i looked at a code from litcommerce

but it didn't help. please help me

please check my website

thoughtbox-pk.myshopify.com

password: shopify123

@LitCommerce

@KetanKumar

[KetanKumar · Accepted solution]

@saadrafi 

can you try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/section-image-banner.css ->paste below code at the bottom of the file.

@media screen and (max-width: 749px) {
.banner--medium.banner--mobile-bottom:not(.banner--adapt) .banner__media, .banner--medium.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt)>.banner__media, .banner--medium:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
    height: 54rem;
}
}

[saadrafi]

Omg thankyou love you

[saadrafi]

@KetanKumar how to lower the container on mobile ?

how to make the container middle-bottom

[KetanKumar]

@saadrafi 

can you just change value above 

[saadrafi]

which value

[KetanKumar]

@saadrafi 

can you please change height: 54rem; to height: you value
as you like 

[saadrafi]

that changes the height of the image banner, not the position of the container

[KetanKumar]

@saadrafi 

yes, please let me know where did you container?

[Mark166]

cef661.myshopify.com

pw:ineuts

Could you help to check, please? The code is not working on my site.

[KetanKumar]

@Mark166 

oh sorry for that issue if possible to share issue images so i will give you proper code

[Mark166]

It should fill the height in mobile view but it wasn't doing so.

I use this code from OP to change the image in mobile view and the code you share to fill the height of the mobile.

@media screen and (max-width: 749px) {
.banner--medium.banner--mobile-bottom:not(.banner--adapt) .banner__media, .banner--medium.banner--stacked:not(.banner--mobile-bottom):not(.banner--adapt)>.banner__media, .banner--medium:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
    height: 54rem;
}
}

I also tried to change the height: 54rem to something other value but it is not working on my site. 

[KetanKumar]

@Mark166 

you have check theme setting for upload different image desktop and mobile 

[Mark166]

I mean I did the same thing as the OP did, the changing image part on mobile and desktop is already working, but your code to change the image banner to fit mobile size didn't work on my website.

I don't understand what you mean:

---

@KetanKumar wrote:

@Mark166 

you have check theme setting for upload different image desktop and mobile 

---

That changing image part is already working. The only issue I have is the image still doesn't fit the mobile height on my website after using your code.

Could you please check my website? I have changed another image to differentiate the mobile and website view. Previously I use the same image but I cropped the first image and set it as the 2nd image. Maybe that is the reason you thought that changing image part is not working.

Before:

After:

[Mark166]

@KetanKumar, could you have a look at my website, please?

[KetanKumar]

@Mark166 

can you please share store url 

[Mark166]

@KetanKumar, I shared the link a few comments before, but here it is:

cef661.myshopify.com

pw:ineuts

Could you help to check, please? The code is not working on my site.