Single price grid component - CSS Grid and custom properties

Hello @dkaffes!

Your solution looks great!

About your question:

- Please enlighten me! The Sign-up <a> element breaks to a two-line text at 360px. And as the width becomes smaller the whole button breaks because of its padding settings.

📌 First: You can decrease the padding on the X axis a little bit. 5.5rem is a lot of padding 😅

📌 Second: Add white-space: nowrap: to it. It'll prevent from breaking the row.

I hope it helps!

🛸

Hi dkaffes Nice work on your challenge. So first of; writing good queries is a hard part of front-end development in general as we have to deal with so many devices and screen sizes these days. And there aren't any "set rules" on minimums or maximums, it's mostly up to the UI design(er). But we could say most phones will deal with 300px width and upwards. Some very recent exceptions are the Samsung Fold models for example.

For your button in this case you could switch the width to auto or percentages and let it scale by the witdh of the parent and maybe loose some padding below a certain point.

Some tips in general for really small screen sizes:

• scale down font sizes
• break off texts if needed
• make paddings or margins as small as possible
• scale down gaps or line-heights
• scaling by percentages of parent

Alternatively there is always the option to not show anything at all below a certain point. I see a lot of apps doing this recently where below the range of 300px the body just shows a message like: 'please view on a bigger device' for example.

Hope this helps :)