I need help with my Grid CSS media queries please

Hey guys, so I want my page to be responsive and all in one column. How can I achieve this with Css Grid Media Queries? Please help!
My Technical Documentation project

Have you looked at the documentation for media responsive queries?

Before you even think about adding media queries, make sure the style of your page is put together properly on your desktop’s screen.

I put the code editors on the side and your page doesn’t seem to be very responsive on the one I use:

I would strongly suggest you use the same codepen editor layout as I do so you can adjust the width of your site. Once you get it responsive on there, try and work at your project at the screen scale of a phone.

So a media query that accepts that kind of width would be one like the one below:

@media (max-width:300px){
/* add your css stuff in here to adjust your page */

Try changing the view to the one I use and test out how my pen works:

If you look in the css editor, you will see a media query in there (on line 98 to be precise).
It changes the font-size of my <p> elements when the width of the site is less than or equal to 300px.

Hope that helps.
Nice job on your work, by the way.

And one suggestion for the future:
Build your default HTML and CSS for a small viewport and add the media queries for increasing viewports, that makes the task easier.