Skip to content
Submitted over 2 years ago

Responsive News Homepage using Grid

react, typescript, vite
LVL 1
@bschlademann
A solution to the News homepage challenge

Solution retrospective


This was my first time building a responsive website using media queries and I learned a lot. At first I was having trouble correctly positioning the overlay that grays out the site but stays behind the menu. I have ancountered strange behaviour sith swapping out the hero image between layouts when using brave/chrome : If the site is initially loaded in a window so narrow that the mobile layout is used, the mobile.jpg is correctly displayed for the hero image. Once the windows is widedned to desktop width, the hero image is correctly swapped out to desktop.jpg. Once desktop.jpg has been displayed, it will not be swapped back to mobile.jpg when narrowing the display again to mobile layout. Firefox does not show this behaviour. Here the images are always correctly swapped depending on the current layout. Does anyone have a solution for this? Someone suggested activating the "disable chache (wehn devtools is open)" or changing the dpr from 2 to 1 but both did not change this behaviour.

Code
Loading...

Please log in to post a comment

Log in

Community feedback

No feedback yet. Be the first to give feedback on Benjamin Schlademann’s solution.

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