the-programmers-hangout / website

🌳 TPH website
https://theprogrammershangout.com
MIT License
103 stars 69 forks source link

Navigation bar being on the side if the screen is exactly 768px #423

Closed oof2win2 closed 2 years ago

oof2win2 commented 2 years ago

The left navbar will be up if the screen size is exactly 768px. This is however the exact screen size of the 6th-gen iPad, on which the site will therefore look like the image below (Chrome Devtools preview). The navbar is taking up a third of the screen, making the content unnecessarily squished and code annoying to read as it needs to be horizontally scrolled through.

Screenshot 2021-10-02 at 2 04 41
Inklingboiii commented 2 years ago

I think a simple fix would be to change the media query condition from 768px to something bigger like 1280px for example.

veksen commented 2 years ago

I believe the query is wrong, a simple change to max 768 or min 769 would fix it

768 was the breakpoint intended for iPad, but I goofed up and never actually checked iPad