Mobile first using HTML and CSS only

Community feedback

• 

  Rabin Gharti Magar•455

  @Rabin92

  Posted over 4 years ago

  Hey, Lyndsey! 👋

  Congratulations on completing your first challenge! 🎉 Your solution is looking good.

  On small devices (portrait mode), there is horizontal scrolling caused due to the fixed width given to the img tag and the padding of 50px to the main tag. To fix this issue you can remove the fixed width property and add max-width: 100%; to #hero-image img and then simply replace the main tag padding value to 1em.

  Here are few other suggestions:

  1. For a better user experience you can add cursor: pointer to the button tag.
  2. In your HTML code you have used id attribute as a selector. I would suggest you use a class selector instead because id's are unique whereas classes are reusable. Check out this resource on the difference: https://css-tricks.com/the-difference-between-id-and-class/
  3. Currently it is still displaying a mobile wallpaper on larger devices. To display a desktop wallpaper, you can replace background-image to desktop on media queries.
  4. I would suggest you use relative units instead of fixed. However, it depends on the different circumstances therefore to be clear you can watch this helpful tutorial on when to use different CSS Units by Kevin Powell - https://www.youtube.com/watch?v=N5wpD9Ov_To
  5. Regarding your code, it's looking good. Just keep coding, practicing and you will start seeing a difference.

  Hope this helps and Happy Coding! 😊

  01