Daniel Tonon

Recent Blog Comments By Daniel Tonon

• Using Position Absolute Inside A Scrolling Overflow Container

  Posted on Feb 27, 2018 at 8:19 AM

  @Ben, "I wonder if one could use it to make buttons "bigger" on devices that are not finely-pointer'd." Lol, that is exactly why it was invented in the first place. So you can do stuff like that :) "CSS Grid, I just recently started playing with it for the first time. Loo... read more »

• Using Position Absolute Inside A Scrolling Overflow Container

  Posted on Feb 22, 2018 at 9:18 AM

  @Ben, Sorry I meant @media (pointer: fine) { ... }, not @supports. It detects if you are using a device with a highly accurate pointer like a mouse or a stylus pen. @media (pointer:coarse;) {...} is the opposite, detecting low accuracy pointers like touch screens and motion controls. @media (hover... read more »

• Using Position Absolute Inside A Scrolling Overflow Container

  Posted on Feb 19, 2018 at 12:00 PM

  @Ben, Hmmm... right, yeah that's a good point. That's a tricky puzzle. The only ways I can think of getting around that is either using an iframe or detecting if there is an overflow with JS and nudging the buttons over 20px if three is. The 20px nudge won't work properly on touch devices though si... read more »

• Using Position Absolute Inside A Scrolling Overflow Container

  Posted on Feb 18, 2018 at 4:00 PM

  It's not that hard to create a more fixed position like experience but you will need to change your html. Use the html and css from your second example except move the <span.box> elements out of the <div.viewport-wrapper> element so that they are direct children of the <div.viewport-... read more »

• CSS Flexbox: Aligning Content Slightly Off-Center

  Posted on Jan 15, 2018 at 5:07 PM

  PS. I'm the author of that media query mixin ;)... read more »

• CSS Flexbox: Aligning Content Slightly Off-Center

  Posted on Jan 15, 2018 at 4:58 PM

  Oh and one more thing. *, *:before, *:after { box-sizing: inherit; // makes responsive design much easier (prt 1) } html { box-sizing: border-box; // makes responsive design much easier (prt 2) word-break: break-word; //allows text to wrap if the full word doesn't fit in its container (Good... read more »

• CSS Flexbox: Aligning Content Slightly Off-Center

  Posted on Jan 3, 2018 at 4:17 PM

  @Ben, Start off your css-grid learning by playing this game: http://cssgridgarden.com/ There are also these games for helping you learn flexbox: http://flexboxfroggy.com/ http://www.flexboxdefense.com/ You can start using css grid right now in production. The main issue is IE11. Read this b... read more »

• CSS Flexbox: Aligning Content Slightly Off-Center

  Posted on Jan 1, 2018 at 3:10 PM

  Interesting technique. You could avoid the need for empty spans altogether though by applying the spacer code to `.wrapper:before` and `.wrapper:after`. I think this would be even easier using CSS Grid though. Add a .inner-wrapper around the 2 content elements. ```` .wrapper { display: grid; grid-... read more »