Responsive News Homepage using Grid

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.
Please log in to post a comment
Log in with GitHubCommunity 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