Responsive landing page using flex

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted over 2 years ago

  First html you need to

  • use a landmark element like main to wrap main content
  • Give the logo alt - it's the most important content on the page and you've treated it as a decorative image
  • Remove cursor pointer from the logo or wrap it in an interactive element. Pointer signals interactivity
  • use an anchor tag for register not a button - they have distinct purposes
  • Wrap the social icons in labelled anchor tags. Users would expect to interact with those socials

  Marked as helpful

  0

  ---

  

  T

  Grace•31,270

  @grace-snowPosted over 2 years ago

  Next the css…

  It’s harder to debug as I’m on my phone today so can’t inspect

  But it looks like you are using a lot of percentage widths and large margins to create your layout. None of that should be necessary.

  And if using flex basis, you should also be using flex grow/shrink so the browser knows what to do.

  Nothing in this except the social icons should have an explicit size. Instead try to use things like max-width when you are tempted to add widths in px

  On your next project make sure you work mobile first as is accepted best practice. Your code will be more performant, maintainable and shorter that way. But as you’ve already worked desktop first I wouldn’t bother changing this now. You are starting your media query at the wrong point though!

  Only make the switch at the point where there is no longer room for the desktop layout. I recommend having devtools open at the side and using that in combination with zoom in/out to test responsiveness as you work. As you shrink the viewport down you will see a point where the layout no longer works - that’s where you start the media query

  I hope this helps

  Marked as helpful

  0
• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  Hello Busoalmi, congratulations for you solution!

  I saw that you used margin-left to align the icons, but this property make the social links behave like a column when you stretch the page. I applied to your code flex inside the .socia-link class and it have a better behavior. You can try that to see if works better. Code bellow:

  .social-link { display: flex; justify-content: flex-end; }

  To fix the accessibility issues you need only to apply on <main> tag to wrap all content, if you wrap it just with a div will be less semantic. Try to used more tags like sections, articles, main, to separate semantically your html hierarchy.

  I hope it helps you!

  Marked as helpful

  0