Hello!
I would like assistance with removing the space here below the ruby. The footer is disabled and there is too much white space.
Thank you!
Topic summary
Issue: Large white space appears below the hero/ruby section on mobile, even with the footer disabled. The merchant wants to remove this gap.
Context: A moderator requested the store URL, which was provided. Screenshots were shared to illustrate the gap.
Findings: On mobile, the hero image is too short, leaving empty space because there’s no additional content below to fill the screen. Making the image larger can crop/overflow; compressing it can stretch and distort proportions.
Proposed solutions:
- Seek the merchant’s preference: accept whitespace, crop, or stretch (each with trade-offs).
- Technical fix suggested: add CSS for mobile to set the hero media height to the viewport height minus a fixed offset:
@media (max-width: 749px) { .banner__media { height: calc(100vh - 57px); } }
(100vh = 100% of the viewport height.)
Status: No confirmation yet that the CSS fix was applied or resolved the issue. Awaiting the merchant’s preference/feedback.
right5785*
Hi @ErhatRO
Upon checking, I see that on mobile, the height appears as it is, and since the image is small, there is empty space below. There is no other content below to push up, so it remains empty.
However, if the image is too large, it expands horizontally, overflowing the borders and getting cropped. On the other hand, if you try to compress it to make it longer, the image stretches and loses its original proportions.
Please consider my suggestion and let me know about your preference so I can help you adjust it
Best,
Daisy
Thank you!
