22
Condor
5y

Me: *builds smol website for blogging purposes*
...
Hmm 🤔 so I need to be able to find a way to display properly to mobile clients as well, the desktop style is shite on my phones... How about going for all-screen and less than 1440px width? I mean there don't exist any phones with over 1440px width and I'm sure that everyone is now using 1920px width on their desktop panels (please keep the portrait desktop monitor setups out for now 😢)... Aight, looks nice now in both desktop and mobile. Awesome!

Few days later...
Le Telegram inbox: *ping*!
User: um yeah your font is way too large
Me: *looks at screenshot* (at least it was an actual screenshot, not a picture) well that's the mobile view.. why are you using that, what's your resolution?
User: 1024x768
*Facepalm.jpg*

Why are you doing this to yourself and why are you doing this to me 😭

Comments
  • 18
    That's still really really common on low end hardware. Also, might I enlighten you with motherfuckingwebsite.com ?
  • 4
    @epse nO dArK tHeMe reee lmao

    While they're not wrong, there's a happy medium between that and the other extreme.
  • 2
    @Stuxnet but it's really easy to do!
  • 1
    @epse it's also an eye sore lol
  • 2
    @Stuxnet you can add some styles to make it look good without fucking up the default responsiveness
  • 2
    @Jilano you're the fucking goat lmao
  • 4
    @Jilano @Stuxnet @epse My website actually draws a lot of inspiration from them :3
    Shameless plug: https://www.nixmagic.com
  • 2
    @Condor yeah I like it a lot
  • 2
    @Condor I'd just add a tiny bit of padding to your body
  • 3
    What @epse said.

    Looks great though
  • 2
    @epse Oh, yeah now that you mention it.. I noticed on mobile earlier that the background doesn't cover the whole page on shorter posts. Padding though.. on desktop or mobile you mean? They've got different styles for each. Mobile has no padding to fill the whole screen. Desktop has a bit of padding iirc
  • 1
    @Condor I'd add just a couple pixels on mobile, the white text sticking to the edges of my display is weird and makes for long lines of text
  • 1
    @epse Ah, sounds fair yeah. I'll try to add a few px of padding then. Thanks for the suggestion!
  • 1
    @Condor could also do a max width with margin auto
  • 2
    If you're doing styles based on px, you're doing it wrong. Use em or rem in general, except for some occasions where the objects are actually px based.
  • 0
    use the viewport units: vw vh, vmin vmax. https://sitepoint.com/css-viewport-...

    or even better let this be the job of a css framework.
  • 1
    It's 2019 and websites are still deciding the device based on screen size... impressive! Fuck native apps! Web is the UI technology of the future! 😒
  • 2
    @Condor holy crap that thing loads fast though... back and forth too. Wish all websites were this quick at showing content.
  • 1
    1. Use a reset (for that font re-sizing thing..)
    http://meyerweb.com/eric/tools/...

    2. add viewport meta tag (just b'cuz.)
    <meta name="viewport" content="width=device-width, initial-scale=1">

    3. Profit.
  • 2
    @epse this is.. surprisingly pretty in contrast to all crazy css bootstrap js shit out there
  • 0
    @Jilano oh
Add Comment