/r/css
A community for discussing about CSS (Cascading Style Sheets), Web Design and surrounding relevant topics. Feel free to discuss, ask questions, share projects and do other things related to CSS here.
About CSS
CSS, short for Cascading Style Sheets, is used almost universally across the web to affect the design and appearance of every website you visit. Here in /r/css, you've got a place on reddit to talk about CSS, whether you're new to CSS and want to learn, or a pro wanting to discuss the engineering and usability reasons that all modern browsers ignore
We welcome all CSS discussion here. If you need help with styling your website or your reddit, or want to share a neat trick you cooked up, it's welcome here!
Rules
- No spam. If you've developed a neat CSS trick that you want to share with others, make sure you share the trick, not your website. In other words, feel free to post something like "Isn't my 404 page neat?" with a link, but avoid posts like "Hey look how cool my site is!" that link to a storefront. This reddit is a place to learn and show off CSS, not sell your products. If your CSS helps sell your product, great, but make sure your post is about the CSS, not the product.
- Be nice. Not everyone is a fantastic designer. If someone posts their work here and you don't like it, give them objective feedback about ways to improve it, not "it's ugly." Likewise, CSS newbies often have the same questions as they grow and learn, so try not to be mean when they post a question we've seen a thousand times before. It might be old news to you, but they wouldn't ask if they hadn't already sought an answer, and there might be other people too afraid to ask for themselves.
- Don't use link shorteners (bit.ly for example), because they are automatically marked as spam.
- Try to use descriptive titles (not 'I have a question.'). I won't enforce this, but it'd be nice if you'd follow it.
Related subreddits
Useful Links
- Inspire, a collection of all kinds of useful links.
- /r/csshelp and /r/reddithax are the places to go for questions relating to Reddit's stylesheets. Techniques differ a lot between formal CSS development and subreddit stylesheets, so you'll often get better answers there.
- Use Codepen or jsFiddle to provide working code samples.
- Mozilla Developer Network is your one-stop shop for detailed information on CSS properties. Formal specifications for everything CSS can be found at W3.org. Don't go to W3Schools - it isn't a wiki maintained by real developers like MDN, so it's often out of date and prone to significant errors, and it has no relationship with the W3 so they have no special or insider knowledge.
- CanIUse.com has 99% of the information you need on supporting different browsers.
- Codecademy can get you started from 0 knowledge of web development in mere hours.
- Learn Layout will teach you advanced techniques for designing modern sites.
/r/css
130,859 Subscribers
[Help] How do I make the excerpt visible only on the first two posts? I'm using TailwindCSS
Here's the layout I"m working on.
Each card has an image, then a H2 tag for the title, and then an excerpt.
I want the excerpt to show for the first 2 cards only and then not visible for the rest. I can't for the life of me get this to work!
The HTML
<div class="blogcard col-span-2 pb-6 bg-white drop-shadow-sm">
<img src="<?php echo the_post_thumbnail_url(); ?>" alt="" class="w-full h-auto mb-10">
<div class="blogcard-text px-12">
<a href="<?php the_permalink(); ?>"><h2 class="font-bold mb-8"><?php the_title(); ?></h2></a>
<?php echo '<p class="excerpt">' . get_the_excerpt() . '</p>' ?>
</div>
</div>The CSS .blogcard { font-family:"nunito"; color:#40526A; font-size:18px; line-height:30px; }
.blogcard h2 {
font-family:"museo";
font-weight:700;
font-size:25px;
color:#122947;
}
.blogcard:nth-child(1), .blogcard:nth-child(2) {
grid-column: span 3;
}01:34 UTC
urgent help
i've made different tables/lists/ grids/review box and cards but how do i align them, like i want the cards and list to be side by side but the grey box in the next line to them and then in the next line i want the ble and green grid and at last the review/comment box. please help, it's for a project! thankyou for those who helped.
21:18 UTC
Change Font Size Based on Content
17:19 UTC
Relative file path not working for background image
Hello, Im doing the codecademy front end course on the first project it assigns and i cannot for the life of me get the background-image in my css to load with a relative file path.
Im new to this so hopefully im providing the correct information. The background image must be added to the H1 element, and so I have
h1{
background-image: url (resources/images/pattern.jpeg);
then some other css for the h1
}
If i replace that relative path with a link to the image online it works perfectly well. My file structure is
coding\codecademy\resources\images
for the image, and
coding\codecademy\resources\css\index.css for the css file.
please tell me what I am doing wrong :^)
16:41 UTC
I want to make boxes like these using flex. The height and width will not be defined as flex will take care of it. How do make something like this? I have a background image, and a gradient. Using tailwindcss and react, i want the divs to crop the gradient fill and show the background image.
13:38 UTC
NEED HELP PLS(not a programmer) DELAY AND RESPONSIVE CSS
So basically i was building a website on elementor, and well theres a code that interferes idk how with the "responsive" feature on elementor its this one:
So basically a layer that i built for pc appears in mobile, a layer for tablet appears on pc, and vice-versa
and it somehow interferes with the responsive part of elementor
website: Acuradefinitiva.com (monkey dont know how to code)
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> </head> <script> $('.delay').hide();setTimeout(function() { $('.delay').show(); }, 10000); </script> 13:37 UTC
Input boxes arent straight under by under [SEE PHOTOS]
Sorry if im question looks stupid, im just a starter Web developer.
I tried asking the Ai but he always made it worse thats why, im asking you for an solution.
Take a look at the two images, you´ll see that the second image (green light) looks more nice, i mean the boxes are in one line under by under, not that the one input box is more to left than the upper input box, i tried setting same width,margin,padding nothing worked
my html code:
<!DOCTYPE html><html><head><title>Titel</title><meta charset="ISO-8859-1"><meta name="description" content=""><meta name="author" content=""><meta name="keywords" content=""><meta name="generator" content="Webocton - Scriptly (www.scriptly.de)"><link href="style.css" type="text/css" rel="stylesheet"></head><body><div id="FORM"><p id="TIT">Get in Touch</p><label>Your Name:</label>
<input type="text" placeholder="your name"/> <br />
<label>Your Email:</label>
<input type="text" placeholder="\\\[\[[your@email.com](mailto:your@email.com)\](mailto:[your@email.com](mailto:your@email.com))\\\](mailto:\[[your@email.com](mailto:your@email.com)\](mailto:[your@email.com](mailto:your@email.com)))"/> <br />
<label>Your Website:</label>
<input type="text" placeholder="your-website.com"/> <br />
<label>Your Subject:</label>
<input id="sub "type="text" placeholder="your subject"/> <br />
<label>Your Message:</label>
<input id="mes" type="text" placeholder="your message"/> <br />
<input id="sen" type="submit" name="Send"/> <br />
<input id="res "type="reset" name="Reset"/> <br />
</div></body></html>my css code:
#FORM,p {
text-align: center;
line-height: 45px
}
#FORM {
border-radius: 30px;
background-color: green;
width: 18%;
position: absolute;
left: 500px;
top: 150px
}
#TIT {
}
#sub {
}
#mes {
}
#sen {
}
#res {
}
13:34 UTC
Sticky scrollbar.. not solvable?
Hi guys im now working on that single idea from my boss for to long and cannot find a solution..
First of all, sorry for my bad drawing.
We have this website we’re on many pages there are tables the tables are pretty large both vertically and horizontally. I got the task to make the horizontal scrollbar in the table sticky and also the footer. The footer was no problem, but I honestly don’t know how to make the horizontal scroll bar sticky. The first thing I have done is putting the whole table in a container and then have its own horizontal and vertical scrollbar. But he didn’t want that.
Summary :
-On the table, you can change the rows per page. -The vertical scroll bar should be the browser scroll bar -The footer and the horizontal scroll bar should be sticky.
If someone Has experience with vue-good-table and vue 2 it would be good because that’s what we are using…
07:33 UTC
Why is the padding moving from left to right?
22:28 UTC
Need Help Recreating YouTube's Related Videos Thumbnail Layout
20:33 UTC
[Help] Removing entry from sidebar menu
[SOLVED]
How can I target and remove this extension sidebar entry from the sidebar menu?
16:02 UTC
how do i align this two? with explanation pls
13:21 UTC
Trying to darken a video
Hey all, I'm trying to darken a background video for my website and I'm having some issues (See attached codepen, I've tossed a placeholder video in to show what I'm doing).
I'm trying to set background-color on the div the video is in, but it doesn't seem to make a difference; is this something basic I'm missing?
https://codepen.io/Tribalbob/pen/gbYyWBO
EDIT: Thanks to u/abidelunacy, filter:brightness(80%) was what I needed!
05:12 UTC
is there is an extension to style the tags useing scss way inside a css file
03:40 UTC
My sub menu items in mobile view are not showing, i thought it was a z-index issue, but cant work it out. You'll haver to ciew in mobile view, but its on this page - https://www.welshmanwalking.co.uk/clytha-park-circular-walk-coed-y-bwnydd-iron-age-hillfort-bettws-newydd-hamlet-clytha-castle-folly/
21:15 UTC
Is this grid template and code correct for the following project?
Hi all, I'm currently studying web dev at school, and I have a little project to do, where we have to use flex, grid or bootstrap to replicate a web from an image. I'm absolutely bad with the display part part of the frontend, so I chose to do it with grid, since I consider flex harder and bootstraps gives you half done (according to the tacher), but I'm struggling a little to find a correct way to structure it, I've tried to times to do the project from scratch but the template seems to be wrong, so this time I've thought how to do it, and draw it, so I can visualize it more clearly, but idk if it would work as I think, so before losing the time for third time I thougt of asking y'all
This is the site I have to replicate
Processing img emqa8canajge1...
And this is the template I've thought of with the basic code at the right
Processing img ofwyxoklbjge1...
What y'all think of it? Would it work fine as it is drawn and written? Idk if it's good to use so many display:grid inside anothers
I'm very bad at flex and grid
17:47 UTC
Elliptical movement of objects
Hi,
I am trying to build a planet that moves on an elliptical path around a sun... Like looking at the solar system from the side....
I found that I can't just use two transforms on the same element as only the lat one will happen and I need to use a child element and have X on one and Y on the other... However, I just can't figure out how to get it to be an elliptical movement even with using ease-in/ease-out....
Any suggestions how to get this working?
Thanks
Pax
17:21 UTC
Matching Selector if the name change ?
Is it possible to match a selector if the selector name changed by searching the DOM based on width or height or something that may be familiar from the previous selector ?
11:54 UTC
Resources for learning CSS in 2025
I’m an experienced developer/data scientist with experience in Oop and functional programming with languages including C++, Haskell, Python and R. Partly as a challenge and partly out of necessity I am now learning front end development with a strong focus on CSS. I’ve read many times that people don’t recommend books due to the rapid evolution of CSS. Nevertheless I wonder if there are any good books that teach CSS fundamentals well, that are well-complemented with some recent online resources (YouTube series’, Blogs, courses, whatever).
So I am looking for appropriate recommendations. I have access to Linkedin Learning.
Many thanks in advance!🙏🙏
11:33 UTC
Is this an acceptable grid layout in Vanilla CSS?
Having been inspired by Bootstrap's 12 column grid, I created a 12 column layout using CSS grid and I would love to know your thoughts. Is this implementation acceptable or is there a better way to write this?
02:39 UTC
Can't remove blue border from checkboxes that appear after clicking. [Pico CSS]
The third box is the last one I clicked and there's a blue border around it. I used
outline: none; box-shadow: none;
which work for buttons but not these checkboxes. How can I fix this?
18:39 UTC
Hi guys can someone tell me or suggest a video explain how we create a navbar or menu with HTML and CSS please ?
Thanks
15:59 UTC
my little css limerick
There was a programmer coding
Waiting for the site; 'twas loading
The man had no luck
The stylesheet sucked
Then the programmer was loathing
15:43 UTC
hyphens or underscores for naming two word CSS classes?
Best way to name two word class?
Eg. .new-class Vs .new_class
Hyphens are good to write and read.
While underscores are good to copy and paste.
I was using hyphens but as most of this time I use copy paste way, I want to use the underscores.
What do you think?
13:35 UTC
Container or Media queries
Container or Media queries
I'm looking into rewriting a self-made responsive framework that consists of Sass and JS files. Much of the functionality is based on media queries, but now I'm looking into Container queries.
Are they meant to replace media queries? Do I still stick to the smallest is default and build upwards, or big to small? Should I choose either Media or Container, or is it a good idea to use both together?
11:40 UTC
Why does the border remain?
This is Pico CSS, after clicking the button a blue border remains. This also happens to the buttons of picocss.com but not the toggle button. In my app, it happens to every button. Is there a way to remove it?
Edit: Fixed using this:
.theme-toggle:focus { outline: none !important; box-shadow: none !important; background: none !important; }
05:01 UTC
Help Overlapping Elements
I've been working on a collection of CSS animations element templates to use in a few different projects such as this: https://codepen.io/FireTamer/pen/raBqYqw
The pen linked above works exactly as I need it too, however, I went to cannibalize it and mix it with another "effect" and found that it doesn't work on multi-line elements (I found that position: absolute doesn't wrap words like normal).
Trying to figure out the issue, I made a second pen of the original effect and stripped it of everything I didn't need at the moment, but I haven't been able to figure it out: https://codepen.io/FireTamer/pen/azoXOEX
How would I overlay the first span on top of the 2nd one completely? (No white text shown since that's the first step for copying the first pen).
00:11 UTC