Why does a messed up version of my mobile site show on a narrow desktop browser at 767px wide?

https://www.grdowntownmarket.com/
pw: Market4321

My website looks fine on a desktop, iphone, and ipad.

When I reduce the width of my Chrome window to 767px, a messed up version of my mobile site is shown, even though my CSS defines mobile view to occur at 640px. Is there a way to avoid the mobile site showing on desktop? It's frustrating because I thought I had all my bases covered.

CSS code parameters:

//mobile code
@media screen and (max-width: 640px) {
Mobile code here
}

//tablet code
@media screen and (min-width: 641px) and (max-width:1080px){
Tablet code here
}

19 minutes ago, ryanbrinkerhoff said:

reduce the width of my Chrome window to 767px

The mobile break point in version 7.1 is 767px, not 640px, so at 767px the view has switched to the mobile layout. You can't adjust this and since it switches based on screen resolution you can't prevent it on desktop.

You may want to adjust your Custom CSS to account for that. Tablet is 768px up to a user-defined value since tablet view is the same layout as desktop.

@Ziggy

Thanks! I adjusted my breakpoints but it still seems to snap to mobile view and look weird. Large vertical gaps between elements and misaligned objects. See attachments.

When I keep scaling the browser window, it eventually displays the correct mobile view at 520 px. What do I do about the widths between 767px and 520px? Is there a trick to tweaking things in that range?

@Ziggy @tuanphan Does anyone have any other suggestions on what to do about the range between 520px and 767px? There has to be a way to tweak things, right?

Thanks!

@Ziggy Oh my gosh I think this is going to work! Thanks!