Responsive 3-column preview card component with HTML5, CSS3, Flexbox..

Community feedback

• 

  King•310

  @king-oldmatePosted over 2 years ago

  What really helped me is actually designing layouts for mobile first, and then adjusting as necessary for wider screens. Maybe start your next project with that in mind and see if you notice a difference.

  Marked as helpful

  0
• 

  P

  Zsofia Dalnoki-Papp•210

  @dalnokiPosted over 2 years ago

  Hey @jcasare,

  I'm pretty sure that the current solution belongs to the 3-column preview challenge - but this is a solution for the QR code component, that's why the design comparison behaves like this.

  Also, as a general rule of thumb, it's always advised to put your images in an images or assets folder, and also the "Challenge documentation.docx" shouldn't belong to the repo.

  As for the breakpoints: you only get the design for a few resolutions (mostly it is desktop, tablet-portrait, tablet-landscape, and mobile) and you need to make sure that your site behaves well on other resolutions too. You need to adjust your breakpoints accordingly. If you check your project on 568px resolution, the buttons slide out of the card, so you need to look for a solution that works on basically every possible resolution.

  It's also advised to have a "main" HTML element, for example, instead of the <div class="wrapper">.

  I hope this helps, good luck!

  Marked as helpful

  0

  ---

  

  JERRY COMFORTER ASARE•150

  @jcasarePosted over 2 years ago

  @dalnoki Thanks for your feedback. I realized that I had submitted the solution to a wrong question. I also appreciate your inputs. I'm working on it right away

  0