Landing Page using Vue3 + Vite with Mobile-first workflow
Design comparison
Solution retrospective
In this project, the biggest takeaway for me is learning how to work with JS media queries using window.matchMedia() method. Reference from CSS Tricks
// Create a media condition that targets viewports at least 768px wide
const mediaQuery = window.matchMedia('(min-width: 768px)')
const handleMediaQueryChanged = (e) => {
// Check if the media query is true
if (e.matches) {
// Then log the following message to the console
console.log('Media Query Changed!')
}
}
// Register event listener
mediaQuery.addListener(handleMediaQueryChanged)
// Initial check
handleMediaQueryChanged(mediaQuery)
-- Any feedback is welcomed. Thanks in advance!
Community feedback
- @ApplePieGiraffePosted over 3 years ago
Hello there, Joanne Wang! 👋
Well done on this challenge! 👍 Your solution looks pretty nice and is responsive! 😀
One minor issue I noticed is that there's quite a bit of space between the navigation links in the footer of the page when the layout of the site first changes from desktop/tablet to mobile (around 750px). You might want to set a fixed amount of space between those links so that there's never too much (or too little) room between them. 🙂
It also might be worth taking a look at your solution report and trying to clear up some of the errors that are there in order to improve the accessibility and semantics of your solution. 😉
Keep coding (and happy coding, too)! 😁
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