/r/csshelp
Read the FAQ before posting a question.
This subreddit is for help with CSS and questions only. If you only want to share your creations, please direct them to reddithax.
If you know of a guide that you feel should be listed here, message the moderators with a link.
/r/csshelp
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!
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
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
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.
This one is to streamline the process of creating Flexbox layouts: https://flexboxcss.com
Is there something similar for Grid layout?
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;
}
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;
}
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
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/
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):
Here are the parent containers styles:
https://github.com/Mezzichai/note-keep/blob/main/frontend/src/App.css
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
On https://old.reddit.com/r/aiyu/ there are certain resolutions where the bar will overlap the post such as this :
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.
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!
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
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.
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.
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>
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!
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.
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;
}
```
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);
}
Check out the best 3 css gradient generators to take your designing to the next level: https://www.youtube.com/shorts/eYD8GiyE1nU
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.
Sorry if I can't post here. It keeps getting deleted :(
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.
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
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
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.
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
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.
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.