Background gradient cut off on mobile devices

[agustrodmar]

Hello,

I’m encountering an issue with the responsive design of the template. The radial background gradient works perfectly fine on desktop screens, but when testing on mobile devices, the gradient gets cut off and doesn’t cover the entire background as expected. I’ve tested this both on physical mobile devices and emulators, and the problem persists.

I’m using the template as provided, with minimal changes made.
The issue occurs in both light and dark modes.
The gradient is defined in the Layout.astro file as follows:

What I’ve tried:

Increasing the size of the gradient for mobile screens using media queries, such as:

@media (max-width: 640px) { .mobile-bg { background: radial-gradient(ellipse 150% 150% at 50% 50%, rgba(217, 216, 255, 0.5), rgba(255, 255, 255, 0.9)); } }

Using min-height: 100vh on the container to ensure it covers the entire height of the viewport.

Despite these attempts, the gradient still gets cut off in mobile view.

Screenshots:

Here is how it looks on mobile:

Device: Tested on various mobile devices once published and now trying minor changes on local with a Pixel 3a emulator.

Thank you!

[agustrodmar]

FIXED(?):
The main problem was the size of the badge, due to the length of the text. However it's good if someone find how to make the badge that long and still make it work in a responsive way.

[josergz]

Hi @agustrodmar ,

I came across this issue and have worked on a solution. I've submitted a PR (#84) that fixes the problem of the background gradient being cut off on mobile devices.

The solution involves changing whitespace-nowrap to whitespace-normal in the Badge.astro component, which allows the text to wrap automatically and prevents the design from breaking on mobile.

You can check out the PR here: PR #84

I hope this helps! If you have any feedback or suggestions, feel free to let me know.