I recently created a simple portfolio website in Elm, and whilst i got the site to be responsive and change design based on screen size (display width to be specific), a weird issue occurs where the content of the web page seems to be stuck above ~950 pixels in width, meaning when viewing on a display 500 pixels in width it’s zoomed out / scaled down a bunch making it really hard to read on mobile devices.
The website is currently live at https://dillongeary-github-io.pages.dev/ but let me know if this link goes down, i’m am messing with the hosting of it at the moment.
The coloured tags won’t wrap (only their text content will, because they are inside a flex and that doesn’t wrap by default, use flex-wrap: flex-wrap - CSS: Cascading Style Sheets | MDN) and so the browser needs to scroll page horizontally.
I think that adding a <meta name="viewport"> tag would help with the scaling issue, but might also need to adjust width of some of the content (like allowing flex items to wrap). (This is essentially saying the same as comment above.)
Lighthouse is a good tool for finding issues like this, you can either run in Chrome dev tools if you use Chrome or use PageSpeed Insights
So I think the scaling/responsiveness issue is fixed by HTML & CSS. You might also look into running elm make with a JS output instead of directly generating index.html, something like
elm make src/Main.elm --output elm.js
since otherwise I think elm make without --output will overwrite any changes you’ve made to your index.html. (This would also allow you to minify the JS, addressing the other Lighthouse finding in that screenshot.)
