Mobile first using SASS

Community feedback

• 

  Amon•2,560

  @A-amonPosted over 3 years ago

  Hello! Great work~ The responsiveness works well.

  I'd like to offer a few suggestions:

  1. Add .. at the front to your background-image path because the image isn't showing up.

  2. Place the h2 and p tags outside of ul tag because I don't think it's semantically correct plus, it doesn't describe the list.

  1
• 

  banadikt•5

  @banadiktPosted over 3 years ago

  I don't have much time to give you lots of feedback as I need to revise my solution also but... you can try this picture tag. It basically gives you more flexibility when you need to use multiple images for different resolutions. In this case when screen width is bigger than 715px use desktop version otherwise use mobile version. Also I saw you didn't get your transparency to work on the image. I'm sure there's many ways you can do this but what I have done is to have this picture tag or img whatever you decide to use enclosed in a div. Set div background to that purple and set the opacity lower so it becomes more transparent and blends in with the purple fade. Good luck!

  <picture>
          <source media="(min-width:715px)" srcset="./images/image-header-desktop.jpg">
          <img src="./images/image-header-mobile.jpg" alt="Office workers at the desk">
  </picture>
  

  1
• 

  Jaydi•355

  @ruedasjnthnPosted over 3 years ago

  use display:block to show your image

  also use text -align: left to correct the layout of your design, u can achieve this using media queries to help you change layout as the screen size changes

  0
• 

  diamond-js•75

  @diamond-jsPosted over 3 years ago

  lol... That was also how I felt when I took this challenge. Nice design though... But seriously frontend mentor needs to work on their screenshots

  0