Responsive Intro section with dropdown navigation
Design comparison
Solution retrospective
While doing the challenge i faced a few ups and downs
The issues being:
- Couldn't make the main image change the src attribute when resizing the window.
- main image overflows or turns too small when resizing the window.
The solutions:
- I used the picture tag in my html, which works better than the img tag's srcset attribute for a responsive image.
- used flex basis and width property to make the image look good on different screen sizes.
Community feedback
- @elaineleungPosted over 2 years ago
Hi Ahmad Mana, great work! I also completed this challenge this week, and like you, I used the
<picture>
element in dealing with responsive images. Well done solving your problems :)I can see in your report that you have a number of HTML and/or accessibility issues such as needing
alt
tags in images, so you might want to fix those. Also, your font isn't showing up; it's because the link you used is the font face's main link and not the server link, which should look something likehttps://fonts.googleapis.com/css2?family=Epilogue
with the font weights attached. You'll need to click into the page for the font face and then select the font weights you need, then copy the link given and paste it into your code. Lastly, thehover
style for the dropdown nav seems to be changing the entire nav instead of just the link I'm hovering on, so I think you need to put thehover:
on yourli
instead oful
.1@UserAhmad2001Posted over 2 years ago@elaineleung Feedback noted Thanks for your comment, Elaine. :) I will make sure to fix them later.
Best regards Ahmad
1@elaineleungPosted over 2 years ago@UserAhmad2001 Oh, I forgot to mention that you can just add empty
alt=""
tags if the image isn't particularly important to the content, but you do need to have the alt tags somehow. Good luck!1
Please log in to post a comment
Log in with GitHubJoin 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