Responsive 4 Card Layout

Community feedback

• 

  Aram Nayebbandi•510

  @devaramnyePosted about 1 year ago

  I see that the right grid item gets lost if I am minimizing the screen slowly to smaller device. You should work on responsive layout as things shouldn't get lost if devices are changing. I recommend you to not fixing widths. Kevin Powell is a good guy to learn responsive layouts.

  as example if you delete the fixed width of 400px in your .card selector of your desktop approach, nothing will be lost anymore and the box is acting responsive. Give it a try.

  0

  ---

  

  Anthony Licata•170

  @anthonyplicataPosted about 1 year ago

  @devaramnye Fixed! Thank you! Silly mistake, and right after I gave the same suggestion to someone else on the same challenge lol.

  0
• 

  P

  Carlito•210

  @IntroxietyPosted about 1 year ago

  I'm a newbie just like you but one thing I've seen you've done wrong is you use margin-top to layout the 4 cards, you can layout your grid by having 3 columns and four rows and then position them using grid-area, I don't know if you get it but its better if you can do your own research on it, its easy to find.

  share this on discord server and post it on help section, people there who have better experience than me will give you feedbacks.

  0

  ---

  

  Anthony Licata•170

  @anthonyplicataPosted about 1 year ago

  @Introxiety I knew that was the way to go... I tried it but once I saw the grid in devtools I thought "nah I dont think this is it" and went with the less efficient, incorrect way of changing margins. I just went through rearranged them in a 3x4 grid and worked. I forgot items could just go through the gaps like that.

  0