public marks

PUBLIC MARKS from decembre with tags width & em

12 May 2017 10:00

CSS - RESPONSIVE - CALC - Imitating calc() Fallback or Fixed-Width Sidebar In Responsive Layout — Osvaldas Valutis (2013)

If you were attentive you should see that the line width: calc( 12.5em ) is the trick here. Why? Let’s see all these widths like in pairs – exactly what we need browsers to do. The first pair is width: 80% (content) and width: 16.666% (sidebar) that does the job in calc() incompatible browsers, which will just ignore calc(). It is the callback (backup). It means that the minority of website visitors will see narrower sidebar on narrower viewports. And that should be perfectly fine for people using older browser versions. The second: width: calc( 100% - 15em ) and width: calc( 12.5em ). This is for newer browser versions which will override the previous width definitions

decembre's TAGS related to tag width

browser +   calc +   css +   demo +   em +   Responsive +   tutorial +