Yes! I would prefer a tiny bit more of padding at the bottom but that is much better thank you - how do i do this?
Topic summary
A Shopify store owner reported content overlapping issues on mobile devices for full-width banner sections, specifically on two product pages (Bitesoft and Designer Aligners). The desktop version displayed correctly.
Problem: Text and images were overlapping the footer on mobile view, as shown in provided screenshots.
Solution provided: Custom CSS code targeting mobile screens (max-width: 480px) was added to the base.css file to adjust padding for the banner content sections:
- Initial fix addressed padding-inline and padding-block values
- Additional adjustment reduced margin-block for paragraph elements to accommodate varying text lengths
Outcome: The solution successfully resolved the overlap issue on one page. The second page (Bitesoft) showed slight differences due to longer text content, but the user accepted the improvement as significantly better than the original state. Issue marked as resolved.