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!
Hello! It's my first tryout on Frontend Mentor!
Thanks in advance for your feedback.
Seems like you use this.$parent.content to manipulate display result. I'd suggest you to try use prop and emit for data propagation. You can also try Vuex, but I think prop and emit are enough for this project.
To make the design match the preview better, I usually set the design jpg as background image with opacity while developing so that I can layout more precisely. So far it works pretty well!
You can set flex property for each box to have specific flex effect. To prevent from growing, flex: 0 0 auto or flex-grow: 0 should do the job.
I'd probably use <img> since it's more readable for me. And we usually don't have to manipulate inline svg if your designer does a great job.
BTW, the RWD is so smooth. Really love your work!
For flex-items, by given flex: 1 for each boxes, will give you the same effect to equally divide container's width into 3 columns. If you want to keep the 12rem to specify the min width of each column. flex: 1 0 12rem is what you're looking for. It stands for flex-grow: 1; flex-shrink: 0; flex-basis: 12rem. And for the same properties shared between each boxes, I'd suggest to define them in another class.
Try use rgba color instead of black for the box-shadow so that you can set opacity for it.
