Responsive four card feature grid areas and media queries
Design comparison
Solution retrospective
I liked using grid areas, i didn't know they existed, they are marvellous, it was really fun what they can do, and you don't have to think a lot, just how you want your page to be structured and that's all, if i did it wrong or there's a better way using it please comment it! . Also i started doing mobile first, and i can tell you it's more easy doing it that way, i always read that you should do mobile first but it's the first time i did it this way, and it was really easy to complete this challenge, i changed really little things so i can assure it looks good in a big screen
What challenges did you encounter, and how did you overcome them?The how to make the layout, i never used grid or if i used it was for really little things, just for making columns, this is the first time i really induced my mind in trying to comprehend grid
Community feedback
- @MrLanterPosted about 1 month ago
Hi, I hope you are doing well. The project you made is very well done!
- The design is well done, just for the grid you must have made a mistake because you swapped the "karm" and "calculator" cards.
- You could instead download the "Poppins" font from google fonts, then insert it into the project assets and finally import it from the css with
font-face. It is quite long to do but it is a good practice because it can improve performance. - I recommend you to use SCSS, a really useful preprocessor. With it, you can put your CSS files in an organized tree and you will have additional code options. (You can also use stylus, less or many others )
- I saw that I used a media query to change the text size on smaller screens but if you are interested there is a way to gradually reduce the text size in one line of code:
font-size: clamp(1.1rem, 1.3rem + 1vw, 1.9rem);
I hope this can help you, have a nice day!
1
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord