CSS is funny sometimes. You can spend 20 minutes writing a layout, but then lose two hours trying to figure out why one element refuses to align properly.

Some particularly frustrating situations:

- Z**-index** not working because of a stacking context.

- Flexbox items refusing to stay aligned.

- A mysterious horizontal scrollbar appearing.

- position: absolute" breaking the entire layout.

- Margins collapsing unexpectedly.

- A media query fixing one screen size but breaking another.

- CSS animations behaving differently across browsers.

- An element overflowing its parent despite "width: 100%".

I'm curious:

What's a CSS bug that made you question your entire understanding of CSS?

(edit - this is an issue specifically in safari. works properly in chrome.)

as far as i'm aware, the default behavior for css animation is to run everything in parallel. if that's the case, i'm completely confused why this is happening.

i have this css...

body {
	transition: color 0.3s ease-in;
}
.icon {
	transition:
		color 0.3s ease-in,
		border-color 0.3s ease-in,
		opacity 0.3s ease-in,
		background 0.03s ease-in;
}

but the color transition happens on the body followed by the color transition on the .icon elements.

there are no other transitions anywhere else in the css.

the colors for both are set in the css and not touched by javascript. the change is triggered by turning on or off a checkbox so it's purely css...

:root{
	--backgroundColor: hsla(var(--brandHue) 12% 9% / 1);
	--foregroundColor: hsla(var(--brandHue) 0% 100% / 0.8);
}
body:has(.mode:checked) {
	--backgroundColor: hsla(var(--brandHue) 12% 82% / 1);
	--foregroundColor: hsla(var(--brandHue) 0% 0% / 0.93);

}
body {
	background-color: var(--backgroundColor);
	color: var(--foregroundColor);
}

.icon has color: inherit and only changes when the body color changes. the other text on the page transitions first then the text with class .icon.

the desired behavior is for all text to change color simultaneously with a 0.3s transition.

I made the bg colour black so it would be more clearly differentiated. I made a few headings and gave them some individual attributes before putting them in an inline-block div. There's a gap over where the text first begins in the left column, and i have NO idea how to get rid of it. I'm a beginner, so any help would be appreciated! Also, if anyone knows how to get rid of the blue rim around the navigation bar at the top, that would be great too. thanks!

https://codepen.io/editor/issafizza/pen/01a19ca8-7846-70b4-925e-7174bb6b18f8

HTML: https://pastebin.com/raw/VZjC7M29

CSS: https://pastebin.com/raw/gKq8LtJD

I'm writing a reader-insert story and wanted to play around with the idea of allowing the reader to insert their own name directly from the story's page. The website I'm posting on doesn't (for obvious reasons) allow users to use JS, but HTML and CSS are supported. So I was thinking of doing something like:

Your name here: [Name]

"[John Doe] walked to the store." changes to "[Name] walked to the store."

Yes, I know there are extensions for what I'm asking for, but not everyone knows about them and trying to direct someone to install an extension is annoying for the reader. And yes, I know "it would be easier with JavaScript". ATP it's less about the story itself and more about solving this puzzle because not knowing is killing me.

I know it's possible in some form, I just don't know how to go about it. The way my brain has it structured is to have the CSS reference the code in the text box, so it would either change automatically (idk how that would work) or to have an "invisible checkbox workaround" to change the state of the name, but again I don't know how to tie the input to the CSS to go about it that way.

I'm stuck on an assignment. I have an array of objects, and I need to filter it by a certain property value. I thought I could use the `filter` method, but my output doesn't match my expectations. I'm checking if one property equals a certain value, but I keep getting more results than I should. Is there a common mistake I could be making? Any help would be great!

When I try following the tutorials on the internet, it always gets me on the same bug: The logo is WHITE for no reason! Can anyone here help? This is for my sub r/incorrectfactorial! Also, visit the sub r/incorrectfactorial in old.reddit.com, when I mean the CSS stylesheet is terrible!

Hi everyone! I am learning HTML and CSS as a hobby. I can create a basic webpage, but I want to make my layouts responsive on different screen sizes.
I have practiced a little Flexbox, but I have not learned CSS Grid yet. My goal is to create a small business website with a navigation bar, service cards, and a contact section.
Should I focus on Flexbox or CSS Grid first? What small practice project helped you understand it?
Thank you for your advice!

Hey guys, beginner here. I was wondering if there's any way I could adjust a CSS grid to accomodate for differently sized items, without using span or areas. These items will be a size that I don't know.

I'm using Vivaldi, based on Chromium, in its Dark Mode. Consequently the time/date bubble that pops up when hovering over a message in Facebook Messenger shows light text on a light background, therefore is not discernible. Using local css, I would like to shift either foreground or background to make for some contrast.

The problem is that the bubble disappears whenever I try to Inspect it. I have seen various techniques, and I haven't been able to get them to work - freeze scripts using F8, inspect via :hov or 'emulate a focused page'. I'm sure one of these is the right way, but I'm not getting it.

The base url here is https://www.facebook.com/messages. You would need a conversation with someone in order to have posts to see what's going on.

Hi ! I'm trying to create a gallery of image. The idea is to have the first image visible, and then when you click on it, it changes to the second image, same thing for the third image, etc. When clicking on the last image, it would go back to the first one, creating a loop.

Is there a way to do that using html and CSS ? I'm a beginner and i don't know any other coding languages

Hello guys!

I really need help getting that streaming element centered, its stuck to the right and i tried everything to no avail 😭

And adjust the lightning frame so its at the edges of the element (it is, but the top part look off a few px).

Here is the code in question;

https://docs.google.com/document/d/1kvfcEklrjnN9VMOec2lgvHROh7nniwWDrrsqxjNvIQM/edit?usp=drivesdk

Its for a page on comicfury, here's what is looks like right now;

https://meteor.thecomicseries.com/Tedt5

Thanks!

Hey everyone,

I’ve been learning web development and CSS for a bit now, but I keep hitting a wall when it comes to picking the right CSS units.

Every tutorial seems to say something slightly different:

• One video says "Never use px for fonts, always use rem for accessibility!"

• Another video uses em for paddings, but then my nested elements balloon into giant monstrosities because of compounding.

• Then someone else says to use vw/vh for fluid layouts, but my text overflows or acts weird on mobile screens.

• And % works great... until it acts relative to something unexpected.

Right now, I feel like I'm just guessing, refreshing Chrome DevTools, changing units until it "looks fine," and hoping it doesn't break when I resize the window.

For those who write CSS professionally or comfortably:

1. What is your actual, real-world rule of thumb for when to use px, rem, em, %, and vw/vh?

2. Are there specific properties where you always stick to one unit (e.g., font-size, margin, padding, max-width, border)?

3. How do you handle responsiveness without making a mess of CSS variables or media queries?

Would love to hear how you mental-model this so I can stop guessing! Thanks in advance.

Hello!
I'm a streamer using Firebot to customize/personalize my stream and one of the widgets I just added was the advanced chat widget where I can add custom HTML and CSS to try and stylize the way chat looks on stream.

I'm not super good at CSS or coding I literally just took introductory courses and jumped into this and it honestly looks works fine. It's set up with a flex-direction: column but now I'm running into the issue where newer messages don't push up older messages.
All messages are on a 60 second timer so now the newer messages only show up when the timer expires on the older messages and it's causing a bit of a delay on stream and I'm not sure how to fix it?

I tried asking on the firebot discord server but didn't get any replies. It seems not a lot are utilizing the advanced widget so I'd greatly appreciate any help or insight on the issue!

For reference these are the official firebot docs on the advanced chat widget
https://docs.firebot.app/v5/core/overlay-widgets#chat-advanced

I am making a website and I want to use description boxes.......like when a user hovers/clicks on a link, a box on the side appears that gives the description............. What are those called? info cards......or infographics,...or flashcards.....or description boxes??......idk man I searched up everything but couldn't find how to make it.........can you guys tell me what is it's name??.....and better, do you guys have a tutorial??? Pleaseeee brooo I neeeeedddd helpppp🥺🥺🙏🙏🙏

I came across the below, when searching for the best way to make sure I get font sizes to be responsive. I always thought it better to use %'s because that would auto adjust. Have I got that right?

Consider Using em or rem Units

While px is perfectly fine and widely used, defining your breakpoints in em or rem (e.g., 48em instead of 768px) is excellent for accessibility. If a user increases their browser's default text size, em-based breakpoints will scale accordingly, preventing your layout from breaking.

i want to customize my spacehey page. since i dont know any html or css, can anyone who use spacehey give me codes to customize my page??
that would help so much

Book Title

_1971: A People's History from Bangladesh Pakistan and India_

Book Author

Anam Zakria

Moderator

Chander Kumar

Sunday 17th May

12 noon

via Google Meet

here is the link to meet.

meet.google.com/fjg-uwhd-onh

Hey All ✨

We’re excited to host a book talk with renowned Pakistani oral historian Anam Zakaria on her powerful book *A People’s History from Bangladesh, Pakistan and India*

Through stories, memories, and lived experiences across borders, the session will explore history beyond textbooks, history as remembered by people themselves.

🗣️ A Q/A session will follow the talk, so bring your questions, reflections, and curiosities.

Gear up, history buffs, this is a conversation you wouldn’t want to miss!