I have a much simpler approach which works on browsers going back 10+ years:
Full-Bleed Layout Using CSS Grid
91–100 of 277 posts
Re: Full-Bleed Layout Using CSS Grid
#92If your screen is too wide to read websites comfortably, why don't you resize your browser? What is the point of buying a bigger monitor if you're still going to full-screen your browser to the point you can't read anymore? Isn't the point of bigger monitors to show more things at once?
I don't understand either.
These days we have many websites with giant empty spaces on the left and/or right, all in the name of making the text lines short enough (much shorter than I like them, but that's another rant). Making the browser window smaller often makes the text even smaller, instead of the useless empty spaces. Make some room for my other windows, please! We're not in the 90's anymore where monitors were only large enough for one window.
There's this trend of very wide and ultra wide monitors. I sincerely hope people don't use their browsers full-screen on 3440x1440 monitors.
Unless those empty spaces are supposed to be filled with ads that my ad blocker blocks for me. But that too is another rant.
Re: Full-Bleed Layout Using CSS Grid
#93I really hated this era before flexbox and co. CSS used to be the least intuitive thing on the planet yet a lot of people claimed otherwise. We had to resort to silly tricks (remember overflow hidden?) in order to make up for the mess that CSS used to be. Again what really pissed me off isn't CSS inherent issues but the fact that many people claimed there was absolutely nothing wrong with it, a pattern I often see wi…
In my experience, no matter how many improvements there have been, there are always things that you are trying to do that css doesn't support or make easy to do. Recently I've tried making tabs the same width but not justified horizontally, meaning all tabs should have the same width as the widest one. Something like this (1) but without hard coding the children count. In my mind, you would be able to set the widths…
Then what direction of relationship would have precedence, left to right? Right to left? If neither how precedence would be defined? Overall I don't want css to become any more complex, if you need an edge case such as that one JavaScript is a great tool for the job.
Re: Full-Bleed Layout Using CSS Grid
#94I really hated this era before flexbox and co. CSS used to be the least intuitive thing on the planet yet a lot of people claimed otherwise. We had to resort to silly tricks (remember overflow hidden?) in order to make up for the mess that CSS used to be. Again what really pissed me off isn't CSS inherent issues but the fact that many people claimed there was absolutely nothing wrong with it, a pattern I often see wi…
In my experience, no matter how many improvements there have been, there are always things that you are trying to do that css doesn't support or make easy to do. Recently I've tried making tabs the same width but not justified horizontally, meaning all tabs should have the same width as the widest one. Something like this (1) but without hard coding the children count. In my mind, you would be able to set the widths…
Funny, I was just struggling with this yesterday in an assessment I was given for a new job.
Re: Full-Bleed Layout Using CSS Grid
#95I get that one of my browsers isn't the newest safari (last update 2019), but the page shows the content, then blanks out the screen... Can't we fail gracefully..
"ReferenceError: Can't find variable: ResizeObserver"
Works fine in firefox. Diabling javascript in safari works, excepting some images don't load..
Re: Full-Bleed Layout Using CSS Grid
#96I don't know why but this page is using 100% CPU and making my fans go through the roof in Safari.
Same. I stopped reading halfway through because I'm on battery and don't want to run it down just reading a blog post. Also I got tired of the fan noise.
Re: Full-Bleed Layout Using CSS Grid
#97I don't know why but this page is using 100% CPU and making my fans go through the roof in Safari.
Same, around 40-50% CPU in Brave (MacOS), and the article is more or less useless with JS disabled.. ಠ_ಠ
Re: Full-Bleed Layout Using CSS Grid
#98Slightly OT, but this page has the BEST alternative for a modal newsletter pop-up I’ve ever seen. I have a personal rule that I close the tab as soon as a modal asking for my email pops up. When the cute little figure on the left _asked_ for my consent to pop-up a modal, I had to click on it because it was so cute and respectful. This is great design that I’m sure converts as well without cheapening your brand and ac…
I closed the page as soon as I saw that because I assumed it was an ad that had escaped the blocker.
What information are you concerned about them harvesting that they won't have gotten just from the ad loading? I suppose time on site and stuff, but I'm not sure what bits of info you're trying to hide. Feels like a situation where you might as well enjoy the content.
Re: Full-Bleed Layout Using CSS Grid
#99Earlier quoted context omitted.
Two reasons. One, the designer of the site has a specific UX and UI in mind, and that is their decision. If you don't like it, you can hack it with local CSS or just use a different site. Two, (I know you don't care, but for others reading) there are studies that show that for the vast majority of people, width constraints make it easier to read. So there is good reason to enforce those constraints in the design from…
Have you read the research? It doesn't really support the claims people make about it. A good starter thread (albeit it's hard to follow all the replies in the nested conversations): https://twitter.com/danluu/status/1115707741102727168
I've read quite a bit of it. It really depends on the claim. Speed is generally faster with longer lines, although it does seem like there is an upper limit. But comprehension and subjective judgement (yes, that last is hard to quantify) seem to be best between 40-60 characters (actually less than the commonly recommended 65 as seen in the original post here). Also, it's generally not line-length, but characters per line, that matters, and keeping the visual angle from changing as the user reads.
So it depends on what exactly is being measured, which is why I said the overall UX and not something more specific.
This is a bit older, well prior to the days of 4K displays, but lots of interesting stuff nonetheless: http://images3.wikia.nocookie.net/__cb20060729105544/psychol...
Re: Full-Bleed Layout Using CSS Grid
#100> Have you ever tried to read Wikipedia on a very large screen? It looks like this: [image] Those paragraphs are so wide! Wikipedia doesn't constrain the container width at all. This leads to lines that are hundreds of characters in length. NOOOOO! Please, please, please, please stop second-guessing my choice of browser window width! I bought a nice 27" monitor, and maybe I just want to use the whole thing. Why is yo…
Two reasons. One, the designer of the site has a specific UX and UI in mind, and that is their decision. If you don't like it, you can hack it with local CSS or just use a different site. Two, (I know you don't care, but for others reading) there are studies that show that for the vast majority of people, width constraints make it easier to read. So there is good reason to enforce those constraints in the design from…
Optimal line length for the web is not as short as it is commonly believed: https://www.viget.com/articles/the-line-length-misconception...
Even apart from that, I just see no point in constraining the widths forcefully. Just let the width adapt to the browser width, then each user can size it to his/her preferences and needs of the moment. Win-win for everyone.