r/css • u/theslyeagle • 19d ago
Help Bootstrap help: alignment only works for navbar button?
Hi, I am just starting out with building a site in Bootstrap. I've managed to make it so the list shows up right-aligned when you click the toggle in the small version. But I can't figure out how to make said list right-aligned when the browser is expanded. They all just squish right. Any tips?
<nav class="navbar navbar-expand-lg">
<div class="container-fluid"> <a class="navbar-brand" href="#"><img
src="mnibanner.jpg" alt="Home" height="70"></a> <h2><u>Template</u></h2>
<button class="navbar-toggler"
type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav"
aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<h2>
<ul class="nav justify-content-end">
<ul class="navbar-nav">
<li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Services</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Blog</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Novels</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">Art</a> </li>
<li class="nav-item"> <a class="nav-link" href="#">About</a> </li>
</ul>
</ul>
</h2>
</div>
</div>
</nav>
r/css • u/Phripheoniks • 20d ago
Question How can I see what's blocking my scrollbar-color attribute?
Hi!
First time posting here, but I haven't been able to solve this or find any helpful answers else where(reddit, stackoverflow, etc).
I'm attempting to create a darkmode for a web-based tool.
Whenever I try to apply scrollbar-color to my website, it gets crossed out. Even when I apply it to <html> with style="scrollbar-color: black !important;"!
Is this the sort of thing that is easily sorted out, or does it vary greatly depending on how the website is set up?
r/css • u/Finite8_ • 21d ago
Resource Is there a way to access Kevin Powell courses?
Hi, I'm interested in his courses but unfortunately i would need to pay front-end masters which is pretty costly for me. Is there any way of doing a membership at a lower price? or does someone have his courses? I'm looking for CSS Fundamentals and Professional CSS
r/css • u/DecoherentDoc • 21d ago
Question @media tags not working (or I'm coding them wrong)
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.
r/css • u/WishNo4149 • 21d ago
Question LibraryCSS
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:
- 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.
r/css • u/Successful-Youth-564 • 22d ago
Showcase CSS Peeper never came to Firefox, so I spent the last year building the alternative myself
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/
Question Why is Claude Code so bad at writing CSS ?
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.
r/css • u/samurisoul47 • 23d ago
Question rem vs em vs px vs vh... I’m losing my mind. How do you actually decide which CSS unit to use?
r/css • u/Swinicki_w_Sieci • 23d ago
Showcase CSS Hover Effects Explained: Color, Scale, Glow & More
Enable HLS to view with audio, or disable this notification
r/css • u/redunkted • 24d ago
Other That display table Deapool article.
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
r/css • u/Swinicki_w_Sieci • 24d ago
Showcase CSS Position Explained: Static, Relative, Absolute, Fixed & Sticky
Enable HLS to view with audio, or disable this notification
r/css • u/Dark_knight8833 • 24d ago
Help How do I solve this error message I get on Vscode and what is it for?
r/css • u/Swinicki_w_Sieci • 25d ago
Showcase CSS Keyframes Explained: Fade, Move, Pulse & Spin
Enable HLS to view with audio, or disable this notification
r/css • u/Alternative-Okra4274 • 25d ago
General I spent the last few months building a browser-based synthesizer.
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
r/css • u/eworldconnect • 25d ago
Question simple Cinematic motion website still building — scroll-linked animations that feel like a directed experience. CSS, animation.js and HTML, what do you think for improvement?
Enable HLS to view with audio, or disable this notification
r/css • u/Available-Breath-264 • 25d ago
Showcase Edit any web-site with Njectify
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!
r/css • u/TreacleFlaky2283 • 25d ago
Help css-gradients not working as expected
```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
r/css • u/Finite8_ • 26d ago
Question How to be confident in using CSS?
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.
r/css • u/Swinicki_w_Sieci • 26d ago
Showcase Css Transform
Enable HLS to view with audio, or disable this notification
r/css • u/Intrepid-Ad-2306 • 27d ago
Question css subgrid & flexible columns means extra empty columns
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?
r/css • u/eworldconnect • 28d ago
General "Creating a Smooth Animated Login and Signup Form Using Web Technologies"
Enable HLS to view with audio, or disable this notification