four card section (desktop design)

Community feedback

• 

  Agata Liberska•3,995

  @AgataLiberskaPosted over 3 years ago

  Hi @sharmayatendra, well done on your second challenge! The desktop version looks great, but I don't think you included styling for mobile? It's really important that web pages are responsive - look and work well on all screen sizes.

  I like to start with mobile design first, as they're simpler, and then adjust things for wider screens (here's a good article explaining why it's a common practice).

  I can imagine that you might not want to redo the entire challenge though - so to somehow solve this problem here, you could add a media query for smaller screens and set flex-direction: column on your <main> element.

  Hope this helps :)

  3

  ---

  

  yatendra•20

  @sharmayatendraPosted over 3 years ago

  @AgataLiberska thanks for the feedback will learn about media queries & update them.

  0
• 

  Kingsley Agu•285

  @didyouseekyngPosted over 3 years ago

  Hey, Adding to the great review from @AgataLiberska, I was going to talk about using media queries to work with the mobile design first, and also some things I noticed on the desktop design which I'll list now which you can probably work on:

  • The width of your border top could possibly be reduced. • Adding a margin bottom of about 5px to the image inside the card just to give it a little bit of space at the bottom of the card. • Try using box-shadow on the cards. • Try adjusting the font-weight of the headings (team builder, supervisor e.t.c) inside the card since they're actually bold on desktop.

  I hope this helps you improve, we learn every day of our coding career. 💪🏾

  1

  ---

  

  yatendra•20

  @sharmayatendraPosted over 3 years ago

  @didyouseekyng sure will going to update them.

  0