Design comparison
Community feedback
- @tarasisPosted about 2 years ago
Hi @Lisviks just wanted to say congrats on the challenge solution, I think it looks great across all three sizes. Also yours is the first solution I've commented on so far that correctly put the
<br>
after theAll rights reserved © Equalizer 2021
🤪<picture> <source media="(min-width: 1440px)" srcset="./assets/bg-main-desktop.png" /> <source media="(min-width: 768px)" srcset="./assets/bg-main-tablet.png" /> <source media="(min-width: 375px)" srcset="./assets/bg-main-mobile.png" /> <img src="./assets/bg-main-desktop.png" alt="background image" class="bg-image" /> </picture>
Was a good way of handling the bg images.
For the Footer, I'd recommend against doing that social links the way you have. They should be links (even if they aren't going to real pages), with some sort of aria-label to indicate where they are going.
I'd recommend using
aria-hidden
on the various images / product logos.Don't put the
hover
for the socials only on the Desktop media query. You never know if the user might just have their browser window at tablet size because they are using a different app beside it.footer .socials div:hover { cursor: pointer; background: #fa7453; }
Hope this was of some help. Wishing you the all the best.
Marked as helpful1
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