Responsive landing with flex

Community feedback

• 

  Jordan Bugglin•170

  @JbugglinPosted 3 months ago

  Add a width: 100dvw; and height: 100dvh; to your stylesheet to fix the issue where the main card isn't fully centered to the screen. The parent container needs to have a specified size in order for flex to fully work.

  It also appears that the border-radius might be a bit off, to get the main card's border radius to look uniform with the <img> border-radius, I would just double the <img> border-radius and set that to the main.

  You might want to stylize the fonts for the different elements individually, that'll fix the size and weight issue of your <h1> element.

  Last, but not least, use semantic HTML. Use the <main></main> elements instead of creating a div with class of main. Link to semantic HTML elements: https://www.w3schools.com/html/html5_semantic_elements.asp

  Marked as helpful

  0

  ---

  

  D4rk C4rl•50

  @Fabrice000Posted 2 months ago

  @Jbugglin thanks for the advice

  1