/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.
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!
/r/css
So I've been practising CSS using daily targets on CSSbattle website. However, everytime I can't figure out the solution, I check the solution and the top solution is something like this:
<style>*{margin:175 35%;border:solid#F9DDC6;border-width:40 0 0 40;*{background:#9D92C8;margin:-163 0-43;border-radius:1in 0 0
Like what even is this? Am I too noob to get it? Can someone explain this to me please
I'm trying to make some text scale with the screen's width. It looks right on Firefox, Edge and Chrome on Windows, as well as responsive design mode on Firefox and Opera on Android. But it looks wrong on Chrome and Edge on Android. What did I do wrong?
Firefox, Edge, Chrome, and Firefox responsive design on Windows 11
Opera, Edge and Chrome on Android
This is the file on GitHub, and this is the same file displayed on GitHub pages. Excuse my probably horrible JS.
I have very basic knowledge that I need for styling my Anki cards. I've recently found this piece of CSS below:
.card > div,
.card.nightMode > div {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
I'm wondering what this part is doing here
> div
Just before the style is defined as normally I would write
.card {
(My style properties)
}
Im not goimg to lie, i know NOTHING about coding, so i used ai to make this
/* Base Reset */
}
body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #0d0d0d; font-family: 'Roboto', sans-serif; color: #e0e0e0; }
/* Profile Card Styling */ .profile-card { width: 400px; padding: 25px; background-color: #111; border: 2px solid #333; border-radius: 15px; text-align: center; box-shadow: 0 6px 20px rgba(255, 255, 255, 0.15); transition: transform 0.3s, box-shadow 0.3s; }
.profile-card:hover { transform: translateY(-8px); box-shadow: 0 10px 30px rgba(255, 255, 255, 0.3); }
/* Avatar Styling */ .profile-avatar img { width: 120px; height: 120px; border-radius: 50%; border: 2px solid #444; filter: grayscale(100%); transition: filter 0.3s, transform 0.3s; }
.profile-avatar img:hover { filter: grayscale(0%); transform: scale(1.05); }
/* Profile Info */ .profile-info h1 { font-family: 'Playfair Display', serif; font-size: 2em; color: #f5f5f5; margin-top: 20px; }
.profile-info .intro, .profile-info .bio, .profile-info .signature { color: #ccc; font-size: 0.95em; line-height: 1.6; margin: 10px 0; }
.profile-info a { color: #bbb; text-decoration: underline; transition: color 0.3s; }
.profile-info a:hover { color: #fff; }
/* Quote Section */ .quote-section { margin: 20px 0; padding: 15px; background-color: #1c1c1c; border-left: 3px solid #555; border-right: 3px solid #555; border-radius: 10px; }
.quote-section .quote { font-family: 'Playfair Display', serif; font-size: 1.1em; color: #ddd; font-style: italic; line-height: 1.4; }
/* Links Section */ .profile-links { margin-top: 15px; }
.profile-links a { font-size: 0.9em; color: #888; text-decoration: none; padding: 8px 10px; border-radius: 5px; transition: background-color 0.3s, color 0.3s; }
.profile-links a:hover { background-color: #222; color: #fff; }
.discord-handle { font-size: 0.85em; color: #777; margin-top: 10px; }
/* Follow Button */ .follow-button { display: inline-block; margin-top: 20px; padding: 12px 28px; background-color: #e0e0e0; color: #111; font-size: 1em; font-weight: bold; border: none; border-radius: 10px; cursor: pointer; box-shadow: 0 4px 10px rgba(255, 255, 255, 0.15); transition: background-color 0.3s, transform 0.3s; }
.follow-button:hover { background-color: #bbb; transform: translateY(-2px); }
input[type='radio'] {
width: 20px;
height: 20px;
border: 2px solid #747474;
border-radius: 50%;
outline: none;
opacity: 0.6;
/*transition: 0.3s;*/
}
input[type='radio']:hover:before {
box-shadow: 0px 0px 0px 12px rgba(80, 80, 200, 0.2);
border-radius: 50%;
opacity: 1;
}
input[type='radio']:before {
content: '';
display: block;
width: 60%;
height: 60%;
margin: 10%; /* Keeping margin only 10% */
padding: 10%; /* Increase the inner area for pushing the border out of the circle */
border-radius: 50%;
transition: 0.3s; /* Move your transition to here */
}
input[type='radio']:checked:before {
background: green;
}
<input type="radio">
How can I create a card with a linear gradient border color, while also allowing the card to be transparent?
I am trying to get a userstyle working, very simple (I think so but I am not even begginer with css), the userstyle is here https://greasyfork.org/en/scripts/497520-duckduckgo-ai-chat-responsive-customizations the issue i have is , the left side panel does hide, but the rest of the page doesnot get wide, I have tried changing properties for .U6SIOwl59r4JrXnL_Bic, .PSL9z2mGqO2kEMN_ZOJl,..kOMSj8TE0LBty6yatos7,.evMEChInEtheZC5gfFqi but since i actually dont really know how they work, its just like random modifications that dont do anything (except probably moveit left or right or dissapear the content)
this is the part that works: javascript: (function () { var section = document.querySelector('.cuhMRlbsijSWeq8UtkYx'); var div = document.querySelector('.zOYb8r74bS2EZVcmDp2w'); if (section) { section.classList.toggle('hidden'); section.style.transition = 'transform 0.3s ease'; section.style.transform = section.classList.contains('hidden') ? 'translateX(-100%)' : 'translateX(0)'; } })();
the other part must be something (i believe) changing some of the .U6SIOwl59r4JrXnL_Bic, .PSL9z2mGqO2kEMN_ZOJl,..kOMSj8TE0LBty6yatos7,.evMEChInEtheZC5gfFqi attributes, but cant find what so far.
I'd love to help more but a snippet of CSS out of context is impossible to answer 99% of the time. If posters were prompted to post a link or use CodePen/JSFiddle for live demos it would a) avoid basic questions that just need a few minutes more thought or experimentation, as putting it in a fiddle normally helps with that and b) for those that still need help, we can actually answer it!
Not suggesting we make it absolutely mandatory as it's not always possible, but a nudge from automod spelling out how to do it would be a nice change.
I've seen others asked and tried asking OPs myself for it and they rarely deliver or even bother to respond. A little more effort on that side would result in a much more interesting Q&A repository here. :)
I don't know how to add a gap between the two divs please tell me what i did wrong
<div style="display: flex;justify-content: center;"> <div style="display: flex;align-items: center;gap: 10px;"> <div class="pulseBtn"> </div> <p>Ships by<span style="font-weight: bold;"> Thu, 22 Aug</span></p> <div style="display: flex;align-items: center;gap: 7px;"> <img style="width: 20px;height:20px;object-fit: cover;border-radius: 50%;" src="https://cdn.shopify.com/s/files/1/0765/8458/3446/files/Flag_of_the_United_States.png?v=1724053261"> <p><span style="font-weight: bold;">FREE</span> Local delivery</p> </div> </div> </div> <style> .pulseBtn { width: 13px; height: 13px; background:#90ee90; border:1px solid #90ee90; border-radius:50%; box-shadow: 0 0 0 0 rgba(88, 120, 243, 0.4); -moz-animation: pulse 2s infinite; -webkit-animation: pulse 2s infinite; animation: pulse 2s infinite; }@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgb(127, 238, 112);
}
70% {
box-shadow: 0 0 0 10px rgba(88, 120, 243, 0);
}
100% {
box-shadow: 0 0 0 50px rgba(88, 120, 243, 0);
}
}
</style>
i'm editing the skin of archive of our own. you can make your own skins but they don't do public ones anymore. i want this listbox the recent bookmarks tab to be all one color.
i'm pretty sure the background of the listbox is #2a2436 and the little line or border at the top is #1a1e27 so in theory it should all be #2a2436 but when i change it to make it the same nothing happens or the text in that area is the same color as the background and i have to reset it to the original CSS and start over. I also went and checked every #1a1e27 hex code in the CSS to see if that would change it but nada so i'm LOST.
heres the CSS in question i'm not good at coding or CSS in general i just needed help with this.
Hi Everyone! I am the maintainer of this website (not the original builder -- this is not my code) and noticed a huge discrepancy in how the secondary menu is rendering in Chrome browser vs. Safari browser. I've attached photos and you can see that in Chrome, the secondary menu is displaying in the middle of the screen. In Safari, it is displaying (As expected) on the left side of the screen.
Here is the current site link: https://www.janegphotography.com
What could be causing this and how can I fix this?
Thanks so much!
I am using WordPress to make a site. For some reason just one page my layout is doing this. I've tried using position absolute on the footer but then it covers the content when on a small browser. There has to be some trick to make the content center and footer at the bottom.
What are some of the sites which give us web designing projects for money?
Hi,
What would be a light CSS framework (a bit like https://picocss.com/ ) which looks like Bootstrap and have a similar List Group component https://getbootstrap.com/docs/5.3/components/list-group/
The reason I am looking for this is Bootstrap is a bit heavy for my use case (.min.css is about 250kb) and too complex for my needs. At the same time I need to maintain visual coherence with Bootstrap, especially the List Group component that is heavily used in my app (95%).
I also looked into extracting or downloading a List Group only version of Bootstrap but that doesn't seem to be simple.
Thank you so much !
Hi everyone, I'm just getting started with the View Transition API and am having trouble removing the default fade animations. Here’s a link to my code: https://codepen.io/telsawu/pen/bGXKboK.
I’ve tried applying the following CSS:::view-transition-old,
::view-transition-new {
animation: none;
mix-blend-mode: normal;
}
But the default fade-in and fade-out animations still won’t go away. I only want to see the table cells resizing without any other effects. Can someone help me figure out what I’m missing? Thanks in advance!
What are your oppinions on this animated design? I submitted it years ago into this competition, but didnt get much of a response.
i am a beginner in programming and as of now i am learning about media queries. To have a better grasp on how media queries work, i decided to do a solo project using it. As of now, i am having trouble in making my website look the same through out all pc resolutions and some aspect ratios.
Am i using them correctly/efficiently?:
/* Media Query for large screens (1920px to 2560px) [Widescreen Monitors] */
@media (min-width: 1920px) and (max-width: 2900px) {
}
/* Media Query for Large Screens (1440px to 1920px) [Large Monitors] */
@media (min-width: 1440px) and (max-width: 1920px){
}
/* Media Query for Standard Screens (1280px to 1440px) [Standard Monitors] */
@media (min-width: 1280px) and (max-width: 1440px) {
}
/* Media Query for Standard Screens (1024px to 1280px) [Small Monitors / Laptops] */
@media (min-width: 1024px) and (max-width: 1280px){
}
Hi! I saw this CSS thing and I really like it, but I can't figure out how to recreate it. Essentially, I just want the organic squiggly line in the background. Does anybody have any ideas/tips on how to do this?
Can anyone explain to me how the H1 tag is the largest contentful paint with 3,000 ms?
TTFB: 600ms, Render Delay: 2,400ms
Any idea what might be causing that? Any ideas or help appreciated!
Website is https://odgard.com
I know this is a basic question, but I've had a few months away from this and I can't seem to figure it out.
Here's a link to the CodePen: https://codepen.io/psychedelicseal/pen/VwoxjEg
I want the two circle images (#type-one, #type-two) in .third-line to be next to each other with a 3px gap. The structure of the HTML is
<div class="line-three">
<div class="types">
<div id="type-one">
<img src="https://archives.bulbagarden.net/media/upload/2/26/Bug_icon_LA.png">
</div>
<div id="type-two">
<img src="https://archives.bulbagarden.net/media/upload/b/b4/Poison_icon_LA.png">
</div>
</div>
<div id="status">
<img src="https://placehold.co/208x64">
</div>
</div>
I've tried adjusting the widths on everything I can think of but I am at a bit of a loss. Below are what I ~think~ are the relevant elements and their properties.
.line-three {
display: flex;
align-items: center;
width: 100%;
justify-content: space-between;
}
.types {
width: 100%;
height: 100%;
display: flex;
justify-content: flex-start;
gap: 3px;
}
#type-one, #type-two {
display: flex;
}
#type-one > img, #type-two > img {
max-height: 100%;
max-width: 100%;
}
#status > img {
max-height: 100%;
max-width: 100%;
}
Thank you in advance for any help!
Hey everyone, I am asking this question because I haven't really gone into learning Javascript fully yet. I can understand the syntax fairly well actually with Java knowledge and I can tell what most code is doing I just don't know how it all interacts with each other yet.
I am still getting comfortable with CSS and would like to know is this carousel I want better to do with just HTML/CSS or could I write a simple "If this dot is clicked then display this card or this card" in JS. I don't just want images I'd like a fully responsive card for each dot that I can add other components to. Appreciate any help. Thank you!
Hi all,
I am building a website on wordpress with a template and there are 2 languages. I am using polylang for multilanguage. I did everything but there is only one small part which i can not edit. The "Show All" text over categories remain ENG for Russian site. And i think it is a HTML text. I cant use text editor in wordpress ecuase of elementor. So is there a way to change it with an additional CSS, and if so, how am i supposed to assign it to only this page?
I would be really grateful if somebody helped.
Thx in advance.
I was trying to figure out how to center an icon on a line of text because when icons are near or larger the line height, it looks weird because it sits on the text baseline. I wanted to share my solution to see if there are potential issues or if there are better solutions. Also, I wanted to document this somewhere because I couldn't find it with a google search so maybe it helps someone in the future.
Codepen with explanation of problem and solution: https://codepen.io/taicheeze/pen/gOVzmwP
My solution: wrapping the image/svg etc in a span that is set to display : inline-flex; align-items: center;
with a white space character in the text, I used  
because it's the smallest.
so: <span class="inline-flex-container"> <svg>Icon Here</svg></span>
Are there potential issues with this solution?
I feel like this should be relatively easy, but I'm not seeing the way forward.
I'm making a tic-tac-toe webapp. The current styling of the board looks like this
.global-board {
--side-length: 41rem;
--gap-size: calc(var(--side-length) / 38);
--square-size: calc((var(--side-length) - (2*var(--gap-size)))/3);
height: var(--side-length);
grid-template-columns: repeat(3, var(--square-size));
grid-template-rows: repeat(3, var(--square-size));
gap: var(--gap-size);
}
I'm using so many calculations because I want this style to be responsive as the page shrinks. Specifically, I want the side length to be 41 rem at largest, but shrink to fit into it's parent at 90% for smaller sizes. The syntax I'm dreaming of is:
--side-length: calc(min(41rem, 90%(of height), 90%(of width).
But alas, it seems like the % unit infers whether or not it refers to width or height only implicitly depending on whether it is modifying an attribute that refers to width or height, but that doesn't quite work in the context of a calc() I need for a square tic-tac-toe board.
What am I missing?
The second keyframe repeats but the first one doesn't and I have no idea why
Hello everyone!
I can design any UI in the Unity editor fitting every resolution.
And I can't believe that there isn't an app or framework or anything, where I could design like in Unity.
Is there any program that could do that?