Responsiveness problems (elements overflowing/resizing problems)

https://share.vidyard.com/watch/Z4WJBMga2pkAK4xHK4otVm? Ok, so I'm a responsive noob, I have some media queries to fix some things, but as you can see in the video, I have problems with the top right text, the footer that doesn't stick to the bottom and the images that I have no idea how to make them responsive... Do people usally add media queries to fix when the screen becomes so small that the text doesn't go where you want or are there ways to make it so that dynamically it goes where you want ?? I could easily fix by adding media queries every 100px to fix new issues but I feel like it isn't at all good practice and I don't know how to do otherwise here's my current code, it's a bit of a mess sorry, I'm having a hard time with responsiveness and good css practices. I would highly appreciate if someone helps because the majority of my css problems are similar. I'm available if you have more questions. https://codepen.io/Antony-Collin/pen/WNYejKZ
Vidyard
Vidyard Recording
Vidyard video
1 Reply
Mannix
Mannix16mo ago
remove the width:30% from the .game selector and on body you can use
display: grid;
grid-template-rows: auto 1fr auto;
display: grid;
grid-template-rows: auto 1fr auto;
to get footer stick to the bottom
Want results from more Discord servers?
Add your server