Menu icon Foundation

My Posts

No Content

My Comments

Steven Leimberg commented on Peter Gibb's post over 3 years

OH MY GOD, LOOK AT THAT GAP! XDWhat?Oh, right, back to business...Hello everyone!
I'm using Foundation 6 Sites SASS files and have run into this 1px gap issue when using the "small only" combined with the "medium" breakpoint. My settings are as follows:
$breakpoints: (
small: 0,
medium: 640px,
large: 1024px,
xlarge: 1200px,
xxlarge: 1440px,
);
When my SASS compiles, "small only" and "medium" result in:
@media screen and (max-width: 39.9375em) {}

@media screen and (min-width: 40em) {}
Thus, there is in fact a gap of 0.0625em, which when multiplied by 16 is 1px (as most including Torkil probably realize). I assume this is intentional to avoid overlap, but it does effectively create a 1px "gap".
@media screen and (max-width: 639px) {}

@media screen and (min-width: 640px) {}
For most, when the browser is not "zoomed in" using "Ctrl+" (effectively at 100% zoom) this gap is only 1px wide and is avoided since browser width is rounded to the nearest pixel (skipping over the 639.0001-639.9999 gap). If, however, the browser is "zoomed in" at all (125%, 150%, 200%) this tiny gap is exacerbated (since the effective browser width is now "smaller" but stretched, allowing a single pixel to now fit within the .0001-.9999 gap revealing itself to the user. This is probably pretty sporadic since it depends on how your browser rounds, how wide your breakpoint is, and how zoomed in the page is. 
I did find one solution that avoids the gap, but I'm not sure it could be used in all cases. Maybe for situations such as "small only" or "medium only"?
@media not all and screen and (min-width: 40em) {}

@media screen and (min-width: 40em){}
Are there any other ways to avoid this?

Posts Followed

  • 12
    Replies
  • Breakpoint pixel gap

    By Peter Gibb

    breakpoint

    I was testing an element where there's no global style and styling only applies within specific breakpoints that there's a 1px gap between breakpoints. From _settings.scss $medium-range: (40.063em, 64em); /* 641px, 1024px */ $large-range: (64.063e... (continued)

    Last Reply by Steven Leimberg over 3 years ago


Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Peter Gibb's post over 3 years

OH MY GOD, LOOK AT THAT GAP! XDWhat?Oh, right, back to business...Hello everyone!
I'm using Foundation 6 Sites SASS files and have run into this 1px gap issue when using the "small only" combined with the "medium" breakpoint. My settings are as follows:
$breakpoints: (
small: 0,
medium: 640px,
large: 1024px,
xlarge: 1200px,
xxlarge: 1440px,
);
When my SASS compiles, "small only" and "medium" result in:
@media screen and (max-width: 39.9375em) {}

@media screen and (min-width: 40em) {}
Thus, there is in fact a gap of 0.0625em, which when multiplied by 16 is 1px (as most including Torkil probably realize). I assume this is intentional to avoid overlap, but it does effectively create a 1px "gap".
@media screen and (max-width: 639px) {}

@media screen and (min-width: 640px) {}
For most, when the browser is not "zoomed in" using "Ctrl+" (effectively at 100% zoom) this gap is only 1px wide and is avoided since browser width is rounded to the nearest pixel (skipping over the 639.0001-639.9999 gap). If, however, the browser is "zoomed in" at all (125%, 150%, 200%) this tiny gap is exacerbated (since the effective browser width is now "smaller" but stretched, allowing a single pixel to now fit within the .0001-.9999 gap revealing itself to the user. This is probably pretty sporadic since it depends on how your browser rounds, how wide your breakpoint is, and how zoomed in the page is. 
I did find one solution that avoids the gap, but I'm not sure it could be used in all cases. Maybe for situations such as "small only" or "medium only"?
@media not all and screen and (min-width: 40em) {}

@media screen and (min-width: 40em){}
Are there any other ways to avoid this?

Posts Followed


Following

  • No Content

Followers

  • No Content