i have written code to make separate images for desktop and mobile
desktop looks fine:
from @LitCommerce https://community.shopify.com/topic/1362462
Now i want mobile one to be longer to fill entire screen for mobile like this:
for this i looked at a code from litcommerce
but it didn’t help. please help me
please check my website
password: shopify123
[email removed]LitCommerce
can you try this code
@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;
}
}
Omg thankyou love you
@KetanKumar how to lower the container on mobile ?
can you just change value above
which value
can you please change height: 54rem; to height: you value
as you like
that changes the height of the image banner, not the position of the container
yes, please let me know where did you container?
oh sorry for that issue if possible to share issue images so i will give you proper code
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.
you have check theme setting for upload different image desktop and mobile
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:
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:
@KetanKumar , could you have a look at my website, please?
can you please share store url
@KetanKumar , I shared the link a few comments before, but here it is:
pw:ineuts
Could you help to check, please? The code is not working on my site.
