SASS preprocesor, media queries

Community feedback

• 

  P

  Fluffy Kas•7,715

  @FluffyKasPosted almost 3 years ago

  Hey there, I'd say add as many media queries as needed to make your solution look nice on every screen size. For this particular challenge - if I remember correctly - I added more media queries too than I'd normally do. It's a tricky one for sure.

  Your solution is a nice start btw but if you don't mind I'll give some ideas where you could improve ^^

  1. When it comes to images, you can make them responsive by adding max-width: 100%, height: auto. This way you won't need to resize them by giving them a fixed width when the screen size changes. Also make sure the image is centered, at the moment it's not on smaller screens.

  2. Alt texts: please read this article, it will help you understand what alt texts are for and how to write good ones.

  3. Your social media section should be a ul instead of a div, and each list item should be a clickable link as well. So you'd have something like this:

  <ul>
    <li>
      <a>
        <img src="facebook.svg">
      </a>
    </li>
    <li>
      <a>
        <img src="twitter.svg">
      </a>
    </li>
    <li>
      <a>
        <img src="instagram.svg">
      </a>
    </li>
  </ul>
  

  In this case, you'll need to add aria-labels to your links ("Twitter", "Facebook", etc).

  4. You could add a background-position: contain to mobile screen sizes and background-position: cover to desktop version to make the background image look a bit nicer!

  5. Consider using relative units (rem, em, ch, etc) instead of pixels when declaring widths, margins and paddings, etc.

  Hope this will be helpful ^^

  Marked as helpful

  1
• 

  Aakash Verma•6,710

  @skyv26Posted almost 3 years ago

  Hi! Dude, Keep in mind, your website will open by random people on random laptop or desktop screen, So it is important that you should have to add media queries in order to make good user experience. Because bad user experience will result less reach and less opportunity. Overall your design seems similar to design preview.

  Marked as helpful

  1
• 

  P

  Diego Serrano•180

  @dserranoiPosted almost 3 years ago

  Awesome, thank you so much for such detailed feedback.

  0