MyMood-Alexa / MyMood-Interface

0 stars 2 forks source link

[FIX] Minimum page width #23

Closed jtam360 closed 5 years ago

jtam360 commented 5 years ago

Set minimum width to prevent navigation bar from collapsing if user resizes the screen.

jtam360 commented 5 years ago

I tried adding in css to set the min-width across all pages, but the layout, specifically the navbar, would still collapse even when the right portion of the navbar is off screen like so: non-collapsed navbar.png

Then I tried preventing the navbar from collapsing at all but then the navbar would get squished together as seen here: with collapse but squished.png

Along the same lines, setting the navbar to a fixed-top prevents it from collapsing, however it messes with the rest of the html so it wasn't a good solution.

We cannot control the size of the browser window for users, so we can't set a minimum width for the canvas itself, we can only set min-width and min-height properties to control the page layout instead. It's also not possible to restrict the user from resizing their browser. The most we can do with the browser is change the size of the browser window when a user accesses the web page which isn't what we want at all.

My final solution sets the minimum width along with preventing the navbar from collapsing which almost is what I was going for. The only "issue" there could be is that the navbar starts to be hidden off screen at the right when the screen size gets too small. Final solution: final navbar.png

lydarren commented 5 years ago

Have you tried adding an overflow menu if the window falls below a certain size?

jtam360 commented 5 years ago

I haven't considered it, I feel like that would require editing the navbar itself. I believe we can use CSS @media rule to do something janky, I'll look into it.