Testimonial: css grid, BEM

Community feedback

• 

  P

  Arnold Limberg•410

  @CreativeLogicPosted 6 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 helpful

  0

  ---

  

  P

  yoyov51234•240

  @yoyov51234Posted 6 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

  

  P

  Arnold Limberg•410

  @CreativeLogicPosted 6 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

  

  P

  Arnold Limberg•410

  @CreativeLogicPosted 6 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
• 

  JuvoGenesis👾•2,010

  @AkoToSiJeromeEhPosted 6 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 helpful

  0

  ---

  

  P

  yoyov51234•240

  @yoyov51234Posted 6 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

  

  JuvoGenesis👾•2,010

  @AkoToSiJeromeEhPosted 6 months ago

  @yoyov51234 alright man , happy coding

  0