Responsive problem on Technical Documentation page

Hi. I’m currently working on project 4: “Technical documentation page”. Here is my code pen link:

I got a problem with responsive on mobile view. Somehow it’s work on my desktop view but not on mobile, I already try to “Inspect” to view it on iphone6. Please check my media query code, thanks for reading I’m very appreciate

you can try to change this part of code:

@media screen and (max-width: 750px){

        display: block;

the display block overrides the display grid. I checked in the console and there were some grid props overwritten by the media queries and others which were not. I don’t think it’s a great idea to use grid in mobile screens, as it’s always one column.
But your choice :slight_smile:
Then the snippet code under the Java code section gets crumbled but it seems there are lots of tabs/spaces that you would have to delete.

1 Like

Hi, thanks for your constructive feedback, I’ve tried and it’s worked. Now I will fix my code snippet and try to using flex instead. Your comment helped, now I know not only 1 but 3 problems of my code. Have a nice day!

1 Like