I was building a product grid for a client site about 2 years ago and thought I was super clever with all these nested grids. Some random person on a dev forum just said "your grid is broken on mobile, try using flexbox for the card layout instead". I was so annoyed at first cause I spent like 3 days on that grid. Turns out they were totally right, the cards were squishing weird on screens under 600px wide. I switched to flexbox for the card wrapper and kept the grid for the page layout, and it fixed everything. Has anyone else gotten feedback that stung at first but actually made your code way better?
Spent 3 hours last night fighting a sticky header that kept disappearing behind a modal, until my buddy Jake pointed out I only set z-index to 1 instead of stacking them properly across the whole page - has anyone else wasted an afternoon on something that dumb?
I keep seeing this bug on so many sites lately. You scroll down a page and the sticky header just disappears behind a random image or a floating chat widget. It's like someone wrote all the CSS but forgot the last step of giving the header a proper z-index value. I noticed it last night on a recipe blog where the nav bar was completely hidden behind a giant photo of a cake. Makes the whole site feel broken even if everything else works fine. I bet it's happening because people are stacking elements with absolute positioning and not thinking about the header. Has anyone else run into this on a site they built or visited? Feels like such an easy thing to catch before pushing live.
Was talking to my old boss from like 2012 last week and he mentioned how we used to spend hours debugging float issues on IE6. Now I just slap display: flex on everything and move on with my day. Anyone else ever stop and realize how much simpler modern CSS has made things?
Had to pick between flexbox and CSS grid for a client's product cards. Went with grid because they had 4 columns on desktop. 3 hours later I was fighting with gaps on mobile. Should have just used flexbox. Anyone else regret a CSS choice mid-project?
I saw two sides of this bug after visiting a dental office's website in Phoenix last week - either the developer intentionally added it for a laugh because their competitor's site does it too, or it was a total CSS overflow accident that nobody caught, so which camp do you fall in: intentional trolling or sloppy coding?
Was debugging a client's site for a solid 2 hours yesterday. Their big old modal popup kept hiding behind a stupid sticky nav bar. I kept bumping the z-index up higher and higher thinking it would fix it. Then my coworker walking by said 'check if the parent has its own stacking context' and man that hit me right in the gut. Why do we always go straight for the biggest number instead of looking at the real problem?
I was building a simple card grid for a client's blog and spent a solid 3 hours trying to figure out why the hover effect on their featured post was showing behind the other cards. Turned out the z-index was getting reset by a parent container that had its own stacking context. I even yelled at my monitor twice. Then I found the fix by accident when I deleted a random position:relative on a wrapper. Has anyone else had a simple CSS trick turn into a whole afternoon of debugging?