@JoannaLapa
Posted
Hi LAURYNE’S,
congratulations on completing the project! This is the best way to make the progress.
Concerning your question - I suggest you to correct the mobile layout. Try to use Mobile First approach which is a good practice. Your solution with @media screen and (max-width: 375px) cause that all screens over 375 px (so even 376px) have desktop layout and everything is very very small. My suggestion is to prepare at first styles for mobile layout and after change the layout for bigger sizes with eg. @media screen and (max-width: 560px) etc. If you're not familiar with Mobile First approach you can read more about here.
Other suggestions to improve your code:
-
You don't need to repeat yourself with background-color, color and other design styles which are the same for all sizes - you can delete them from @media, because you styled them already in general code.
-
To divide your articles (.one, .two, .three, .four) you can use gap on parent (.wrapper in your project) instead of margin (much less code). Gap works for grid and flex - you can read more here on mdn
-
Instead of code: grid-column-start: 2; grid-column-end: 4; grid-row-start: 2; grid-row-end: 3; you can simply write a shorthand: grid-area: 2 / 2 / 3 / 4 more about grid-area here
-
I feel that making position fixed on body and position absolute on global-content is not necessary.
-
I can recommend you a video from Kevin Povel where he made exactly this project explaining by the way many grid cases, I think that it can be useful for you. And by the way I recommend you Kevin Powel's youtube canal, there is a lot of useful css tricks. Here is the video with this project.
I hope that my comment was helpful! Happy coding ;) Joanna
Marked as helpful
@lauryne921
Posted
@JoannaLapa Hi Joanna ! Thanks a lot for your comment ! I'll try to start by mobile first next time, that's true I wrote again the background-color and color so I will delete that and thank you I didn't know about grid-area ! And I'll check the youtube channel I think it can be very useful so thank you for your comment ! Have a good day !