FCC Technical Document Spanish Javascript - Feedback Request!

Hi guys!
How are you? Just finished the 4th FCC challenge. Here it is:
https://codepen.io/aiden22/pen/QWGYRJQ
I would appreciate any kind of feedback :smiley:
By the way, this is my first time using grid, usually I use Flexbox. I have a doubt about the responsiveness of it: as you can see, I inserted a media query at 1043 px of width. But the class #main-doc don’t re-scale very well. It stops at 1092px and then create overflow at the X axis. Why does this happen? Does it have to do with the grid and the fr dimensions?
It can be corrected with some min-width (so it re-scales better) and hidding the overflow (It’s in the pen as a commentary, btw). But I want to know what you guys think about it!
Thank you in advance!

1 Like

Why would you use html {overflow: scroll;}. That’s causing the horizontal scrollbar. You should contain the content in main to keep paragraphs from becoming a single line.
The default browser behavior is for an element to grow so that the content fits. Not sure why you need to put a width on the table. A max-width on the main content for readability would limit the table as well.
I think that when one is learning media queries a single query at 500px is good for educational purposes (not for production). Then a max-width on the main content of about 700px will give you a good idea of responsiveness. Keep it simple while your learning.
When you switch to mobile it should be a single column so the aside could look like a top-bar (or at least a row under an existing top-bar) with only a hamburger icon. Change the grid to do it.

Thanks for the feedback @tlc35us ! I already deleted the overflow thing. Going to change the things that you commented these days, thanks!