Design comparison
Solution retrospective
I'm proud of using the BEM . I learned minmax for grid, but haven't got a closer look at the grid basics... will submit the solution again after get more concepts of the responsive grid
What challenges did you encounter, and how did you overcome them?Learned to use BEM
What specific areas of your project would you like help with?Responsive page using grid.
Any suggestion is appreciated!
Community feedback
- @CreativeLogicPosted 7 months ago
Hi. Good Job. The typography needs a bit of work regarding line-height, font-sizes, and more to make them fit their card containers. The design calls for the card to be about the size of the content. For responsiveness, I tackled this challenge recently using grid-template-areas. This is simpler and more intuitive to use than having to deal with grid line numbers. In your current solution, if you open it up and slowly shrink your browser window, there is a point where the cards are being squished too much before switching to the next media query. The solution is to either adjust the media query so that it switches before it gets squished, or to set a minimum width on the cards in your template-columns using minmax appropriately. You can use your browser dev tools to get the sizes.
You can do something like
@ media (desktop) { 'c-1 c-1 c-2 c-3' 'c-3 c-5 c-5 c-3' }
@ media (tablets) { Here, I did a two column solution) 'c-1 c-1 'c-2 c-4' 'c-3 c-3' 'c-5 c-5' }
And for mobile I did the typical one column solution: @ media (mobile) {
'c-1' 'c-2' 'c-3' 'c-4' 'c-5' }
You can see my solution on my page.
Marked as helpful0@yoyov51234Posted 7 months ago@CreativeLogic
Thanks~ I'm currently training myself on the grid items, will definitely check on your solution and learn from it.
I have a question, so the design file only gives two types of designs, mobile and desktop, for the medium size, how do we know when to divide to a new media?
0@CreativeLogicPosted 7 months ago@yoyov51234 In your chrome dev tools there is a device icon nex to the arrow where you can click to inspect elements called toggle device toolbar. When you open this, it opens a new window with device widths on top. You can click on tablet size and see how your solution looks. However, when getting sizes, we don't just want to use a typical fixed size. We let the content or our solution dictate when we want to switch to a different layout. You slowly move your browser window to the left or right and see how the content looks. When your layout begins to cause issues, the device toolbar tells you the width and you can use this value. For media queries, it's best to use EM units. You can check out youtube for video guides on how to use this handy feature.
0@CreativeLogicPosted 7 months ago@yoyov51234
Also, as a developer it's crucial we pay close attention to details. The design has a purplish border around Daniel and Patrick's icons. Then the qoutation mark in Daniel's card is supposed to be more to the left.
0 - @AkoToSiJeromeEhPosted 7 months ago
Hey ! Great work out there i just notice you using padding-right , padding-left , padding-right and padding-bottom in .container , i suggest to use shorthand for declaring a padding like that ex padding : 4em(top) 1.5em(right) 4em(bottom) 1.5em(left) or in you case
padding : 4em(top and bottom) 1.5em(top and right)
, its much cleaner and less code for me . that's all happy coding !!Marked as helpful0@yoyov51234Posted 7 months ago@AkoToSiJeromeEh Thanks Jeje, good advice. I didn't do the shorthand because I was using sass to calculate the PX to rem/em using a function and I wasn't sure if the function works that way or not. Will give it a try and let you know later.
0
Please log in to post a comment
Log in with GitHubJoin 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