Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more
Hi,
I'm trying to fit the banner image to the entire mobile screen. But it's not happening. I've tried all kind of codes that were shared for similar problems, but nothing seems to work.
The banner image is taking only half of the screen on mobile, and the rest is taken by other sections.
I wanted the banner image to fill the screen entirely on any mobile device, so that only the banner image is visible when a customer lands on the mobile version of the website.
@kaiyaa Thanks for the reply. But I've tried using different images for Desktop & Mobile. But the second image still is not covering the entire screen. It's still covering nearly 60% of the screen only.
You can always add
.banner { height: 100vh; }
to the section "Custom CSS" settings but be prepared that your image will be cropped depending on the browser width/height.