Dear Tachyons Community,
Thanks for building this amazing system. I'm learning and liking this way or css.
While building a project, I have a specific use case where a chunk of text needs to :
- Stay at font size
f4on a large screen f3on medium screen andf1on not-small screen
To achieve this, I used the following combination of classes f1-ns f3-m f4-l. But with this, only f4-l class is applied, no matter what the size of the viewport might be.
What am I doing wrong ?
Thanks
shivekkhurana
All 6 comments
Hey @shivekkhurana,
It looks like there is some confusion around the naming for the media queries.
The not-small media query targets both the medium and large viewports. It's often used when there's mobile styling for an element and tablet + desktop styling (not small). So if I wanted text to be f2 on mobile and f1 on medium and large screens I'd do:
<p class="f2 f1-ns">I will be f2 on mobile, f1 for everything else</p>
Tachyons uses a mobile-first methodology and naming. This is not only for performance reasons, but to also ensure mobile viewports are always considered. Not to mention, this is also beneficial for developer ergonomics as well.
So, in your scenario if you want
Stay at font size f4 on a large screen
f3 on medium screen and
f1 on not-small screen
<p class="f3-m f4-l">...</p>
The f1 on not-small screens via f1-ns will always be overridden by f3-m and f4-l since they're declared later in the source css. This is intended in the cascade since they're more specific selectors than f1 or f1-ns.
I hope this helps, and let us know if you have any more questions : )
johno
on 29 Oct 2016
@johnotander Thanks for the detailed answer. This cleared my thought process.
I was assuming ns to be smaller than m and l.
The problem in original post was wrongly phrased due to flaws in my thought process. Sorry for that.
So my problem actually was :
- f1 on small screens
- f3 on medium screens
- f4 on large screens
After reading your response, I applied the following class f1 f3-m f4-l.
But in this case too, on a mobile emulator, f4-l is being applied instead of f1.
Where did my thought process go wrong now ?
shivekkhurana
on 30 Oct 2016
@shivekkhurana can you send us details about the emulator? It seems to pick it up on my end here with that combination of font sizes.
mrmrs
on 31 Oct 2016
I'm using the emulators provided by google chrome browser.
My code :
<div>
<div className='w-100 dt tc'>
<div
className='cover vh-25 v-mid dtc f2 f-subheadline-l measure white'
style={{background: `url(https://images.unsplash.com/photo-1462524500090-89443873e2b4)`}}
>
About Us
</div>
</div>
<div className='w-100 w-50-ns vh-75 dt tc center'>
<div className='v-mid dtc gray f1 f3-m f4-l'><!--This is the div under observation-->
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
</div>
Annotated Screenshot:
Full screen shot link : https://jumpshare.com/v/QCYPnNc9bfEXjKrVhoVd
shivekkhurana
on 1 Nov 2016
Do you have the following in your <head>?:
<meta name="viewport" content="width=device-width, initial-scale=1">
I didn't have this viewport in the head.
I added and it worked like a charm !
Thank you @johnotander 馃槉
shivekkhurana
on 1 Nov 2016
Related issues
mrmrs
路
6Comments
khakulov
路
3Comments
johno
路
6Comments
FateRiddle
路
3Comments
johno
路
9Comments
Most helpful comment
I didn't have this viewport in the head.
I added and it worked like a charm !
Thank you @johnotander 馃槉