Design comparison
Solution retrospective
Coding this challenge was a lot of fun. Dropdown menus are an excellent way to show more content without cluttering your navigation bar. I still need to work on smoother animations and the active states when you click on the dropdown menus. I tried using CSS only, but I think it would have worked better with javascript, something to consider for future projects.
I'm not sure if using the image as background was the best solution for this challenge, even though the image is not content and it makes more sense as a background. The dimensions were a little off (by a tiny bit) and it was a little complicated to adjust it.
Question --> Is there a better way to resize background images or to make it more responsive? Maybe I'm missing something.
Thanks!
Community feedback
- @DonUggioniPosted over 2 years ago
Hey there,
I find the best way to work with hero images, when they are not covering all the background, is to have them on the HTML and then set the size.
You can set a max-width for the image and then set the width to 100%. When you set the width to 100% they will respond according to screen size, opposed to having a fixed width.
I would definitely have used JS for this one, even though it is possible to do it with CSS only, but I find it better to manipulate classes and all that.
Other thing is, (maybe this is personal preference) I like to have to click on the drop down menus in order for them to open, dropdown menus on hover just annoy me =D.
You could also improve the resposinve part of the website, make it work on various screen sizes, that's something that should always be considered.
Marked as helpful1@placetenoPosted over 2 years agoThanks for your suggestions and comments @DonUggioni. After completing the challenge with
background-image, I realized that maybe a normal<img>tag would have worked just fine. Everything is a learning opportunity!And agreed with the responsiveness part. I saw your solutions and it looks clean in all screen sizes. I'll do some refactoring and add more media queries, more practice!
0@DonUggioniPosted over 2 years ago@placeteno No worries, we're always learning in this field of work!
0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord