Made order card with some Flexbox

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout in general looks great but right now, it is not responsive enough only on 360px breakpoint what you did but remember that lots of phone have higher width on that, try to inspect at like 400px layout is being hidden and creating horizontal scroll.

  Some suggestions would be:

  • Always have a main element to wrap the main content of your page. On this one, the .main should be using the main instead of div.
  • The .attribution should be using footer as well so that it will be inside a landmark element.
  • Also I just noticed by now zooming, layout is destroyed and looking at the css, you only styled the 1440px max-width, which is wrong. When a user have higher width on that, they won't get a proper layout since the stylings are only available at those breakpoints. I suggest using a mobile first workflow or just don't use desktop max-width as breakpoint, just use it directly on your css and not inside a @media.
  • Using margin is not consistent enough to center a layout, instead, you can remove that and on the body tag, you can apply these:

  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh; # makes sure element have enough height
  

  • For decorative images that uses alt="" add an extra aria-hidden="true" to completely hide it from screen-reader users:

  <img src="..." alt="" aria-hidden="true">
  

  • You don't need to use those br inside of a text to make the text wrap. Use max-width on the element and adjust it until you get the desired look.
  • Using a heading tag on the annual-plan could be great since it gives information on what the section would contain.
  • To make the layout more responsive, on your .main, instead of using width: max-content use max-width: max-content and width: 100% then on the vector, the img, use width: 100%.
  • Lastly, adjusting those breakpoint usages.

  Aside from those , great job again on this one.

  Marked as helpful

  0

  ---

  

  Miroslav•130

  @MirosBL45Posted about 3 years ago

  @pikamart Thanks for the feedback, it means a lot to me, and now I have learned something new. I will continue to study and practice examples from Frontend Mentor. Yes, max-width is much better instead of br tag, in future I will now.

  Thanks a lot.

  1