• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Mobile Display on Desktop


Stationery Direct

Administrator
Staff member
#1
Had a couple of customers over the last couple of months mention that they are getting a mobile display on one of our websites when viewing on desktop, any ideas what I should be looking at?
 

hankscorpio

Moderator
Staff member
#2
I've seen it happen before when using my mobile hotspot as a the internet - it sometimes calls the mobile version of the site, as perhaps the connection is slow or being interpreted as being a mobile device.

That's all I can think of...
 

bigdave

Moderator
Staff member
#4
Looking at your stylesheet it seems as though media queries which form the break point between mobile and desktop are set with em rather than px. Using em for breakpoints doesn't make a lot of sense as it isn't an absolute value, it's defined by the font size selected by a users browser/operating system. Its very possible that the users experiencing problems have systems with unusual font settings.

Another possibility is that they are using a laptop/device with a small screen which is causing the breakpoints to fire.


**EDIT**
I've just downloaded your css file and it looks as though the main css is actually using px for media queries, its the foundation css file that using em. This could be affecting how the site is displayed but it's less likely as breakpoints are being defined with px so should be rendering correctly regardless of a users settings.

I would therefore assume that the users are viewing the site on a small screen/browser window.

Does the site just use media queries for responsive layout or is there some script detecting screen size?
 
Last edited:

Levi

Moderator
Staff member
#5
Could also be they've zoomed in as well, if you zoom in on most modern browsers they adjust the 'screen resolution' now rather than act like a magnifying glass. Using firefox when I zoom in (Ctrl + +) to about 200% zoom range it's using the mobile site with the hamburger menu.

The people having issues may need to press ctrl + 0 to reset the zoom to 100% to get the desktop version.
 

fisicx

Active Member
#6
It breaks at about 1000px. A lot of people don't view using a full screen browser which means they will see the hamburger. You don't need to ever use the hamburger as you only have 5 links in the menu. These will easily fit on a sticky header (which you don't have but should).

There are a gazillion other things you could do to improve the UX/UI. But that's a different discussion.