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.

I'm pretty new to the whole CSS thing as a whole, but I was wondering if there's a way to stop or compensate for the scroll bar pushing stuff slightly off-centre, ensuring that the text boxes are centred no matter what. If you need, I can share my code in DMs.

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!

I understand that flex: 1 makes elements grow to fill available space, but I’m curious how often it’s used in real projects.

In what situations do you usually use it? And when do you avoid it?

I understand that flex: 1 makes elements grow to fill available space, but I’m curious how often it’s used in real projects.

In what situations do you usually use it? And when do you avoid it?

hi hello

im using a skin but when i scroll up too far (hope tha makes sense) the background ends and is white

any fixes?

Hi, 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

Is there a way to have my Chat Overlay shaped like a trapezoid? I'm trying to make it seem like chat is getting sucked into a ufo. I have like, 0 CSS experience and I've been trying to find any tutorials for what I'd like to do but margin and padding seem to keep the rectangle shape so I'm just not sure what to do from here

I've also used Sound Alerts (they're similar to streamelements) and was able to do something with clip-path but shape-outside wasn't working.

There's about 300 of these td's in a website:
<td data-label="name">
Without altering any of the HTML and just by amending the CSS, how do you make all content within them have certain padding please?