Media Query Practice (Feedback Please)

Still trying to get media queries down. Made a sort of vintage basketball trading card style project and tried to make it responsive all all devices. Feedback is 110% welcome!

https://codepen.io/CydoEntis/pen/LYRryzx

As I narrow my browser, before it gets to the break point, the card stays the same width, but then as soon as I reach the break point the card actually gets wider and there is gray padding on each side of the card. Did you intend to do this? It’s not a show stopper but it does seem a little weird that the card would get wider at a narrower view point. I think you might be forcing a break point here where none is needed. Just make the width of the card 100% and put a max-width on it (in em units) to prevent it from getting too wide. This way the card will always take up as much width as possible (up to max-width) and will automatically narrow as the view port gets skinnier.

I think the bigger responsive issue here is with changes to text size. If you don’t know how to manually change the text size, using Firefox, go to the Edit->Preferences menu, scroll down to Zoom and enable ‘Zoom Text Only’. Then while holding down the Ctrl key, scroll your middle mouse button to increase the text size. I think you’ll see the issues rather quickly.

I’m not sure I understand how to do that in em units. Aren’t em units relative to the root element? Do I just play around with values till it looks good or is there a ratio I should follow?

Edit: I might have made it a bit better?

Here’s a definition of em:

Yes, you can play around with it until you get the width you want for the card. Most browsers ship with a default font size of 16px and most users don’t change this, so you can generally assume that an em is equivalent to a 16px font size. But the nice thing about em units is that you don’t really need to worry about what the actual font size is because it’s all relative. If you always want the stats at the bottom to be side by side in one row then you would set the width on the card big enough (in ems) so that there will always be enough room for the stats to be aligned in one row. In other words, the width of the card will shrink/grow as the font size increases/decreases. Doing it this way you are letting the content determine what the width should be, not some arbitrary px number you think it should be.

I would recommend you try as much as possible to use em units for widths/heights on any elements that contain text because ultimately the user is in control of what text size they view your page with and your page should be responsive to that.