↵

Abstract(abstract.com)

6 years ago from Aaron S, Product Designer

  • Renato de LeãoRenato de Leão, 6 years ago

    Waiting to try this since last year, let's see how it goes.

    Out of curiosity, why did you change your domain from: abstractapp.com to goabstract.com?

    One note on the site, besides the awesome party parrot: width: 100vw != width: 100%, vw includes scrollbarWidth. I don't know if it's just me, but these unwanted scrollbars just grind my gears.

    As a general rule, don't use for vw for full width sections. Use width: 100% instead.

    If you want to be hipster:

    .page-wrapper{ width: calc(100vw - (100vw - 100%))}

    That's it for today, CSS Is fun!

    Shamelessly Stolen and remixed from aykevl

    7 points
    • Josh BrewerJosh Brewer, 6 years ago

      Hey Renato, re: domain change, it was because all our social handles have been @goabstract from the start and we wanted to be more consistent across the board :)

      2 points
      • Renato de LeãoRenato de Leão, 6 years ago

        Makes sense! For moments I though it had something to do with the Abstract documentary, but then realised that it didn't make any sense... I just need to sleep :p

        0 points
    • Tim Van DammeTim Van Damme, 6 years ago

      Thanks for the heads up about the width thing, will make the change right now :)

      1 point
    • Maciej ZadykowiczMaciej Zadykowicz, 6 years ago

      You can get rid of the scrollbar with overflow-x: hidden in html tag when using 100vw's. Oh, and love the design!

      1 point
      • Renato de LeãoRenato de Leão, 6 years ago

        Well yup you can.. but you still get extra ~15px (depending on browser scrollbarWidth) on each section and then you can get things under the scrollbar.

        I think good ol % still wins, viewport units are handy for other things.

        1 point
      • Laura McCartney, 6 years ago

        That is a hack and can make your scrolling janky on mobile.

        1 point