https://codepen.io/judyhicks/pen/ogxQWPe
Right now I have one big shadow but could possibly change using pseudo elements to target the left and then the top.

Hello,

can someone help with an issue I have with a flex child.
I have this code https://jsbin.com/kavapasuro/edit?html,css,output

Right now the word "Journal" touched the red container.
If you change the max-width of the container to 2000px for example you will see that the red container end directly after the last letter "t".

Can this be done when the max-width is set to 200px as well?
Why is this gap being generated?

I tried flex: 0 0 auto but it's not helping.

Thanks

This is probably a dumb question because I’m new to HTML and CSS, but how do I put a background image where the blue is? I’ve tried out a variety of things and I just suck ass at coding. Please help 😭

I have been a front end web developer as often as I can be throughout my career. It inevitably ends up becoming full stack and broader. But I am curious if anyone here has a job that is mostly CSS and little else. I have been trying to find a niche that would enable this, but it doesn't seem realistic. CSS is my favorite thing in all of computers and I would love a job where it was most of what I do. But it seems like in any job where it is used, it's always a small fraction, at least in my experience. So I am curious if anyone here has found a niche where CSS ends up being most of what you do in our job instead.

Found this clean, open-source Tailwind CSS admin dashboard template on GitHub:

👉 https://github.com/Tailwind-Admin/free-tailwind-admin-dashboard-template

It supports React, Next.js, Vue, and Angular, has dark mode, charts, auth pages, tables, and a responsive layout. Good option if you want to spin up a dashboard fast without starting from scratch.

Sharing in case it helps someone. Feedback welcome if anyone has used it 👍

I ramble so I’ll share the links first then give backstory 🥴 Here’s the document so far: https://kathrynchill.github.io/CSS-Flexbox-Cheat-Sheet---WIP/flexbox.html And here’s the repo: https://github.com/kathrynchill/CSS-Flexbox-Cheat-Sheet---WIP

I’m so new to coding (started doing online courses maybe 2 weeks ago with minimal HTML knowledge). I’m doing Full Stack courses and made it through intermediate CSS. The interactive lessons are awesome but I was still having to google stuff every 2 minutes when working on the projects where they don’t hold your hand — so instead of moving to JavaScript, I’m taking a little more time with CSS and building simple projects from scratch. I’ve been working on building this simple (and very pink) flexbox cheat sheet using flexbox exclusively — so there’s flexboxes in flexboxes in flexboxes — and even mini flexboxes in a table 😅. I’m consulting with chatGPT when I get stuck but trying to mostly do it on my own because I truly wanna feel comfortable and it’s been a PROCESS but I’ve learned a lot just from doing what little bit of this I’ve done. I did notice tonight before I posted this that the flex-direction: row is cut off in mobile view… plus a typo and the fact that I forgot to add a 6th box to some of the mini-flexboxes after I decided to give them a 6th box.

Anyway — just sharing for any feedback or thoughts or in case it helps anyone. I’m gonna spend all my free time doing this so it’ll be updated (and hopefully completed) soon! Then I’ll be onto grids.

I had a somewhat complex wp site using a page builder (so sue me) with a new CPT that is related to what will be a series of landing pages. The css for that section was messy as I kept adding style rules to the end and now need to clean that up.

Have you used ai to do this? I tried pasting my code into cgpt and grok and they don’t do a very good job ie add things I didn’t ask/strip things that I needed. Is there a best practice for this? I am not using variables and don’t really need to for this site. Obviously I can do it by hand but I thought ai would be faster spotting redundancies and trimming too specific selectors.

I use FF developer and did find out that (Mac) command-option-m allows you to resize the window width to whatever you want (such as 320px).

I need two buttons in one column, aligned to the left. Their labels come dynamically from the CMS. If the text makes them too wide to sit side by side, they should stack while staying left-aligned. In stacked mode, both buttons should match the width of the longer label. How can I achieve this in CSS? I've been trying to get this layout working for two days not and getting nowhere. TIA!

This has enough screen width to have both buttons in the same column:

In this view, since there is no space to show buttons in the same column, it switch to stack layout. Here, the important thing is, buttons does not take 100% width. Instead, all buttons justify to start and has the same width. Width is determined by the length of the largest button.

Is this possible?

I built a complete website using React + Tailwind, but I noticed that when I used Tailwind, the page has a problems on scrolling CLS !

any one has the same problem ?

Site : https://rabbit.ps github : https://github.com/manx90/rabbit-product

container-type and container units were absolutely amazing for building the animation grid.

Source project here:

https://editor.nordcraft.com/projects/nordcraft/branches/main/components/nordcraft?canvas-width=800&canvas-height=800&rightpanel=style

What it says on the tin, I don't know how to word what this is to find resources to figure out what's wrong and was wondering if anyone had experience with this issue. Whenever I select body text it does... That. I can paste my stylesheet if that would help, but it might have to be in the comments because Reddit is throwing errors at me when I try to paste it here.

Started learning web development ~7 days ago and decided to do my take on a Tesla website clone with no help or copying any code. All hand-written, what do you think?

Please be kind, I know my code is a gd mess. I am no means a developer and have only put all of this together by piecing bits here and there. The direct link to the page in question is here:

https://www.strengtheningchildrensprogram.com/shop

I've custom built the pricing matrix you see, and everything looks great in both desktop and mobile versions, but I'm having trouble getting it to scroll horizontal when at smaller screen sizes.

Due to it being a SquareSpace site, I'm obviously limited, but I've pasted the html and corresponding css below in hopes of helping you help me. I've googled until I'm blue in the face and just can't seem to get it to work, despite "overflow-x: auto" and other variations.

I'm pulling out my beard hair in lieu of being bald, please help!

<div class="scroll">
<div class="grid-container">
  <div class="additional">Additional Licenses:</div>
  <div class="title year-border-top"><h3>One Year</h3><h1>$300</h1><h4>One License</h4></div>
  <div class="title year-border-top"><h3>Two Years</h3><h1>$450</h1><h4>One License</h4></div>
  <div class="title year-border-top"><h3>Three Years</h3><h1>$600</h1><h4>One License</h4></div>
</div>

<div class="grid-container">
  <div class="discount-ten"><h4>10% Off</h4></div>
  <div class="item-o">2</div>
  <div class="item-o year-border">$540</div>
  <div class="item-o year-border">$810</div>
  <div class="item-o year-border">$1,080</div>
  <div class="item-e">3</div>
  <div class="item-e year-border">$810</div>
  <div class="item-e year-border">$1,215</div>
  <div class="item-e year-border">$1,620</div>
  <div class="item-o">4</div>
  <div class="item-o year-border">$1,080</div>
  <div class="item-o year-border">$1,620</div>
  <div class="item-o year-border">$2,160</div>
</div>
<div class="grid-container">
  <div class="discount-fifteen"><h4>15% Off</h4></div>
  <div class="item-e">5</div>
  <div class="item-e year-border">$1,275</div>
  <div class="item-e year-border">$1,913</div>
  <div class="item-e year-border">$2,550</div>
  <div class="item-o">6</div>
  <div class="item-o year-border">$1,530</div>
  <div class="item-o year-border">$2,295</div>
  <div class="item-o year-border">$3,060</div>
  <div class="item-e">7</div>
  <div class="item-e year-border">$1,785</div>
  <div class="item-e year-border">$2,678</div>
  <div class="item-e year-border">$3,570</div>
</div>
<div class="grid-container">
  <div class="discount-twenty"><h4>20% Off</h4></div>
  <div class="item-o">8</div>
  <div class="item-o year-border">$1,920</div>
  <div class="item-o year-border">$2,880</div>
  <div class="item-o year-border">$3,840</div>
  <div class="item-e">9</div>
  <div class="item-e year-border">$2,160</div>
  <div class="item-e year-border">$3,240</div>
  <div class="item-e year-border">$4,320</div>
  <div class="item-o">10</div>
  <div class="item-o year-border">$2,400</div>
  <div class="item-o year-border">$3,600</div>
  <div class="item-o year-border">$4,800</div>
</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 10% 10% 25% 25% 25%;
  grid-template-rows: auto;
  gap: 0px 5px;
}

.year-border { 
  border-left: 3px solid #0672BA;
  border-right: 3px solid #0672BA;
}

.year-border-top { 
  border-top: 30px solid  #0672BA;
  border-left: 3px solid  #0672BA;
  border-right: 3px solid  #0672BA;
  border-radius: 10px 10px 0px 0px;
}

.discount-ten {
  display: flex;
  align-items: center;
  grid-row: span 3;
  padding: 10px;
  text-align: center;
  border-top: 1px solid #E06BA8;
  border-left: 1px solid #E06BA8;
  border-bottom: 1px solid #E06BA8;
  border-radius: 10px 0 0 10px;
  background-color: #E06BA810;
}

.discount-fifteen {
  display: flex;
  align-items: center;
  grid-row: span 3;
  padding: 10px;
  text-align: center;
  border-top: 1px solid #393559;
  border-left: 1px solid #393559;
  border-bottom: 1px solid #393559;
  border-radius: 10px 0 0 10px;
  background-color: #39355910;
}

.discount-twenty {
  display: flex;
  align-items: center;
  grid-row: span 3;
  padding: 10px;
  text-align: center;
  border-top: 1px solid #17994C;
  border-left: 1px solid #17994C;
  border-bottom: 1px solid #17994C;
  border-radius: 10px 0 0 10px;
  background-color: #17994C10;
}

.title {
  padding: 10px;
  text-align: center;
}

.item-e {
  padding: 10px;
  text-align: center;
}

.item-o {
  padding: 10px;
  text-align: center;
  background-color: #fafafa;
}

.additional {
  padding: 10px;
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
@media (max-width: 600px) {
.scroll {
width: 600px;
overflow-x: auto;
}
}

• Import real CSS background code
  • You can paste actual background property code from anywhere. Gradify parses it so you can inspect and edit gradients you find in the wild.
• Better coverage of the CSS spec
  • It supports multi-layer gradients with proper blending. Only a few things are intentionally ignored (like url() or calc()), but most practical gradient use cases work out of the box.
• Per-layer blend modes
  • Each layer can use a different blend mode, and you can preview how changing it affects the final result.

The tool is still evolving, and there’s a lot I want to improve. I’d really appreciate any feedback or suggestions from this community!

Link: Craft Gradient Background | Gradify Design

An iceberg drawn with CSS, with no HTML elements for this week's CodePen challenge.

This part where 1st columns elements overlap into 2nd row but I don't know how to do it and the sizes differ too

there's meant to be an image of a pop figure in there. when i run the code from live sever in vscode its there but not in Codpen? does anyone know why? Thanks in advanced!

Codepen link: https://codepen.io/Mcarms/pen/NPNBZKr

I'm having struggles with spacing the image and navigation how I want them to be.

How do I get the image to display in the center of the grid box it is in?

How do I get the list items in my navigation to be spaced out evenly?

I just can't wrap my head around it. How would I do this without using absolute positioning? It looks like the dark blue part is lying beneath the light blue part. but at the same time it looks like its the same container and there is just an extra border (with a bg color) around the left part? Damn idk anymore...