Basic HTML and CSS 3

Community feedback

• 

  Babajide Peter Oyafemi•200

  @Babajide777Posted about 3 years ago

  Hi Oscarandio,

  I advise you use CSS Grid to make it more responsive. CSS grid made build the project a lot easier. You can check my solution here: https://www.frontendmentor.io/solutions/semantic-html5-markup-css3-flexbox-grid-fZ4rIBPVH

  1

  ---

  

  Óscar Rabadán Martínez•150

  @OscarandioPosted about 3 years ago

  @Babajide777 Thank you for your advice. I will try it! Keep up the work!

  0
• 

  Agata Liberska•3,995

  @AgataLiberskaPosted about 3 years ago

  Hi Oscar!

  In general, it's a lot easier to just start with the mobile design, since divs just stack on top of each other in a column, just like you want them to be here. So what I would do is add a media query with a min-width and only apply display: flex to the .container class on viewports wider than, say, 900px or so? You'll probably want to set a max-width on mobile and unset or change it on desktop.

  Another thing is - I would set min-height on the body element, and set it's display to flex to center the container inside the body :)

  What is tripping you up right now as well is the padding you've got set on the body - that's what is causing the last card to be below the other two on the preview above.

  And to sort the border-radius on the cards - you can set that on the container as well, just make sure to add overflow:hidden so that the corners of individual cards don't cover the rounded container corners.

  Hope this helps, let me know if you have any questions!

  1

  ---

  

  Óscar Rabadán Martínez•150

  @OscarandioPosted about 3 years ago

  @AgataLiberska Hello and sorry for my late reply. I have tried everything you told me and it's perfect now! Thank you so much! My next step is start using rem/em and sass :) Keep an eye on my progress!

  0