Website homepage looks odd at 767px width

[sydva]

Probably because we have

@media only screen and (max-width: 768px) and @media only screen and (min-width: 768px). So at exactly 768 both styles get applied.

[MoralCode]

I'm not 100% sure which lines of code these were or if I had anything to do with writing them, but they seem like they were more than likely pulled the numbers from bootstrap's responsive breakpoints, which I've found to be quite good breakpoints to use for media queries to differentiate different sized devices.

Personal Opinion
Honestly, since it sounds like this issue seems to only be occurring at exactly 768px, I think its probably fine to leave it as-is since I'm not aware of any mobile devices that have a default width of 768px, desktop users aren't likely to scale their browsers to a single exact pixel number except in responsive design mode, and c) the effects when this issue does happen are pretty benign (see screenshot).

[sydva]

My bad! It happens at 767 pixels not 768. I think a fair number of people will see this, since I found this organically because I had the site pulled up taking up half of my screen the default for split screen) and it occurred.

[sydva]

That's what it looks like at 767px wide.

[MoralCode]

Is it just that the menu button is covering some of the content after you scroll down a little? That seems to be pretty consistent behavior for all screen sizes narrower than 768px. I think we're going to need to put the breakpoint somewhere regardless of what specific value it is. If we're going to change it, we should make sure we do our research and pick a value that draws a reasonable line between the devices where viewers should see the hamburger menu and those that should see the full navbar. Since splitscreen was the main concern with this, we should also be sure to check splitscreen sizes on common devices that support it or could support it.

If we stick with the bootstrap breakpoints, we should probably also make use of their SASS mixins... https://getbootstrap.com/docs/4.5/layout/overview/#responsive-breakpoints