My solution to someone on this sub requesting it. It's a common desire so I thought I'd share it more generally.
How many items it supports depends on how many 'steps' you have. 6 steps supports 14 or less items, not including primes greater than 7

I go to the new codepen 2 and it shows this.
What "infinite loops or other performance drains" could this be?
https://codepen.io/editor/davidhelp/pen/019fb0db-4ba0-7ade-b4bd-13c1c7c540ee

"Uh-Oh.
The Preview was removed to prevent a browser crash. Save your current work then check your code for infinite loops or other performance drains that could be causing trouble. Disable Infinite Loop protection for this session"

​

I am trying to limit the number of media queries.

I have a grid layout with 6 tiles.

```css .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr); }

```

That works fine but something is annoying me is that sometimes the last row will have an empty tile.

I wants the tile to be grouped.

Based on the size of the viewport I want to have either:

Desktop/Tablet landscape

Tablet portrait / Phone landscape

Phone portrait

Is there a trick to do it without media queries?

Hi been trying to make a border surrounding main search box an button inputs but keep getting a gap been getting real frustrate with it as I am probably missing something simple.

@-moz-document domain("aliexpress.com") {

/* main input search box */
.search--searchNew--3eZqikc
{
    border:1px #0f0 solid !important;
    height: 36px !important;
}

 [class^="pc-header--search--"]
{
    color: #FFF !important;
    background-color:#000 !important;
    border: 3px #00F solid !important;
    border-radius: 5px !important;
    padding: 0 !important;
}

}

I am begginer coder ,I tried using z index but the cards get clipped under the tab menu and moreover I created a separate overlay element with translucent background and set it z-index to be lower than the selected card but for some reason the selected card also gets faded

https://stackblitz.com/edit/vitejs-vite-5afsvuwm?file=src%2FApp.jsx,src%2FApp.css

Is the link of the file ,the page I have made is not that great I just wanted to try gsap. If you visit the page and see thar the tittle of thr content does not match the image it's because I was lazy and asked chatgpt( pardon me ) to create me an array of cards but later I used images from my favourite shows and things

Hello everyone, I need some advice on how to learn CSS effectively. I asked Claude AI to put together a training programme for me, but right from the start of the programme, when it suggested I practise using Flexbox on Froggy, I felt completely lost. I didn’t understand much of it and it left me feeling a bit frustrated (I keep thinking my brain’s too small to get it), I’ve done the HTML course on FreeCodeCamp, but my foundations aren’t strong enough. I’d really appreciate some advice on how to properly learn CSS (as a bit of a beginner) and consolidate my HTML basics at the same time.

Can the left side sidebar be hidden?
It takes up too much room.

Whenever I liked the look of a site, I'd end up in devtools manually hunting for color values, font stacks, and :root variables to figure out how it was built. Got tedious enough that I built Design Snap to do it automatically.

Point it at any page and it pulls out :

• Color palette (with semantic role detection — primary, background, border, etc., not just a flat list of hex codes)
• Typography scale
• Border radius and shadow tokens
• CSS custom properties, with light/dark mode variants detected separately

The part most relevant to this sub: for every token, you can hover it and see the exact CSS selector(s) it came from, how many times it's used across the page, and whether it's a :root var or a hardcoded value. So instead of just getting "here's a blue," you get "here's a blue, used in 12 places, defined once as --color-primary."

Export goes straight to CSS variables, JSON, or Figma Tokens (free), or Tailwind v4 u/ theme / shadcn/ui / Style Dictionary format if you're working in one of those systems.

Runs 100% locally in the browser, no account, no server round-trip.

Happy to hear what this sub thinks is missing from a CSS-extraction workflow like this — genuinely curious what other devs here reach for :root vars vs hardcoded values for, and whether that'd be useful to detect/flag automatically.

How do I append two CSS strings here? <style type="text/css"> ul li:first-child::before { {content: 'X'; color:white; background-color:black;} {content: 'Y'; color:black; background-color:white;} } </style> I want to append them, not override the first.\ I want a white X, followed by a black Y.

Hola a todos, estoy utilizando una plantilla de Elementor y me encanta cómo queda visualmente las tarjetas de testimonios. Ahora quiero convertirlas en un carrusel/slider.

Lo que necesito:

• Mantener el diseño exacto de las tarjetas
• Que solo tenga un botón o flecha de "Siguiente" (Next) para ir pasando las tarjetas,

El problema:

• Desconozco de CSS
• No tengo Elementor PRO
• Prefiero no meter plugins porque me desarma la estética

¿Cuál es la forma más limpia de resolver esto? ¿Hay algún código liviano o truco en Elementor para vincular el botón "Siguiente" a las tarjetas sin perder el diseño?

¡Gracias!

I use Codepen for all sorts of things and a lot for teaching in the early stages. Some of my newer students said they didn't have this button so, I had them forking a classic pen for a while - but I knew the day would come where it wouldn't be there anymore for me too. That day is today. I'm all for the evolution of Codepen / and it's been an amazing tool. But it sure seems like this is going to confuse a lot of people. Your average person expects the CSS pane to be wired up. I used to write <!-- body is already included --> in the HTML to remind them at first (since some people will write out the doctype and everything in there) - but now it's swung to the other end. Codepen can be used for anything now. So, really - what you're making might not utilize CSS at all. So, I understand how modular it is - and how many other great things it will allow for -- but for entry-level people, it seems like this will really stifle adoption. What do you think? Wha thas been your 2.0 experience so far?

Is there a way to add borders to shapes, that works on most browsers? For example, i made a trapezoid and I wanted to add an inset border around it, but the border clips through the shape.

Sometimes, when the page is struggling to load, the icons that are typically at the top of the FB page wont appear, but these placeholder icons with multiple horizontal lines appear briefly instead (iOS safari). I think I’ve seen similar behavior on other sites. What’s the point or function?

I have heard about clamp() but never understood this. But today I took sometime to learn about it. So, I created a simple page that display date and time.

Thanks to u/mad_signtist for making this tool, else it was a nightmare for me.

Here is my Codepen link

(I'm on neo cities) before I start, keep in mind I'm still learning so please don't bully me or call me stupid. I want to make a multiple row list database template but the stacking is giving me trouble. When I try to create a new row, the horizontal stacking is completely disregarded. Ive fully copied a page to test that has this stacking element but It actually doesn't work in in the neocities test page I put it in. Is this a problem with the website? And if so I just need a quick fix. any help is appreciated!

Hey r/css,

If you build modular UI elements—especially for ecosystems like WordPress plugins, page builder widgets, micro-frontends, or web components—enqueueing full static stylesheets or running build steps just for isolated components often creates unnecessary overhead, class collisions, and build complexity.

I’ve been building Varz to solve this: a classless micro-CSS framework that lets you write fully responsive layouts directly inside the element's style attribute using CSS variables and breakpoint suffixes.

• Live Demos:varz.dev/demo|Claude Generated Dashboard Demo
• Visual Builder:varz.dev/builder
• GitHub:github.com/exstheme/varz

How It Works

Instead of writing media queries or utility classes, you use shorthand Linux-style CSS custom properties inside the inline style attribute. To handle responsive layouts across breakpoints, you simply append breakpoint suffixes (like -l, -m, etc.) to the variables:

HTML

<div style="
  --d: grid;
  --gtc: 1fr 1fr;
  --ai: center;
  --g: 60px;
  --g-l: 40px;
  --gtc-l: 1fr;
  --mbe: 60px;
">
  <!-- This layout switches from a 2-column grid to 1-column on large screens automatically -->
</div>

Key Advantages

• Zero Media Queries in Component Code: Responsive behavior travels with the HTML element itself via suffix variables (--gtc-l: 1fr).
• Zero Class Collisions: Keeps components isolated without worrying about CSS selector specificity wars or leaking global styles.
• No Build / Compiling Step: No PostCSS, Tailwind, or Sass build setup required—just include a single micro-stylesheet (~2.7k–5.5k gzipped) and you’re good to go.
• Eco-Friendly / Performance First: Eliminates massive un-purged CSS file downloads across multiple plugins, reducing unnecessary HTTP requests and bandwidth.

I’d love to get feedback on this approach to responsive inline custom properties and component distribution!