All solutions

Is it best to use flexbox for mobile, and grid for desktop on main section, or use grid from the start?

body { height: 100vh; } causes problem on mobile such as the body element not wrapping all of the elements, causing an overflow.

Is body { min-height: 100vh; } a good solution?

All feedback are welcome, though some specific questions came to mind when building this project:

• How to revert media query changes after using window.matchMedia?

Using CSS' media query, it will automatically reapply the old code when reverting back to desktop resolution, but this doesn't apply for JS' media query. I used JS media query because I needed to change the svg for mobile and desktop, which means changing the src attribute through JS.

I've tried resetting the DOM tree to its original state: const initialBody = document.body.innerHTML; // Do some DOM manipulation document.body.innerHTML = initialBody

That doesn't work for some reason, it'll replace the innerHTML with undefined. It feels like I have to manually revert the changes.

It does make me question though, maybe in the real world, SVG's should've been combined instead of coding with several SVGs, that way we can toggle between the src attribute, but then how would you make the effect of the box showing visible overflow, but the rest of the image is hidden?

• When to use REM and EMs?

Is one better than the other as margin and padding value? Which is better in what scenarios?

• Was using flexbox the right choice for this project? Or is grid more appropriate?

Thanks for your time to help me with this. I appreciate it!