Flex

Community feedback

• 

  beowulf1958•1,890

  @beowulf1958

  Posted about 1 month ago

  Great job so far. Your html is clean and simple, and your css is well-organized and clear. You were able to center the card on the page and connect to Google fonts. The next step is to work on the responsiveness.

  At desktop (1440px) the container stretches down too far. This is because you have a height of 75vh no matter what the device screen size is. In this case it would be better to set the container height to "auto". Then it will adjust properly to different screen sizes.

  When I try to view the page on my iPhone it is too narrow to read. This is where responsiveness comes in. Add a media query to the css to fix this. This article explains all about it. In this case it would look something like:

  @media (max-width: 400px) {
    .card {
       width: 82vw;
    }
  }
  

  CSS will apply this style only if your device's viewport width is equal to or narrower than 400px; after that it reverts back to 22vw.

  Hope this helps.

  01

  Marked as helpful
• 

  Alex•50

  @Gummi-D

  Posted about 1 month ago

  Did you account for the different line-heights in the design spec?

  02