order summary page using flexbox

Community feedback

• 

  Yazdun•1,310

  @YazdunPosted about 3 years ago

  Hi ! It's better to approach mobile first because html elements are mobile responsive by default !

  Here is a simple example, We have three cards which we need to design them for main page here is how it's gonna look like desktop first :

  • .card {blah blah blah}
  • .card__parent { display:flex; justify-content: space-between;}
  • @media (max-width: 320px) { .card__parent {display:flex; flex-direction:column;}}

  now its how gonna look like mobile first:

  • .card {blah blah blah}
  • @media (min-width: 768px) { .card__parent {display:flex; justify-content: space-between;}}

  as you can see the second step on desktop first approach is unnecessary and it could be done with one line of media query with mobile first, I think you get the point now

  Marked as helpful

  0
• 

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  Hey @GloriaSekyere 👋🏻

  I have some suggestions for the project.

  • For the music icon, add aria-hidden="true”, because it's for decoration. You can read more about aria-hidden here. Like this :

  <img src="images/icon-music.svg" alt="" aria-hidden="true”>
  

  • Also, I suggest adding transition: all 0.2s; to the button and the links, this will make :hover smoother.

  I hope this was helpful 👨🏻‍💻 other than that, you did a great job, keep it up. Cheers 👾

  Marked as helpful

  0

  ---

  

  Gloria Ataa Sekyere•290

  @GloriaSekyerePosted about 3 years ago

  This is good information. Thanks! @kens-visuals

  0

  

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  @GloriaSekyere you're welcome 😇

  0