Hey folks! Trying to build a website for myself as a portfolio / resume / science communication thingy and can't seem to get the site to change size automatically when it's viewed on mobile or change color schemes when it's dark mode. First website and I'm not promoting anything other than me (and not for web design stuff, for physics stuff and for a job specifically).

My website is here if anyone want to look at the code in it's entirety, but my media queries look like this:

\@media (prefers-color-scheme: dark) {

:root {

--color-light: #49C4FE; /* deep-sky-blue */

--color-dark: #074190; /* french-blue */

}

}

\@media (max-width: 640px) {

.block-for-mobile {

display: none;

}

#base-nav {

grid-template-columns: 1fr 1fr;

}

}

Is this the way to still do it? I've only learned CSS and HTML so far and only over the last, like, two months. I just want to know if I'm doing this completely wrong. Thanks in advance.

Quick disclosure up front: I'm the developer, so take this as a "hey, I made a thing" post, not an objective recommendation.

A few years ago I went looking for a Firefox equivalent to CSS Peeper — hover a page, get its colors, fonts, and computed CSS without diving into DevTools. Turns out there isn't one. CSS Peeper has 500k+ Chrome users and its own team confirmed there were no Firefox plans, and every "any Firefox alternative?" thread I found ended the same way: no, sorry, use Chrome.

So I built one. It's called PeekCSS, and it's live on AMO now.

What it actually does:

• Hover any element, see its computed CSS grouped by type (typography, colors, spacing, effects, layout), one-click copy — no account needed for any of this
• Every color pair gets a contrast ratio with an AA/AAA badge inline, so you catch accessibility issues while you're already looking at the element
• A page-wide scan pulls every color and image in one pass instead of clicking through elements one at a time, and you can export the palette straight to CSS variables, SCSS, JSON, or a Tailwind config
• A font tab that ranks every family on the page by usage, with weights/sizes/roles broken out

It's a solo project — my first browser extension, built with WXT/TypeScript. The free tier is meant to be genuinely useful forever, not a crippled trial: hover inspection, grouped CSS, contrast badges, no account required for any of it. Account unlocks the full palette/font panels, and Pro (one-time or subscription, your call) adds the exports and bulk asset downloads.

It doesn't read or send anything about the pages you visit — the only network call it ever makes is an optional license check if you buy Pro.

It's young — three weeks out of my own testing and into a few friends' hands, still finding rough edges. If you try it, I'd genuinely like to know what breaks or what's missing compared to your DevTools habits. What's the one thing you'd want from a tool like this that I haven't mentioned?

I would love to hear your toughts: https://addons.mozilla.org/en-US/firefox/addon/peekcss/

Hi all,

I've been working on this for a while and wanted to share it: https://librarycss.com/en

What it is: a catalog of ready-to-use CSS effects. Currently 9,078 effects

across 12 categories — buttons, cards, loaders, text animations,

backgrounds, checkboxes, switches, hover, badges, forms, navigation and

tooltips.

Up front about the language: the interface is currently in Turkish. Effect

titles, descriptions and tags are in English, and code is code — so the

catalog itself is usable, but the navigation labels are not. An English

version is in progress and not live yet. Mentioning it now so nobody wastes

a click.

Why I built it: I kept landing on the same handful of CSS snippet sites,

and most of them either wall things behind ads or ship an npm package. I

didn't want to install a dependency for one button hover. Every effect here

is plain HTML + CSS — copy, paste, done. No build step, no package, no

config.

Highlights:

- Every effect has a live preview that actually runs, both in the listing

and on the detail page. Not screenshots.

- Detail pages have separate HTML / CSS / React tabs, each copyable in one

click.

- In-browser editor: open an effect, change it, see the result instantly.

Anything you open gets saved to your personal library.

- Six CSS generators: gradient, box-shadow, border-radius shaper,

cubic-bezier curve editor, glassmorphism, text-shadow.

- Ten technique guides (keyframes, clip-path, backdrop-filter, blend-mode,

mask, 3D transform and more), each with a browser support table and a

common-mistakes section. Turkish for now.

- A reference page for 70 CSS properties, each showing live examples pulled

from effects that actually use that property.

- Contribution system: submit an effect, earn points once it's approved.

Points unlock ranks and badges, there's a leaderboard, and your name

appears as a credit on the effect you contributed.

Two things I'd rather state than have you find out:

1. The first 15 lines of an effect's CSS are visible without an account; the full source needs a free signup. No payment, no card — Google or GitHub takes a few seconds. It's there to slow down scrapers pulling all 9,000 effects at once. If you think that's the wrong call, tell me.

I'd genuinely like feedback — especially "this category is missing", "this

effect is broken", or "this part of the UI is annoying". There's a report

button on the site, but replying here works too.

Thanks.

I've been using Claude Code quite intensively for the past few months, and as a former CSS integrator / front-end developer, I can't help but notice—rather sadly—that Claude is genuinely poor when it comes to CSS.

Even when using skills (the official front-end skills or UI/UX-focused ones), and even with very explicit instructions in CLAUDE.md, it still does its own thing and keeps repeating the same mistakes.

One moment of inattention, and it'll happily throw inline CSS directly into the HTML—even when that's explicitly forbidden in its instructions.

And on the (rare) occasions when you decide to step in and edit the code yourself to save some precious tokens, it quickly becomes a nightmare. Before long, you find yourself typing something like: "Just center this div."

So I have two questions:

1. Why is it so bad at CSS?

My theory is that, historically, 90% of developers have never cared much about CSS. As long as the final result looked right on the screen, code quality and maintainability were an afterthought. Throw in a few !importants, ship it, and move on.

Since Claude has been trained on an enormous number of codebases, I wonder if its primary examples are simply... bad CSS. In other words, it's reproducing the patterns it has seen most often.

2. What strategies do you use to work around this problem?

For context, what I consider good CSS is:

• generic, reusable styles;
• selectors that are as unspecific as possible;
• maximum reusability and maintainability.

Hey everyone,

I was building a chatbot with MUI and kept running into the same wall: the model answers, but the answer is just text. A lot of the time a table, a chart or a form with validation would say much more than a paragraph.

I had two options and I didn't like either:

**1. Hand-write and register a component for every scenario.** A "booking form" component, a "price table" component, a "sales chart" component. Every time the model needed to show something new, I was the one writing code. So the "generative" part of generative UI was me.

**2. Let the model emit raw HTML.** Which means XSS risk and a UI that ignores my theme. Agent output is untrusted input by definition.

So I built a third path on top of Google's A2UI protocol.

The idea: **the model emits data, not code.** A schema-validated, flat list of components referenced by id, plus a separate data model bound by JSON-Pointer. The library takes that description and renders it as real Material UI inside your own ThemeProvider.

A small example of what the model actually emits:

```

{"createSurface":{"surfaceId":"s1"}}

{"updateComponents":{"surfaceId":"s1","components":[

{"id":"root","component":"Column","children":["title","name","submit"]},

{"id":"title","component":"Text","text":"Reservation","variant":"h4"},

{"id":"name","component":"TextField","label":"Full name","value":{"path":"/name"}}

]}}

```

No colors, no CSS, no pixels — the model only states semantics, everything visual comes from your theme.

What that gets you in practice:

- 18 Basic + 16 Extended components registered out of the box (charts, table, stepper, autocomplete...), so you're not writing a component per scenario

- Streaming: components arrive piece by piece, ones that haven't arrived yet render as Skeletons

- Two-way binding: inputs are bound to the data model and update without a server round-trip

- A type that isn't in the registry never renders, and sx/style/className from the agent never reach MUI

- You can still add your own type at runtime with one call (schema + renderer), validated just as strictly as a built-in

Switch your theme and the generated UI re-skins top to bottom, which honestly was the part that made it feel worth finishing.

TypeScript, MIT. There are Gemini-powered Vite and Next.js examples in the repo, both run in demo mode with no API key.

It's early and the architecture is still moving, so I'd really appreciate feedback — especially from anyone who has dealt with generative UI or A2UI before.

Repo: https://github.com/yessGlory17/generative-mui

This is a long shot but I remember some years ago I found this article that described CSS table display as the Deadpool of CSS. Im not gonna lie, that wacky opinion piece kept me using it until I never had to have the ie compatibility talk again.

If anyone knows where to find that article or knows what im talking about, id appreciate a link just to read it again ​

Hello, so I'm learning css, specifically (full stack) and I keep getting this error message on the bottom right on VScode even tho my program working and everything, I need to know what's the error message for and how do I get rid of it.

Has anyone ever changed their mind about an agency after the first call?

I'm at the stage where every WordPress development agency starts looking the same. Nice portfolio, nice promises, similar pricing... but I know that's not what determines whether a project goes well.

I had an intro call with IT Monks this week, and it made me realize I'm probably asking the wrong questions. What ended up telling you the most about a WordPress development agency before you signed? Was there one question or one answer that completely changed your decision?

```css

body {

min-block-size: 100svh;

background: repeating-linear-gradient(#A4AAB1 2px , red 2px 15px);

}

```

this is all red how to fix ? what exactly here i am doing wrong and css is the most confusing and i feels like its more harder than python and any other programming language

Hey everyone!

I'd like to share a project I've been working on: Njectify.

It's a browser extension that lets you inject CSS and JavaScript into any website, making it easy to prototype UI changes, test styles, and experiment without modifying the original source code.

https://reddit.com/link/1uzxtm8/video/ezu0522m30eh1/player

Some of the features include:

• Live CSS editing with an intuitive editor.
• Instant visual changes on any website.
• Automatic export of your CSS to Tailwind CSS utility classes.
• JavaScript injection for quick scripting and automation.
• Several additional tools designed to speed up front-end development.

The extension has already surpassed 5,000 users on the Chrome Web Store, and I thought it might be useful for developers in this community.

I'll leave a detailed article in the comments explaining the main features, use cases, and the extension itself.

I'd really appreciate any feedback, feature suggestions, or criticism. Thankssss!

detailed post.

Current features include:

* 25-key playable keyboard

* 6 built-in instrument presets

* Polyphonic playback

* Reverb, Delay and Distortion effects

* Real-time controls

* Keyboard mapping

* Recording directly in the browser

* Export to WAV and MP3

* Responsive interface for desktop and mobile

Hi, everytime I use CSS I get triggered pretty bad because I know what it is and how to use it but I never feel confident. I always have problems with responsive design, with having my own style and I feel like I miss all the secret tricks(I am slow). What resource could I use to learn it once and for all ? I don't want to waste too much time in it and be a CSS GOD I just want to be ok with it. I know about Josh Comeau course but it is something like 70 hours and therefore too much.

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

i have a container element. (i'll call this "container".)

display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));

inside this element, i have a series of row elements. i'll call these "rows".)

display: grid;
grid-column: 1 / -1;
grid-template-columns: subgrid;

inside each of these is an unknown number of elements, mostly containers with input and select boxes and labels inside. (i'll call these "items".)

the goal is to have the items fill the width of a row if they all fit or wrap to the next line if they'd have to be less than the size (150px in this example) to all fit but to leave no space at the end of the row on the right.

each item will be the same width but there is an unknown number of them. the number in each row will always be the same for the entire container.

the reason each row is not a separate flexbox is that the goal is to have each item be the same width but that width be whatever width allows them to be as wide as possible without wrapping or, if they must wrap, be as wide as possible on as few lines as possible.

i'm aware this is a known problem with spanning columns in grids but, after hours of trying to fix it and extensive searching, i haven't been able to come up with a solution or an alternative way to achieve the result.

i'm not married to the idea of it being a grid with subgrids if there is a better solution that still allows the contents to be flexible width and unknown number while still maintaining columns vertically.

here is an example of it working properly...

here is what happens when the screen gets wider and they could stretch more but, instead, just end up with a series of extra empty columns on the right of each row...

the styling of the icons is temporary and they will not be in that location in the final result but they remain there at the moment for backend testing as i try to fix this column issue.

anyone solved this before?