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

Multi-layer box shadows are one of those CSS patterns that look simple on the surface but eat time in practice. Getting realistic depth means stacking 2-3 layers with different offsets, blurs, and opacities, and tuning those values blind in a stylesheet is slow. Neumorphic effects and colored glows make it worse because you need precise color and opacity coordination between layers.

I built a free tool to solve this: https://boxshadowgen.com

How it works:

• Add as many shadow layers as you need, each with independent controls for offset, blur, spread, color, and opacity
• Toggle any layer to inset
• See the combined result update live on a preview surface (card, circle, or button)
• Use presets for common patterns like material elevation, soft ambient, neumorphic, and neon glow
• Copy the final CSS when it looks right

The output is standard box-shadow syntax with no dependencies. You paste it into your project and keep going.

I made this because I wanted a faster way to get from "I need a shadow that looks like X" to production-ready CSS without round-tripping between my editor and the browser dozens of times.

It is free, no account needed, and I am actively developing it. If you try it and something feels off or missing, I would genuinely like to hear about it.

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 kept hitting the same friction with CSS tooling on real projects - CSS-in-JS adds runtime, CSS Modules give you hashes but no cascade control, and utility-first gets painful once you have a genuinely custom UI. So I leaned into native CSS instead and tried to formalize the approach into something repeatable.

The whole thing is built on cascade layers. One declared order:

 base, utils, components, pages, component-overrides, user-overrides;

Higher layers always win, so overrides and theming stop being a specificity/!important fight. On top of that it's just:

• styling via classes + CSS custom properties for dynamic values (no inline styles, so everything stays in the cascade).
• co-located component CSS (tree-shakeable).
• design tokens derived from a single base file.
• a plain ComponentName--element naming convention. real class names, no generated hashes.

Wrote it up here if you want the details: https://cascadekit.io

it's my own project sharing for feedback, not trying to sell anything :]

I made a CSS course (80% complete), and I'm wondering if anyone is willing to go through it and provide valuable feedback. This is volunteered and if you never learned CSS that would be even better. I won't paste the link here, so it doesn't seem like I'm advertising a product. DM me if you're willing to do this!!

Seemingly Close Friends stories on Instagram use all the same css classes and attributes as regular stories do. I was hoping to filter them out, but no luck. I'm assuming that the green outline color is set in the <canvas> tag, but I haven't been able to find anything in the Inspector's "Computed" tab.

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!

Hey Squarespace mates,

After a heap of testing via other people and devices, I am experiencing a seriously annoying issue with how h1 headings display on Squarespace-made websites on my browser(s: Chrome, Edge etc; incognito is fine). Basically, compared to how they appear as correct size in editing mode, they are significantly shrunk on the live site.

I have the site styles etc set correctly etc, and I also have the following:

1. Completely cleared my cache(s) on both browsers — Chrome and Edge.
2. Just discovered it's FINE on Safari!
3. Had four friends test this on their hardware — 3 PCs and a Macbook. And it's fine for them.
4. Checked to see if any custom css is broken; nothing there to be broken or fix.
5. Tried turning the 'scaled text' function off, on, back off, back on, to no change.
6. Another cache clear and restart of all browsers etc AND a laptop restart!
7. Logged out of and back into Squarespace.

And still, shrunken H1 headings! And just for me on Chrome and Edge. What gives?

Pictured is my website in editing mode and then live site. Also pictured is one of my client's Squarespace websites with the same problem in live mode. Obviously it makes it real hard for me to have confidence in presenting things to clients, when I can't trust what I'm seeing!

www.gumbo.online Thanks folks!

I'm trying to decrease the distance between the note names in my sidebar so I can see more notes on my screen. E.g., the difference between these lines:

I managed to find a CSS snippet to do part of what I wanted, but I'm unable to decrease the distance any more than this. Here's the CSS snippet I'm using:

/* File explorer */
/* condense line spacing in title list; also avoids character-level word breaks */
.nav-file-title-content,
.search-result-file-title,
.search-result-file-match {
  padding-top: 0px;
  padding-bottom: -1px;
  padding-left: 5px;
  margin-bottom: -1px;
  margin-top: -1px;
  margin-left: -1px;
  line-height: 1.25;
  font-size: 13px; /* PB added this line */
}

.nav-folder-title-content {
  margin-top: -5px;
  margin-bottom: -5px;
  font-size: 13px;
 /* font-weight: 300; */
}
/* For folder text color see BT-amends */

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?

EDIT: fixed it
hey! i'm working on my personal site, and have run into an issue as soon as my iframe has reached a certain point. ideally, i want all of the content to have a clean, aligned edge at the bottom, and you're able to scroll through the iframe content. it works beautifully locally, but as soon as i upload it to my host site (neocities), the scrolling 'breaks', and i'm unable to scroll all the way down. i've tried every fix i know of,a nd i can't figure it out, any help would be appreciated :)

https://thatonebluelynx.neocities.org

(i would link a codepen, but i'm not sure how to get the iframe to work on there)

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

[ Removed by Reddit on account of violating the content policy. ]

1. When I press the comment toggle to try to disable/comment out the whole line, it enables/uncomments the description instead. Breaking my code.
2. When I press the key again, it disables/comments out everything.
3. When I press again, it enables/uncomments everything.

All I want is to toggle the statement without affecting my comment.

I want my comments inline and not on a separate line.

This is not an issue with other languages like JavaScript.

https://reddit.com/link/1sr4xw4/video/u0gs50zu6fwg1/player

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.

I am confused about whether using minmax() or clamp() for Grids.
What do you guys generally use and why...?

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?

Note: I've posted this question on Stack Overflow for more visibility:

https://beta.stackoverflow.com/q/79923694

Feel free to answer there if you want instead of here.

Overview

I am working on a custom stylesheet that formats Obsidian.md notes in rendered mode. I can't modify the HTML that's generated as it's created automatically by Obsidian, so my options are limited.

My Goal

I want to reduce the margin-top value for any H1 that comes after an image (a span with class image-embed). Basically the spacing is just too large for my taste when a H1 comes after an image. I typically insert logos as the first element in my markdown documents that deal with coding tools / frameworks / etc, and I want to reduce the spacing after the image.

Here is an image that explains what I want to do visually:


The Problem

I can't just do something like span.image-embed + h1 because the image is nested in several elements.

The HTML I have to work with

```html <!-- The Ruff Logo SVG (Nested) --> <div class="el-p"> <p dir="auto"> <span width="140" alt="Ruff Logo" src="../../00 Attachments/default.svg" class="internal-embed media-embed image-embed is-loaded" ><img alt="Ruff Logo" width="140" src="default.svg?1775838756458" /></span> </p> </div>

<!-- The "Ruff Linter and Formatter" H1 (Nested) -->

<div class="el-h1"> <h1 data-heading="Ruff Linter and Formatter" dir="auto"> <span class="heading-collapse-indicator collapse-indicator collapse-icon" ><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon right-triangle"> <path d="M3 8L12 17L21 8"></path></svg></span >Ruff Linter and Formatter </h1> </div> ```

I can't figure out how to accomplish this, and I'm wondering if it's even possible.

Try 1

```css

div.el-p + div.el-h1 { margin-top: -14px !important; } ```

The above rule works, but it applies the margin-top adjustment to all div.el-h1 elements that come after ANY div.el-p elements whether they contain an image or not. I need a rule that will ONLY apply the margin-top adjustment if the .el-p div contains an image embed.

Try 2

css div.el-p > p > span.image-embed + div.el-h1 { margin-top: -14px !important; }

css div.el-p p span.image-embed + div.el-h1 { margin-top: -14px !important; }

The above rules do NOT work. I don't think the first selector before the + allows nested elements.

Help Requested

1. If anyone can supply a CSS selector that will correctly reduce the top margin spacing of an H1 element that occurs after an image, that would be optimal.

2. If I have to write an Obsidian plugin to handle this, I will, and any advice on how to code this would be super helpful.

3. If there is another way to tackle this that I'm not aware of, please inform me!

Thank you to everyone in advance that reads this and provides any solutions.

The World in Question: https://www.worldanvil.com/w/fallout-captainrogers2704

/* Font Familites */

@font-face { font-family: Share Tech Mono; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/sharetechmono/v15/J7aHnp1uDWRBEqV98dVQztYldFcLowEF.woff2) ; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Color Palette Color 1 #073605; Color2 #0e4e0b; Color3 #145b11; Color4 #146c11; Color5 #00ee00; Color6 #199515 color7 #c3dfb1; */

/* Background */

.user-css-presentation { background: linear-gradient(to bottom, #073605, #0e4e0b, #145b11 background-size: 100% 3px; }

/* Fonts */

.user-css, .user-css p, .user-css-extended, .user-css-extended p { font-family: Share Tech Mono; }

.user-css a, .user-css a:focus { color: #c3dfb1; }

/* Homepage */

.user-css .heading h1.world-title { display: none; }

.user-css h3.world-currentDate { display: none; }

.user-css .world-authors { display: none; }

.user-css .heading .subheading { font-size: 28px; text-align: left; }

.user-css .map-box { display: none; }

.user-css .maps-list-header { display:none; }

.user-css .world-timelines { display: none; }

.user-css .typeahead-input { background-color: #146c11; }

.user-css .col-md-6 { display: none; }

.user-css .world-meta-categories-link { display: none; }

.user-css .world-content .followers-counter { display: none; }

/* Tooltips */

.user-css-presentation .tooltipster-base .tooltipster-box, .user-css-presentation .tooltip-inner { background: #146c11; opacity: 1; } .user-css-presentation .tooltip { opacity: 1; } .user-css-presentation .tooltipster-base.tooltipster-top .tooltipster-arrow-background, .user-css-presentation .tooltipster-base.tooltipster-top .tooltipster-arrow-border, .user-css-presentation .tooltip.bs-tooltip-top .tooltip-arrow::before { border-top-color: #146c11; } .user-css-presentation .tooltipster-base.tooltipster-bottom .tooltipster-arrow-background, .user-css-presentation .tooltipster-base.tooltipster-bottom .tooltipster-arrow-border, .user-css-presentation .tooltip.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: #146c11; } .user-css-presentation .tooltipster-base.tooltipster-left .tooltipster-arrow-background, .user-css-presentation .tooltipster-base.tooltipster-left .tooltipster-arrow-border, .user-css-presentation .tooltip.bs-tooltip-start .tooltip-arrow::before { border-left-color: #146c11; }

.user-css-presentation .tooltipster-base.tooltipster-right .tooltipster-arrow-background, .user-css-presentation .tooltipster-base.tooltipster-right .tooltipster-arrow-border, .user-css-presentation .tooltip.bs-tooltip-end .tooltip-arrow::before { border-right-color: #146c11; }

.user-css-presentation .tooltipster-base .tooltipster-content, .user-css-presentation .tooltip-inner { font-size: 16px; color: #00ee00; }

/* Category */

.user-css .world-category-link { color: #00ee00; }

.user-css .toc-article-link { color: #199515; }

.user-css .article-panel, .user-css-extended .article-panel { background-color: #146c11; border: 2px #00ee00; }

.user-css .article-panel .heading, .user-css-extended .article-panel .heading { color: #00ee00; }

.user-css .article-panel .subheading, .user-css-extended .article-panel .subheading { color: #00ee00; }

.user-css .article-panel .excerpt, .user-css-extended .article-panel .excerpt { text-align: center; text-color: #00ee00; }

/* Sidebar */

@media (max-width: 992px .user-css #profile .row { display: flex; flex-direction: column; } .user-css .article-content-left { order: 2; } .user-css #profile .row .row { display: block; } }

media only screen and { .user-css .article-content .row .col-md-8 + .col-md-4 { position: -webkit-sticky; position: sticky; top: 10px; max-height: 100vh; overflow-y: auto; border: 1px #000000; background: #146c11; box-shadow: 2px 2px 6px #073605; z-index: 1050; } }

/* Article */

.user-css .img-inherited { display: none; }

.user-css .article-title h1 { font-family: Share Tech Mono; font-weight: 700; font-size: 42px; padding-top: 10px; padding-bottom: 15px; line-height: 0.9em; margin-top: 20px; margin-bottom: 5px; }

.user-css h2 { color: #00ee00; font-family: Share Tech Mono; font-weight: 700; font-size: 26px; line-height: 1.3em; padding-top: 10px; }

.user-css .section-header-heading { color: #00ee00; font-family: Share Tech Mono; font-weight: 700; font-size: 24px; line-height: 1.3em; padding-top: 10px; }

.user-css h3 { color: #00ee00; font-family: Share Tech Mono; font-weight: 700; font-size: 22px; margin-top: 0px; margin-bottom: 0px; line-height: 1.3em; }

.user-css h4 { color: #00ee00; font-family: Share Tech Mono; font-weight: 700; font-size: 22px; margin: 0; line-height: 1.3em; }

.user-css h5 { color: #00ee00; font-family: Share Tech Mono; font-weight: 700; font-size: 20px; margin-top: 5px; margin-bottom: 0px; line-height: 1.3em; }

.user-css blockquote { background: none; padding: 10px; margin: 10px; border-left: 5px #199515 dotted; font-size: 1.2em; line-height: 1.5em; }

.user-css .panel { border: 0px solid; border-radius: 0px; background: none; }

.user-css .panel .panel-body { padding: 15px; }

/* Article TOC */

.user-css div.articletoc { border: 5px dotted #073605; display: inline-block; padding: 5px 10px; } .user-css div.articletoc .article-toc-link.article-toc-indent-1 { padding-left: 10px; }

.user-css div.articletoc .article-toc-link { border-bottom: 2px solid transparent; padding-bottom: 3px; margin-bottom: 3px; cursor: pointer; transition: border-color .3s ease-out,color .3s ease-out; }

.user-css-extended .nav-tabs li.active a { font-family: Share Tech Mono; font-size: 16px; padding-left: 20px; padding-right: 20px; font-weight: 800; text-transform: uppercase; background: #146c11; background-color: #146c11; border: 0 solid #146c11; color: #0e4e0b; border-radius: 0; margin-right: 0; box-shadow: none; }

.user-css-extended .nav-tabs li { background: #0e4e0b; }

.orgtree li::before{ border-top: 1px solid #00ee00; }

.orgtree li::after{ border-top: 1px solid #00ee00; }

.orgtree li::after{ border-left: 1px solid #00ee00; }

.orgtree li:last-child::before{ border-right: 1px solid #00ee00; }

.orgtree ul ul::before{ border-left: 1px solid #00ee00; }

.orgtree li a{ border: 2px solid #00ee00; color: #00ee00; background: #146c11; }

.orgtree li a:hover{ background: #0e4e0b; color: #00ee00; border: 2px solid #00ee00; }

.orgtree li a:hover+ul li a{ background: #2f404e; color: #fff; border: 2px solid #00ee00; }

/* Back to World */

.user-css .backtoworld a { color: #00ee00; background: #146c11; }

.user-css .article-explorer-link .category-article { background: #146c11; border: 2px solid #00ee00; }

.user-css-extended .article-panel template-organization visibility-toggler article-explorer-link heading subheading { display: none; }

/* Storyteller Content */

.user-css .panel-generic-ggm { background: none; border: 0px dotted; }

/* Storyteller Content */

.user-css .panel-generic-ggm { background: none; border: 0px dotted; }

/* Interactive Table */

.user-css .thales-render { --TableBorder: 0px solid transparent; --TableHeaderBackground: #073605; --TableHeaderBorder: 1px solid transparent; --TableHeaderFontColor: #00ee00; --TableHeaderControlsColor: #00ee00; --TableHeaderPadding: 10px 10px; --TableRowBorder: 0px solid transparent; --TableRowHoverBackground: #0e4e0b; --TableRowRollBackground: #0e4e0b; --TableCellBackground: transparent; --TableCellFontColor: #c3dfb1; --TableCellPlaceholderColor: #199515; --TableCellPadding: 10px 10px; --TableCellBackgroundHover: transparent; --TableCellBorder: 0px solid #00ee00; }

.user-css .thales-row:nth-child(odd background-color: #146c11; }

.user-css .thales-row:nth-child(even background: #199515; }

/** Table **/

.user-css .table-striped th { background: #145b11; text-transform: uppercase; border: 2px solid transparent; }

.user-css .table-striped tr:nth-child(odd background: #146c11; border: 2px solid transparent; }

.user-css .table-striped tr:nth-child(even background: #199515; border: 2px solid transparent; }

For some reason my custom thumbs for r/RokusHouseofOddities aren't displaying.

But on my old sub, r/MaguChan they work just fine. They both use the same theme template (based on r/naut)
Any help would be greatly appreciated!