/r/css

Photograph via snooOG

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
  1. 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.
  2. 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.
  3. Don't use link shorteners (bit.ly for example), because they are automatically marked as spam.
  4. 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.

Click here to message the mods.

/r/css

126,467 Subscribers

2

Am I too dumb to understand this?

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

https://preview.redd.it/1h4s0iqv7myd1.png?width=1900&format=png&auto=webp&s=bce2592039606aaa124046bd594275dc1e6ebbd5

6 Comments
2024/11/03
04:37 UTC

1

Inconsistent font size

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.

16 Comments
2024/11/02
23:13 UTC

0

Basic question while styling Anki cards

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)
}
5 Comments
2024/11/02
22:52 UTC

0

Why usnt this code working on janitor ai's css?

Im not goimg to lie, i know NOTHING about coding, so i used ai to make this

/* Base Reset */

  • { box-sizing: border-box; margin: 0; padding: 0;

}

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); }

5 Comments
2024/11/02
19:11 UTC

0

Learn frontend development by using Tailwind CSS to build a landing page - Part 1 - The Navbar

2 Comments
2024/11/02
16:01 UTC

1

Why should the pseudo-element be displayed as a block?

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">
4 Comments
2024/11/02
09:12 UTC

3

Border Color Linear Gradient

https://preview.redd.it/qq8yj5km7eyd1.jpg?width=358&format=pjpg&auto=webp&s=5cd98e8f0833cc01b3855171a695ff2b691c1dda

How can I create a card with a linear gradient border color, while also allowing the card to be transparent?

7 Comments
2024/11/02
01:41 UTC

0

helpwith css (userstyle)

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.

0 Comments
2024/11/02
00:56 UTC

21

[META] Can we please get an automod asking for either live links or a CodePen/JSFiddle on CSS help flaired requests?

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. :)

5 Comments
2024/11/02
00:40 UTC

1

Help please

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>
7 Comments
2024/11/01
22:46 UTC

1

how to change this recent bookmarks listbox to all one color?

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.

1 Comment
2024/11/01
22:36 UTC

1

HELP REQUEST: CSS Rendering issue between Chrome and Safari

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!

Chrome -- Broken Menu

Safari -- Expected Functionality

1 Comment
2024/11/01
20:10 UTC

0

Page layout

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.

5 Comments
2024/11/01
19:32 UTC

0

What are some sites where I can get web designing projects for money?

What are some of the sites which give us web designing projects for money?

0 Comments
2024/11/01
12:51 UTC

1

What would be a minimal/lightweight alternative to Bootstrap (featuring List Group)?

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 !

5 Comments
2024/11/01
10:20 UTC

1

New to the View Transition API - Can't Remove System Fade Animation

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!

0 Comments
2024/11/01
08:04 UTC

4

Feedback on design

What are your oppinions on this animated design? I submitted it years ago into this competition, but didnt get much of a response.

https://codepen.io/darren_colson/pen/XWVxwPb

https://preview.redd.it/39u2v8n0i8yd1.png?width=747&format=png&auto=webp&s=39a10c39c9c0895a195229c9e4b6cd6869acda0b

4 Comments
2024/11/01
06:30 UTC

4

What are some media queries for different desktop resolutions?

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){

}
9 Comments
2024/11/01
05:44 UTC

2

How can I recreate the squiggly line in the background?

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?

https://reddit.com/link/1ggye0q/video/sb6tyu3y68yd1/player

13 Comments
2024/11/01
05:26 UTC

3

How come the H1 tag is LCP?

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

13 Comments
2024/10/31
23:57 UTC

3

How to set the width of a flex container to be equal to the size of it's contents?

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!

2 Comments
2024/10/31
21:08 UTC

3

Would this carousel be easier to do in CSS or Javascript

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!

https://preview.redd.it/qk55alfrz4yd1.png?width=411&format=png&auto=webp&s=13bba49f368577909241543f6f0d406366b13869

12 Comments
2024/10/31
18:42 UTC

1

Change HTML text with CSS? Possible?

https://preview.redd.it/8qzc7nroa3yd1.png?width=1920&format=png&auto=webp&s=9e26fd16e468bb52dbb51308b8128ab0bff72640

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.

5 Comments
2024/10/31
13:02 UTC

10

can i achieve this shape with css background/border or similiar?

8 Comments
2024/10/31
13:00 UTC

5

Centering Inline Icons/Images with a line of text

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 &hairsp; because it's the smallest.

so: <span class="inline-flex-container">&hairsp;<svg>Icon Here</svg></span>

Are there potential issues with this solution?

3 Comments
2024/10/31
05:45 UTC

3

Get minimum of parent height and width in a calculation

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?

7 Comments
2024/10/31
04:33 UTC

4

Help with css animation

1 Comment
2024/10/31
02:54 UTC

2

Unitylike design framework/app?

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?

5 Comments
2024/10/30
23:29 UTC

Back To Top