@CreativeLogic
Posted
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 helpful
@yoyov51234
Posted
@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?
@CreativeLogic
Posted
@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.
@CreativeLogic
Posted
@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.
