Responsive problem on Technical Documentation page

Hi. I’m currently working on project 4: “Technical documentation page”. Here is my code pen link:
https://codepen.io/datpham-123/pen/VwvjWwd

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

Hi,
you can try to change this part of code:

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

    div.main-body{
        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