Text Overlapping on Narrow Screens

[LordAyo]

🐞 bug report

✍️ Description

When using Responsively App on a narrow screen, such as iPhone SE 2022 dimensions, some text elements overlap with the container, causing the content to be unreadable. This issue impacts the usability of the homepage and reduces readability.

🕵🏼‍♂️ Is this a regression?

No, this does not appear to be a regression. The issue has likely existed across versions.

🔬 Minimal Reproduction

1. Open Responsively App.
2. Navigate to the Homepage.
3. Set the viewport width to match iPhone SE 2022 (375px).
4. Observe the text elements, which overlap with the container and are partially unreadable.

🌍 Your Environment

- Device: Macbook m1 2020
- Browser: Chrome Version 116.0.xxxx
- Responsively App Version: v1.5.0
- Screen Size: 375px (iPhone SE 2022)

### 🔥 Exception or Error or Screenshot 

[LordAyo]

Hi everyone,

I've been further testing the text overlapping issue on narrow screens and noticed that adjusting the height of the container could help resolve this problem. Specifically, I suggest increasing the container height from 350px to 500px (or another value that the team feels is appropriate) to better accommodate the text and prevent overlapping, especially on devices like the iPhone SE 2022.

This should provide more space for the content to render properly without cutting off or overlapping. I'd love to hear your thoughts on this approach or if there are alternative solutions that might work better.

Thank you!

[LordAyo]

i found out that using 400px is way better visually compared to 500px