@Rabin92
Posted
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:
- For a better user experience you can add
cursor: pointer
to thebutton tag
. - In your HTML code you have used
id attribute
as a selector. I would suggest you use aclass selector
instead becauseid's
are unique whereasclasses
are reusable. Check out this resource on the difference: https://css-tricks.com/the-difference-between-id-and-class/ - 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. - I would suggest you use
relative units
instead offixed
. However, it depends on the different circumstances therefore to be clear you can watch this helpful tutorial on when to use differentCSS Units
by Kevin Powell - https://www.youtube.com/watch?v=N5wpD9Ov_To - Regarding your code, it's looking good. Just keep coding, practicing and you will start seeing a difference.
Hope this helps and Happy Coding! 😊
@lyndseyharvey
Posted
@Rabin92 thank you so so much for taking the time to do this, all your suggestions are really helpful and I truly appreciate it.