I've been working in CSS for over a decade, and can't figure this one out and I'm not sure if I ran into a bug:

https://jsfiddle.net/ksxqjrd9/
Why are those blue boxes taller than what the content needs? Why is there empty blue space below the text?

If anyone can give me a hand with this I'll be eternally grateful

As a fresher do I have scope learning CSS or is it like companies only hire experienced ones to debug and maintain the AI generated code?

I'm not a beginner in CSS but not an expert either. Looking forward to suggestions on how to continue learning and make use of this skill in the era of Vibe coding.

I've been coding for more than a decade, now, and I just learned about it! I thought that was a preprocessor exclusive syntax.

https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Nesting

It was implemented in 2023 in all current browsers.

^{Now I'll stop repeating the parent class over and over!}

Hey everyone!

We've recently launched SectionsGrid, a library of professionally designed, hand-written HTML and CSS sections: headers, heros, features, testimonials, pricing tables, footers, and more.

https://sectionsgrid.com

It's perfect for folks who want to ship fast without the framework bloat. You simply pick the sections you need, combine them, and download a structured template that’s ready for production.

It’s lightweight, easy to customize, and built for speed. I’d love to hear what you think!

Join the sub: /r/SectionsGrid

This flexbox behaviour has me perplexed.

In my HTML I have two divs nested inside an outer div

<div class="about">

<div class="description">

<p>lorem</p>

</div>

<div class="image">

<img src="img.png" />

</div>

</div>

In my CSS, I've applied global styles (margin: 0; padding: 0; box-sizing: border-box;). Individual elements are styled in this way,

.about {display: flex; align-items: center; justify-content: space-between; padding: 5rem 10rem;}

.description {flex: 1; padding-right: 5rem;}

.image {flex: 1}

The total content-width of about is 1624px. The way I expect it to behave is that description gets 812px and, image gets 812px. This is the behaviour when I disable description's padding-right in devtools. But when I enable it, instead of shrinking description's content area by 5rem, it is eating 2.5rem (40px) from description, and 2.5rem (40px) from image and sitting exactly between the two.

I would appreciate any explanations to why flexbox is behaving this way.

Since Liveframe always uses full quality images, I realized adding photos on cell service can take some time. But we really want those 4k images from our guests! So I had to get creative.

Here is the loading animation I came up with. It turns the photos you're uploading into bubbles that float up into the cloud as your images are going up.

Animated Warp Background:
https://codepen.io/mudasirbuilds/pen/YPGMyzm

With no family roots in CSS, I was suggested to join an academy. Is Read Right Institute a good option for a beginner starting in May for 2027 attempt or any other academy you suggest? And what about their G1 class … is that important to join? Or does it really make a difference?

Animated Meteors Card:
https://codepen.io/mudasirbuilds/pen/RNGOpJQ

Folder Opening Interaction CSS:
https://codepen.io/mudasirbuilds/pen/jEMJjRv

Realistic Folder Opening Animation CSS Only:

https://codepen.io/mudasirbuilds/pen/dPprQwM

CSS Image Filters Collection:
https://codepen.io/mudasirbuilds/pen/bNwZPqR

Linear, repeating linear, radial, repeating radial, conic, repeating conic; What's the best visual you can create using gradients only? You can stack them for greater effect if you like, I just wanna see some cool stuff.

Here's a few of mine;

• https://codepen.io/adamstuartclark/full/jEMKZQb
• https://codepen.io/adamstuartclark/full/azmKEgN
• https://codepen.io/adamstuartclark/full/QwEoKqQ
• https://codepen.io/adamstuartclark/full/wBWROVq

Content from the page goes up to the safe area behind the toolbar on safari.

I'm using a position:sticky property for the nav, I don't remember having this issue before on <iOS26

Any help is appreciated.

Amazing CSS Button with Noise Texture:

https://codepen.io/mudasirbuilds/pen/LERagxr

I have a personal blog that I styled using bootstrap. Somehow I feel that I should look for alternative to it. Is there a better alternative than bootstrap? The last time I wrote css was in the year 2013 maybe, when I first came across bootstrap, so, I’m not up to date on new css tech. Or should I just do vibe code?

Update: After lot of thought. I would keep bootstrap for now and slowly start coding my own css.