/r/csshelp

Photograph via snooOG

Read the FAQ before posting a question.


Discord channel

Testing123456789101112131415

This subreddit is for help with CSS and questions only. If you only want to share your creations, please direct them to reddithax.

Guides

If you know of a guide that you feel should be listed here, message the moderators with a link.

Posting Guidelines

  1. Please make sure to provide a link to the page/sub where your code is not working as intended.
  2. Paid work requests are fine. However, be aware that any accounts deemed as spam, or fraudulent will be removed and permanently banned without exception.
  3. Remember to respect the users and the community as a whole! Discretion is key, and mods will be here to maintain the quality of the sub.

Related Subreddits

Related Resources

SUBMIT A CSS QUERY

  1.  

  1. First thingy
  2. Something else here
  3. More stuff here
  4. Another list item
  5. More stuff here
  6. Another list item

/r/csshelp

18,308 Subscribers

1

Skilled website designer needed for optimisation (mobile and tablet mostly)

Hi,

I am looking for a skilled/experienced website designer to help me finish off my website so that it looks good across all devices. I have created a good looking desktop website and have done alot of work on the mobile website so far.

I have designed it using Squarespace but with a fair amount of css coding.

Unfortunately, I cannot pay anyone for doing this. However, I would be happy to trade my skills/expertise as a music teacher/author/book formatter in return. I'd be happy to trade the number of hours it takes someone to finish my website in instrumental music lessons (guitar/bass/piano/drums) in return (e.g if it takes you 10 hours I can provide 10 hours of lessons or other skills).

I don't expect many to be interested in this but I look forward to hearing from those that are.
A portfolio/examples of your work is a MUST! I can offer you the same of my work.
Thanks!

1 Comment
2024/03/26
16:20 UTC

2

Image sizing in flexbox

Hello all,

how do I make an image to be the size of the container of the flexbox rather than the image default dimensions such that it shrink and increases as the container moves.

Thank you

2 Comments
2024/03/26
07:34 UTC

2

Css position

Do any of you know if any resources that can help css position a little better especially absolute and relative?

These two are really confusing but I see a lot of projects using these two positions.

Thank you

1 Comment
2024/03/26
07:33 UTC

3

Why is align-self property not working in flexbox?

I'm new in learning CSS and can't seem to understand why this align-self property isn't working. Check the code below:-

https://codepen.io/dividclass/pen/LYvLgMP

Note: I applied align-self on item 2.

4 Comments
2024/03/26
06:12 UTC

1

Practical tool to resolve CSS responsive layout challenges

This one is to streamline the process of creating Flexbox layouts: https://flexboxcss.com

Is there something similar for Grid layout?

0 Comments
2024/03/26
00:57 UTC

1

Grid using media queries to collapse buttons from 3 to 2 to 1

code: https://jsfiddle.net/cqr3wk1f/

The buttons are not collapsing from 3 to 2 to 1.

I don’t understand why it is not working.

How do I get it to work?

u/media (max-width: 569px) {
.buttonContainerB {
grid-template-columns: repeat(2, 183px);
}
}

u/media (max-width: 183px) {
.buttonContainerB {
grid-template-columns: repeat(1, 183px);
}
}

.buttonContainerB {
display: grid;
grid-template-columns: repeat(3, 183px);
/*align-content: center;
justify-content: center;*/
align-items: center;
max-width: 569px;
gap: 10px;
}

u/media (max-width: 569px) {
.buttonContainerC {
grid-template-columns: repeat(2, 183px);
}
}

u/media (max-width: 183px) {
.buttonContainerC {
grid-template-columns: repeat(1, 183px);
}
}

.buttonContainerC {
display: grid;
grid-template-columns: repeat(3, 183px);
/*align-content: center;
justify-content: center;*/
align-items: center;
max-width: 569px;
gap: 10px;
}

1 Comment
2024/03/25
19:08 UTC

1

Cargo site: hover image, how to make the image display over the text

Hello Everyone,

I'm using cargo site "hovering image function", I'm not sure how to make the image appear on top of the text. Could someone help me with it. joyzhang.work

Here's the current css code

[id="F2198190651"] .page-content {
padding-top: 0rem;
align-items: flex-start;
}.
[id="F2198190651"].page {
min-height: var(--viewport-height);
}
hover-title {
display: inline;
pointer-events: auto;
cursor: pointer;
}
.hover-image {
visibility: hidden;
}
body:not(.mobile) .hover-title:hover + .hover-image {
visibility: visible;
pointer-events: none;
}
.hover-image {
display: flex;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
pointer-events: none;
flex-direction: column;
align-items: center;
justify-content: center;
/* Change width and height to scale images */
width: 90vw;
height: 90vh;
}
.hover-image img {
max-width: 100% !important;
max-height: 100% !important;
width: auto !important;
height: auto !important;
margin-bottom: 0;
}

2 Comments
2024/03/25
17:15 UTC

1

CSS Layout problem

Hey guys,

I seen a cool design online that i wanted to build as part of my learning for web development.

There is an element in the design that i have no idea how to make or what to even google to see if there are any other people who done this before it's the top left section with the blue box that has the main background bend around it.

Would anyone be able to give me some direction as to where i can start with this ? or have any idea how to build a layout like this?

Link to file

https://www.figma.com/file/YWCVPAxUrnf7O3db8Uicyd/Untitled?type=design&node-id=1%3A2&mode=design&t=sbZp42nyifmhMBU6-1

3 Comments
2024/03/25
09:42 UTC

1

[TUTORIAL] Adding chat widgets without modifying WordPress theme files

Hello everyone,
We have created a tutorial video that will go through step-by-step on how to install a chat widget to your WordPress website in literally minutes. https://css-javascript-toolbox.com/how-to/how-to-add-install-livechat-to-your-wordpress-website-in-minutes/

0 Comments
2024/03/24
11:47 UTC

1

Position sticky sidebar scrolls aways when bottom of page is reached.

Make your browser width is small so there are ony one or two note columns, then scroll the bottom, the sidebar with scroll at the very end and I dont want this to happen:

Live project: https://keeperplus.up.railway.app/Notes

I think the issue may be with the the height prop on the sidebar class being 100vh, and it is somehow causing some overflow, however I can make it any less otherwise the sidebar doesnt always reach to the bottom of the page.

Here is the file containing the jsx for sidebar:

https://github.com/Mezzichai/note-keep/blob/main/frontend/src/features/Labels/components/Sidebar.tsx

Here is the sidebar styles (the first class is the only relevant one):

https://github.com/Mezzichai/note-keep/blob/main/frontend/src/features/Labels/styles/sidebarStyles.module.css

Here are the parent containers styles:

https://github.com/Mezzichai/note-keep/blob/main/frontend/src/App.css

3 Comments
2024/03/21
22:36 UTC

2

Can I avoid repetition with a media query or pseudo selector?

I was trying to build some sort of light/dark theme toggle with CSS only (strategy basically copied from https://endtimes.dev/no-javascript-dark-mode-toggle/ but trying to use the :has pseudo-selector to avoid the additional div hack) and I'm pretty happy with most of it but there's still a weird repetition that I'd like to remove if possible.

This is my current code:

@media (prefers-color-scheme: light) {
    :root {
        --hc-color: #35353F;
        --color: #454545;                   /* A little less contrast */
        --lc-color: #454545C4;              /* A little less contrast */
        --background-color: #EEEEEE;        /* A little less contrast */

        --hyperlink-color: #0077AA;         /* Links don't need to be that egregious blue */
        --hyperlink-visited-color: #941352; /* Let's keep the links theme more in line */

        --accent-color: #e82c8e;
    }
}

:has(#color-mode-light:checked) {
    --hc-color: #35353F;
    --color: #454545;                   /* A little less contrast */
    --lc-color: #454545C4;              /* A little less contrast */
    --background-color: #EEEEEE;        /* A little less contrast */

    --hyperlink-color: #0077AA;         /* Links don't need to be that egregious blue */
    --hyperlink-visited-color: #941352; /* Let's keep the links theme more in line */

    --accent-color: #e82c8e;
}

@media (prefers-color-scheme: dark) {
    :root {
        --hc-color: #FDFDFD;
        --color: #E0E0E0;
        --lc-color: #E0E0E0E0;
        /*
        Background color has a little of blue tint
        */
        --hc-background-color: #111115;
        --background-color: #1B1B1F;

        --hyperlink-color: #8ab4f8;
        --hyperlink-visited-color: #c58af9;

        --accent-color: #e82c8e;
    }
}

:has(#color-mode-dark:checked) {
    --hc-color: #FDFDFD;
    --color: #E0E0E0;
    --lc-color: #E0E0E0E0;
    /*
    Background color has a little of blue tint
    */
    --hc-background-color: #111115;
    --background-color: #1B1B1F;

    --hyperlink-color: #8ab4f8;
    --hyperlink-visited-color: #c58af9;

    --accent-color: #e82c8e;
}

I don't think the HTML has much relevance but basically I've a form with a radio button for "OS", "Light" and "Dark".

As you can see, I've the colors for each theme repeated twice which I'd love to avoid. Intuitively as someone with barely any CSS knowledge I'd say either via some sort of "grouping of variables" (which from my search impossible unless you're reusing them for the shorthand syntax), or with a complex selector like (pseudo code):

@media (prefers-color-scheme: dark),
:has(#color-mode-dark:checked) {
  ...
}

There's the option to declare all the variables and then just reference them but that would only avoid repetition of the color itself, but would result in even more "boilerplate"/code.

My question is, is this possible? Am I thinking completely wrong about this and the design is fundamentally flawed?

Additionally, bonus question since I'm unsure if I'm tapping into almost undefined behavior or not, the following part: :has(#color-mode-dark:checked). I started by using body:has(#color-mode-dark:checked), then saw I could actually use :root:has(#color-mode-dark:checked) and could even shorten it to the current one (at least working on my browser - latest firefox), is this even correct?

Edit: Format and credit

2 Comments
2024/03/21
14:45 UTC

1

Top Menu Bar (ie Hot, New, Rising, etc) overlaps on posts in some resolutions.

On https://old.reddit.com/r/aiyu/ there are certain resolutions where the bar will overlap the post such as this :

https://imgur.com/1WI8ZMX

I'm on 1440p and never noticed the issue but recently it was brought to my attention. I've been trying to fix it in the CSS but none of my solutions seem to work. Any help is appreciated.

1 Comment
2024/03/21
09:07 UTC

1

CSS Question on enlarged image w/ watermark from website

Hi - when you click on a poster in the gallery below, and then the 'enlarge' button, it displays the image with watermark. Is this the result of the CSS? I'm seeking a solution similar to this for a collectables website, so wondering how it works? Thank you!

https://www.chisholm-poster.com/add/CL55268?q=&hPP=50&idx=clg&p=0&dFR%5Bavailable%5D%5B0%5D=yes&dFR%5Bdesigner%5D%5B0%5D=Drew%20Struzan&is\_v=1

2 Comments
2024/03/21
04:30 UTC

2

Change a Link Color on a Specific Page of Your Squarespace Site

Use this CSS hack to change a link color on a specific page of your Squarespace site.

https://www.ajmexperience.com/learn-posts/change-link-color-specific-page

0 Comments
2024/03/20
14:25 UTC

1

Questions about :hover properties

I'm new to coding (doing my first coding project right now for school) and I'm making a website in html/css/js.I've been trying to make it so that when I hover over ONE image it changes the properties of another image. I've been trying to figure out how to do this with many failed attempts. I've been able to make it change when I hover over, but it also applies when I hover over the other objects which it thinks are lower than the other objects for some reason.

Here's what my code looks like in HTML

<th id="splatoon2" class="yummy" width="500" height="400">
  <img id="splatoon22" class="sploon22" src="sploon2ar2.jpeg" height="400" width="500" style="object-fit:cover;" id="sploon2art"/>
<img id="octoexpand" class="oeee" class="sploonart" src="octoexpandart2.jpg" height="400" width="500"/> <div id="splattext2" class="sploon22" width="500"> <h2>Splatoon 2</h2> <p>Released on July 21, 2017</p> </div> <div id="octoexpandtext" class="oeee" width="500"> <h2 id="octoexpandtext2">Octo Expansion</h2> <p>Released on June 13, 2018</p> </div> </th>

and here's what my code looks like in CSS

#splattext2 {
text-align: right; position: relative; right: 3%; top: -51.7%; transition: .5s ease; font-family: "Seymour One", sans-serif; font-weight: 400; font-style: normal; color: whitesmoke; text-shadow: 0px 0px 5px black; font-size: 85%;
}
splatoon2 {
vertical-align: top;
position: relative;
transition: .5s ease;
opacity: 1;
}
splatoon22 {
vertical-align: top;
position: relative;
transition: .5s ease;
opacity: 1;
backface-visibility: hidden;
border-radius: 15px;
}
octoexpandtext {
text-align: right;
position: relative;
right: 3%;
top: -60%;
opacity: 0;
transition: .5s ease;
font-family: "Tilt Neon", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
 font-style: normal;
letter-spacing: 200%;
line-height: -20%;
 color:  #dbfff6 ;
 -webkit-text-stroke-width: 0.25px;
 -webkit-text-stroke-color:  #59b395;
 text-shadow: 0px 0px 7px  #dbfff6;
}
octoexpandtext2 {
text-align: right;
position: relative;
right: 2%;
top: -61%;
opacity: 0;
transition: .5s ease;
 font-family: "Tilt Neon", sans-serif;
 font-optical-sizing: auto;
 font-weight: 400;
 font-style: normal;
   letter-spacing: 200%;
line-height: -20%;
  color:  #dbfff6;
  -webkit-text-stroke-width: 0.15px;
 -webkit-text-stroke-color:#59b395;
 text-shadow: 0px 0px 7px #dbfff6;
}
.yummy:hover #splatoon22 { opacity: 00; } .yummy:hover #splattext2 { opacity: 00; } .yummy:hover #octoexpand { opacity: 1;
} .yummy:hover #octoexpandtext { opacity: 1;
} .yummy:hover #octoexpandtext2 { opacity: 1;
}
octoexpand {
 position: relative;
top: -39.26%; opacity: 0; transition: .5s ease; border-radius: 15px;
}

I was wondering if i could switch the ".yummy" selectors out for "#splatoon22" to make it apply to just the image, but then it didn't work at all when I hovered over it. I've done a whole bunch of google searching and nothing I've found has worked. I even consulted the ancient texts (aka my dad's web design coding books from who knows how long ago) and nothing I've found works, other than making the positions of the second object absolute, which causes it to be different and not layered right when I move the tab to another monitor.

Please help, I think I'm going insane over here.

9 Comments
2024/03/20
13:32 UTC

1

Letter-spacing 0 but not really?

Trying to recreate a website.
I use the same Roboto font and the same letter-spacing (normal, 0). "Computed" tab shows only normal, 0.
But for some reason my "normal, 0" looks wider. Can only recreate the look with negative spacing. On my copy the spacing needs to be -1px for H1, and -0.576px for H3.
Bigger font = tighter spacing.
It's "normal, 0" for all sizes on the source.
It's not word-spacing and not kerning.

3 Comments
2024/03/19
08:07 UTC

1

How do I fix the code where the curtain doesn't open?

Would I be writing the css differently?

CSS

.hide+.curtain-containerC .curtain-leftC {
transform: translateX(-100%);
}
.hide+.curtain-containerC .curtain-rightC {
transform: translateX(100%);
}

curtain opens: https://jsfiddle.net/pmc7zahy/1/

https://i.imgur.com/hcyaMj6.png

html:

<div class="curtain-containerC">
<div class="slide curtain-leftC">
<div class="inner">
<div class="container2"></div>
</div>
</div>

<div class="slide curtain-rightC">
<div class="inner">
<div class="container2"></div>
</div>
</div>
</div>

<div class="outer-containerA hide">

curtain doesn't open: https://jsfiddle.net/pmc7zahy/2/

https://i.imgur.com/1C0WQur.png

html:

<div class="outer-containerA hide">

<div class="curtain-containerC">
<div class="slide curtain-leftC">
<div class="inner">
<div class="container2"></div>
</div>
</div>

<div class="slide curtain-rightC">
<div class="inner">
<div class="container2"></div>
</div>
</div>
</div>

0 Comments
2024/03/18
01:21 UTC

2

Center list in the center of screen

I have an unordered list of US states with a style of columns: 3. But as you can see here: https://imgur.com/a/FSj3DIA, the list is not centered on screen. I'm very open to suggestions to get rid of <ul> tags as long as the list is centered (not text-centered). Thanks!

3 Comments
2024/03/16
06:40 UTC

1

Contact form field colour and font change - CSS only working on 3/4 fields

First off, if I sound like I don't know what I'm doing, it's because I don't, so thank you for your patience!

I have Contact Form 7 appearing on a couple of my website pages.

I tried to change the background field colour from the default grey to green and also change the font, but I can’t get it to apply to the Message field (which is still appearing grey). I have 4 fields total: Name, Email, Subject, Message. Currently only the Name, Email and Subject fields are showing the correct colour and font. Not the Message field.

This is the CSS I added to the Custom CSS and JS plugin. I don't know CSS, so I copied it from elsewhere and just removed '.wpcf7 input[type=tel],' because I don't have a field for telephone number.

.wpcf7 input[type=text],
.wpcf7 input[type=email],
.wpcf7 textarea
{
background-color: #5eb12e30;
font-family: lato;
}

Can anyone please tell me how I can make the green colour also apply to the Message field? Thank you.

2 Comments
2024/03/14
19:20 UTC

2

Put heading in grid container

Hi I want to put welcome in the same position as the home heading wile still inside the grid container. I can't seem to get it to not be recognized as a cell. Can anyone please help? Here is my code:

````

<html> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="s.css"> <head> </head> <body onload="myf()"> <br> <h2 style="text-align:center;">Home</h2> <div class="grid-container"> <p > Welcome</p> <div class="d1">box1</div> <div class="d1">box2</div> </div> <script src="js.js"> </script> </body> </html>

```

Css

```

h2{

font-family: Sans-Serif;

}

h1 {

color: navy;

margin-left: 20px;

}

.grid-container {

border: 5px solid orange;

display: grid;

grid-template-columns: 1fr 1fr;

padding: 20px;

gap:20px;

justify-content: space-evenly;

overflow:auto;

}

.d1{

height:150px

width:150px;

border: 3px solid #72A0C1;

padding: 10px;

}

```

0 Comments
2024/03/14
16:56 UTC

1

Full page width divs shrink below 600vw HELP.

Can anyone help me with this? I'm creating a responsive website in html. When the screen size drops below 600px all the divs that are supposed to be full width shrink and a gap appears to the right. I've tried every variation of width: 100%/background-size: 100% but no luck. I've searched all my code to find something that would be adjusting the width but can't find anything.

CSS:

.section1 {
margin-top: -155px;
background-image: url(image/Section1_Banner.jpg);
background-size: cover;
background-position: center;
box-shadow: 0px 0px 32px rgba(0, 0, 0, 0.5);

}

3 Comments
2024/03/14
09:26 UTC

2

Best 3 Free CSS gradient generators to use

Check out the best 3 css gradient generators to take your designing to the next level: https://www.youtube.com/shorts/eYD8GiyE1nU

1 Comment
2024/03/14
07:40 UTC

1

Creating this Navigation Menu

Hiey everyone. I was wondering if anyone would knows how to create this navigation menu? I like how it hovers and how the text animates. I looked on coding pen and tried CSS, but I am so lost. Thank you so much if anyone can help.

https://imgur.com/a/svKGT2b

Sorry if I can't post here. It keeps getting deleted :(

7 Comments
2024/03/14
05:23 UTC

2

Could I get some csshelp placing a table?

Here is an HTML file. I 've been trying to create an app to help math teachers plan sequences. That all seems to be working well.

However, when generating a table of numbers, the table always floats to the far right of the <div> with the id="container". It flows correctly on smaller screens or when resizing windows. I just don't want the default position to be the right of the screen. I would prefer there to be less space between the input-fields and the table on a large monitor. I would prefer the table to be floating left with 100px or so between the input and the table.

Can anyone help me see what I am missing?

Sorry I don't have a place to host this. We've been running it locally from the HDD.

1 Comment
2024/03/14
00:33 UTC

0

How to Add a URL to Code in Squarespace

Have a piece of code for Squarespace that requires a URL? Here’s how to find and add that URL!

https://ajmexperience.com/learn-posts/add-a-url-to-code-in-squarespace

0 Comments
2024/03/13
15:40 UTC

1

Responsive padding

What’s the best way to make padding responsive so that when you resize a browser window, the content adjusts nicely?

I’ve added breakpoints but when I resize my browser window, the content jumps around a bit and doesn’t look as slick as I’d like it to.

Is there something else I could try, or do I just need to be more tactical about my padding values? For context, I’m using em values

4 Comments
2024/03/13
14:47 UTC

2

How to align different divs?

Help needed to align this orange div to the end of the blue div. In other words, I need the right orange border to be vertically aligned to the end of the blue bar.

It's probably easy to do but I've just started learning and I'm terribly lost.

2 Comments
2024/03/12
17:34 UTC

2

How should i learn css?

can i just dive straight into website building tutorials or do i have to learn it theoretically first? also do you guys recommend any (free) resources for me to learn and practice? my main go to is freecodecamp and brocode on youtube

6 Comments
2024/03/12
01:39 UTC

2

Sidebar Tooltip Struggle

Hey everyone, I am working on a project where I have a sidebar and when it is collapsed there is a tool tip on hover. However, when .sidebar-item-container is set to relative and .sidebar-item-name is absolute, the tooltip does not show outside. It only works when the tooltips are absolutely positioned with relevance to the .sidebar-container. If it is not relative to .sidebar-item then the tooltips don't work properly with scroll and having .sidebar-item be absolute as well breaks each item's positioning in the sidebar.

I have attached the Codepen with the general layout and exact CSS from my project. Let me know if there is another solution. I am using react but would prefer to solve this with CSS only if possible. I tried playing with z-index and overflow with no luck.

Codepen

0 Comments
2024/03/11
22:49 UTC

2

Toggle/imapge swap with drop down menu

Hi. I am trying to replicate this feature here: https://sharon.soundoffaith.org

Click the magnifying glass icon and you'll see a search box appears, and the magnifying glass changes to an "X". Click the "X" and the box disappears and it goes back to the magnifying glass.

I have tried several solutions and none of them work. I would prefer a pure CSS option, but can use javascript if needed. Thanks.

2 Comments
2024/03/10
15:09 UTC

Back To Top