Help needed with responsiveness please!


I’m hoping somebody can take a look at my Technical Documentation page and maybe help me out.

I’m pretty happy with my page apart from it’s responsiveness. I have one media query to change the position of the nav bar from the top to the side of the page which works fine. The main element is set to 100% width (which I understand to mean 100% of its container) but when the screen size goes below about 680px the content stops scaling down. The reason this happens may be obvious to someone else, so I’m hoping one of you might see what I’ve been missing.


To be honest I don’t know exactly what’s causing this. In any case I found two workarounds, see if it helps you:

Option 1: Set grid-template-columns: 100%; in your .container class.

Option 2: Since you use the grid only in the media query, you can set .container to display: block and in the media-query itself you set it to display: grid.

I’ll try those out, thanks for taking a look!