Breakpoint medium & large overlap

[bdmason]

No description provided.

[bdmason]

Sorry I hit enter early so my issue in the this comment:

I'm new to tachyons, so maybe have misunderstood something, but the breakpoint behaviour is a little confusing. Medium and large overlap at 960px, so -m classes are still applicable for -l screens (for 1px only). Is this intended?

I noticed it when I had a column layout in which medium screens require a border on one of the columns that looks daft when the columns rearrange on large screens. At exactly 960px the styles are broken, meaning I need to explicitly remove the border on large screens just to account for devices that are exactly 960px wide.

[LauraMontgomery]

I also found this issue - for now I've changed the breakpoints to pixels and made sure medium only went up to 959px

[jason-covington]

This has been an issue for us in a current project. Any way this can be addressed?

[bdmason]

This has been an issue for us in a current project. Any way this can be addressed?

Perhaps a pull request. I switched over to Tailwind as when I opened this issue I was just experimenting with functional CSS trying to choose a library. I've built one big project and a few small ones with Tailwind and had no issues so far.

[coffeeneed]

This is very annoying. A grid system which does not work, it's confusing and utterly strange to say the least. Why isn't this addressed? I've been struggling for a while getting this to work as I can't have 3 different layouts, only 2.

How am I supposed to make 3 different layouts for a div with 4 columns?

mobile: 100% w
medium: 50% w
large: 25% w

[mlen108]

2.5 years later & issue still not addressed. Not impressed. We have large project based on this CSS framework & no time to change it now... I thought I was doing something wrong, turns out the basic grid system is broken by 1px!

[cristianofromagio]

Read the README.md. You can modify and generate your local copy of Tachyons with whenever values you like.

After following the instructions on Local Setup, change --breakpoint-medium on file src/_media-queries.css:

@custom-media --breakpoint-not-small screen and (min-width: 30em);
@custom-media --breakpoint-medium screen and (min-width: 30em) and (max-width: calc(60em - 0.00125em));
@custom-media --breakpoint-large screen and (min-width: 60em);

(If you don't want to download, install and build everything but this value, download the compiled tachyons.css file and search for @media screen and (min-width: 30em) and (max-width: 60em) because the compiled version have only one media-query each breakpoint so you just have to edit this line and save).

Read below for explanation:

min-width and max-width are range comparisons that include the value. A common workaround is described in the Media Queries Level 4 document, where they mention a way some people used to bypass this by setting an offset of 1px on one of them, but this created a situation where some screens might have a fractional viewport size (non-integer pixel densities). Using a smaller offset (0.01px) reduces the chance of this situation to cause issues. Whoever this fall under a rounding bug in Safari, although using an offset of 0.02px seems to work [ref. #1 and ref. #2/commit ref].
Comments of the offset, rounding bug and references were found in Bootstrap's breakpoints.scss mixin file.

But now we have another issue: tachyons is using em based breakpoint values, and using calc on media-queries does not work with mixed units (see this answer with examples and this reported Chromium bug). So, to make all use the same unit, either transform the em values to px, or convert 0.02px to em using the base font-size which commonly is 16px (0.02px = 0.00125em, based on 16px font-size).

Set up this base Stackblitz to use as an example of the change proposed in this comment, if someone can show an example of where this bug occurs (and is fixed by the values mentioned above) I appreciate.

[mlen108]

@cristianofromagio yes, I get that.... The reason I use "css framework" is that I do not want to hack around css. If I wanted to mess around with compiling my own custom css values then I would not be here. Nevermind, I'm switching to more mature solution.

[coffeeneed]

@cristianofromagio While your post is productive and intentions are good, the solution for this is not hacking. Why this issue isn't solved and pushed to master is beyond me. The fix is done in 10 minutes and it'd be official.

This is stupid. Please discontinue this repo and delete or mark it as closed. Go on, nothing to see here.