undefined media queries of screen size under 30em on tachyons.css

[ghost]

I guess that '@media screen and (min-width: 30em)' on tachyons.css is a typo from (max-width: 30em).
I clearly point out word, 'min' and ' max'.

tachyons.css has the below media queries.

• @media screen and (min-width: 30em)
• @media screen and (min-width: 30em) and (max-width: 60em)
• @media screen and (min-width: 60em)

screen size under 30em is only not defined.

I hope you will comment about this issue.

[cristianofromagio]

It's because the base classes are mobile by default, following the mobile-first architecture. You already "start" below 30em and then progress upwards. But be aware of #578.

[ghost]

Hi @cristianofromagio,

My mobile phone have a screen width less than 30em.
All of media queries on tachyons.css do not affect my mobile phone.
"screen and (min-width: 30em)" means screen width MORE than 30em.

tachyons.css said the following,

• screen size < 30em
  No effect.
• 30em < screen size < 60em
  Effect '@media screen and (min-width: 30em) and (max-width: 60em)'
• 60em < screen size
  Effect '@media screen and (min-width: 60em)'

I strongly insist that "@media screen and (min-width: 30em)" is corrected to "@media screen and (max-width: 30em)".

[cristianofromagio]

All of media queries on tachyons.css do not affect my mobile phone.

Yes, that is intended. On a mobile-first approach you don't need a media query to target a small device, it's by default applied to it as the base.

But if you have a layout created for a desktop view and now need to adapt it for mobile view, then you need to use max-width. Either way, media queries should be viewed as "adaptations". Whatever approach you use (mobile-first or not) the base classes you use are always going to be applied to the element, unless if overwrite by the media-query declarations ("adaptation").

Take a look at the media-queries variables names for tachyons:

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

When you apply a base class on a mobile-first architecture, you are already at "small". After 30em you are at "not small", between 30em and 60em you are at "medium" and after 60em you are at "large". Roughly, what the min-width rule says is "apply these classes if the screen size is X value or more" and what the max-width rule says is "apply these classes if the screen size is X value or less".

[ghost]

Hi @cristianofromagio,

Now I am wondering that "breakpoint-not-small' never affected anything in spite of existence of "breakpoint-not-small".

• "small" as screen size < 30em
  No effect.
• "medium" as 30em < screen size < 60em
  Effect '@media screen and (min-width: 30em) and (max-width: 60em)'
• "large"" as 60em < screen size
  Effect '@media screen and (min-width: 60em)'

It looks you can remove ""breakpoint-not-small"" from tachyons.css.
If you would not remove it, you are misleading "breakpoint-not-small" is still alive.

[dangayle]

Breakpoints have been refactored here: #705