Menu icon Foundation
1024 screen size showing mobile layout

I'm running into a problem where if I adjust the screen size to 1024x768 my design is showing a mobile layout (for small screens) instead of one for large screens.

Does this have something to do with breakpoints? I don't think I adjusted anything out of the box ...

media queryscreen size

I'm running into a problem where if I adjust the screen size to 1024x768 my design is showing a mobile layout (for small screens) instead of one for large screens.

Does this have something to do with breakpoints? I don't think I adjusted anything out of the box ...

Karl Ward over 5 years ago

You using Foundation 5? A bit hard to understand what you mean by "mobile layout", as Foundation comes with 5 breakpoints in total ... Basically, the "medium" breakpoints goes all the way to 1024px, so this is the one you are seeing in action at 1024px. The next breakpoint "large", starts from 1025px and up ...

I believe you are mainly referring to a grid layout where you are using the "small" and "large" classes? Keep in mind, with Foundation 5, you also have the "medium" class for improved control ... Unless you also use "medium", your "large" class will not take effect until 1025px and up ... So this is what you are seeing ... You can replace the "large" class with "medium" class if you want your "non-mobile" layout to display at lower resolutions ...

Keep in mind, 1024px is often a "tablet", so its still considered "mobile", although you should probably not use that term at all. Not many desktops have 1024px ...

Rafi Benkual over 5 years ago

Are you referring to topbar? Or the grid?

The topbar breakpoint is 640px by default, that is 40em. The grid had different breakpoints:
// Here we define the lower and upper bounds for each media size
$small-range: (0em, 40em); /* 0, 640px /
$medium-range: (40.063em, 64em); /
641px, 1024px /
$large-range: (64.063em, 90em); /
1025px, 1440px /
$xlarge-range: (90.063em, 120em); /
1441px, 1920px /
$xxlarge-range: (120.063em); /
1921px */