3 Column Preview Card

Community feedback

• 

  Mojtaba Mosavi•3,740

  @MojtabaMosavi

  Posted over 3 years ago

  1- Put a mix-width on you container so it doesn't get to big on large screens, try to view it on around 2000px on chroms dev tool.

  2- When it comes to markup I recomand you always try to go about it with minimalistic appraoch primarly because it reduces the development time and complexity. For instance I think it would be more appropriate implementation of the heading would be <h2> text here </h2> but not ```

  <div class="text-heading"> <p> text here</p> </div>``` and the letter implementation is semantically incorrat too.

  3- The media query should be defined a bit later like around 700px and it shoud have some side padding because it leaves a bad impression on the user when content overflows and there is not appropriate spacing, view it like around 620px pixel for a visual exaple.

  Keep coding :=)

  01

  Marked as helpful
• 

  P

  Skyz Walker•1,215

  @Skyz03

  Posted over 3 years ago

  Hi Dwi 👋, Great work on completing the challenge. Really like the way you created a responsive design. Just a quick note, you could start implementing BEM convention to start naming your Css classes plus learn about SCSS from their website.

  01

  Marked as helpful
• 

  darryncodes•6,350

  @darryncodes

  Posted over 3 years ago

  Hi Dwi Suryono,

  Great solution, I think you pretty much nailed it!

  I noticed that at some screen widths the button seems to jump up and down depending on the size of the content in the paragraphs. I put this codepen together to provide an example how to use Flex: 1 or Justify content: space-between to stop that from happening.

  All the best

  01