All comments

• 

  Fadi•100

  @Fadi-ibrahemSubmitted over 2 years ago

  

  3 Column Preview Card Component Main

  1

  10
  

  Moris Tibenkana•160

  @tmorisPosted over 2 years ago

  Hello, nice work, here's some advices to make it even better:

  First, for always remember every page must have an h1 heading tag to avoid accessibility issues. secondly, by default webpages are responsive only so its always us styling that takes away the responsiveness. Always avoid setting heights and only do it if its a must, Avoid setting fixed units (pxs) but relative units, i.e %, em, rem, and vw units I recommend checking out this free course https://courses.kevinpowell.co/conquering-responsive-layouts for more details.

  Imagine the full width of the desktop version as 5 parts (space, block1, block2, block3, space). By quick maths you know that your container muss do 60% of your body. You can even use 60vw. If you don't know this unit it is a percentage based unit scale based on the viewport the site is displayed on.

  The container styles in the challenge solution, .container { display: flex; } making all the flex-items take full width .container >* { flex-basis: 100%; or width: 100%; } then choose your preferred breaking point using a media query say //desktop first @media (max-width: 700px) { flex-direction: column; } Finally, to center your work create a class and use flexbox centering trick on the body. Nice work and happy codding, remember to checkout the free course you thank me later!

  0