Mobile first using flexbox

Community feedback

• 

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  Hey @SJ-74 👋🏻

  I have some suggestions for the project.

  • For the icons, add aria-hidden="true”, because they are for decoration. You can read more about aria-hidden here. For example:

  <img src="images/icon-supervisor.svg" alt="" aria-hidden="true”>
  

  And in general in alt tags avoid using words like logo, illustration, etc. They become redundant for the user who uses a screen reader.

  • Nice touch on :hover effects, but I suggest adding transition: all 0.2s; to the button and the links, this will make :hover smoother.
  • Lastly, I suggest increasing the header font-size from 1.5rem to 2.5rem.

  I hope this was helpful 👨🏻‍💻 all in all, you did a great job, and there's no proper way to do it. As long as you write a maintainable code, everything can be the proper way here. Cheers 👾

  Marked as helpful

  2

  ---

  

  Sj•120

  @SJ-74Posted about 3 years ago

  @kens-visuals Thanks for the feedback. I had no clue about aria till now. I appreciate the feedback.

  0

  

  P

  Ken•4,915

  @kens-visualsPosted about 3 years ago

  @SJ-74 you're welcome 😇

  0
• 

  Ctrl+FJ•810

  @FlorianJourdePosted about 3 years ago

  The problem is that you've got a "midcard" container, even on mobile display !

  Grid are not that difficult, have a look :

  #first-card {
    grid-area: first-card;
  }
  
  #second-card {
    grid-area: second-card;
  }
  
  #third-card {
    grid-area: third-card;
  }
  
  #fourth-card {
    grid-area: fourth-card;
  }
  

  ...and then, the magic happen !

  .wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-areas:
                 ". second-card ."
        "first-card second-card fourth-card"
        "first-card third-card fourth-card"
                 ". third-card .";
    }
  

  You can custom your own grids on Layoutit.

  0