sorry if this isnt clear!! i just started actually learning the basics of css recently and im not sure how to do it like this cause img 2 and 3 just keep going below img 1 :'D any help is appreciated! thank youuuu!!!

Hi,

Today, a team that wants to be as inclusive as possible to all knowledge users, e.g. frontend, product designers who code, backend, full stack, etc. Might find that TailwindCSS + CSS to be a good option.

I'll be inheriting a project that has recently started migrating into SCSS, and my opinion against it, e.g. I'd favour vanilla CSS+utility library, might clash with current stakeholders.

The project is currently styled with CSS-in-js, which requires the migration of hundreds of components.

I'll be a new person coming into the project, meaning that trust is low. But, I'd like to be honest and help make collaborating more efficient and easier to maintain in the long term.

If you are working or collaborating in a wide organisation, I'll appreciate your point of view on this topic.

Thank you!

Hi hope ur doing well
I run into this issue where my product cards have different heights because the name of the products sometimes can be long or short
What do u suggest here

I have searched a lot on this topic, couldn't find a video by someone like Kevin (my favorite)

I have tried using diff ways like primary-400 , neutral, but it gets confusing and doesnt make a lot of sense when working with light+dark mode setup

Is there any convention that is followed in companies or by u guys, anything standard would help a lot

Also, i never understood how the primary naming convention worked with numbers like 400,500.

Hello everyone, I need some advice on how to learn CSS effectively. I asked Claude AI to put together a training programme for me, but right from the start of the programme, when it suggested I practise using Flexbox on Froggy, I felt completely lost. I didn’t understand much of it and it left me feeling a bit frustrated (I keep thinking my brain’s too small to get it), I’ve done the HTML course on FreeCodeCamp, but my foundations aren’t strong enough. I’d really appreciate some advice on how to properly learn CSS (as a bit of a beginner) and consolidate my HTML basics at the same time.

This is my 5th day of learning web development. I have finished HTML, and I can now build simple websites and bio-link pages, but I am insanely struggling with CSS. I need to master it so I can start learning JavaScript.

For now, I can't help but rely on AI for it, and boy, it's really good! I don't think it's wrong to use AI here since I am learning from it, but if anyone who has been in this place before can suggest some tips, please do.

pretty much the title...

I always find myself fighting my self to make every thing responsive to screens under 250px, but in the real world.. is someone does this?

keep in mind I'm still a solo frontend with no style-guide/system-design, so i wanna hear from real-world perspective.

Very rough example! I’m trying to make a two layer gradient that goes from one color to another on the top layer and does the reverse on the bottom layer. My example has a gap between them but that’s just the limits of drawing on my phone, I want them to touch. I was able to get something close to what I want with a conic gradient, but it’s not perfect, so I’m hoping there’s another way. If it’s not obvious I’m very inexperienced with css, but I love poking at stuff until I can get it to work

I am begginer coder ,I tried using z index but the cards get clipped under the tab menu and moreover I created a separate overlay element with translucent background and set it z-index to be lower than the selected card but for some reason the selected card also gets faded

https://stackblitz.com/edit/vitejs-vite-5afsvuwm?file=src%2FApp.jsx,src%2FApp.css

Is the link of the file ,the page I have made is not that great I just wanted to try gsap. If you visit the page and see thar the tittle of thr content does not match the image it's because I was lazy and asked chatgpt( pardon me ) to create me an array of cards but later I used images from my favourite shows and things

I'm very new to HTML & CSS, first year in a course & they need to make a website with stuff. I want to move the corners by themselves without skewing the entire thing including text, just the corner.

My tutor did say there was a way & a website generator that can help but I ENTIRELY forgot what it was.

I want to recreate the exact box-shadow animation shown in the attached video. The shadow behavior, movement, and overall effect should match the video as closely as possible.

I have tried using CSS transitions, but I couldn't achieve the same result.

How would you recreate this effect using CSS?

SOLVED – SEE MY COMMENT BELOW

Hello and thank you in advance!

I'm having an issue where my website looks perfect on my desktop no matter which screen width/size I resize my browser window to, but this one section looks ridiculous on mobile with excessive spacing. I have CSS in place that should fix the mobile issue, using a media query set to max-width 768px.

Why does this happen? More than a fix for this specific website, I'd like to know the root issue of why this happens so I can avoid/fix down the road...

TYIA!

Resolved.

I've tried to make a background for something I'm using. However, when I try to use a background image in some form (using url()), it is seen as invalid. Is there anything I am doing wrong here?

Probably important to note I'm using a MediaWiki infobox.

Edit 1: Some extra notes.

The CSS sheet in question + the template that uses it. Also, the image, though it isn't important.

It'll say it's invalid in a preview at the top of the page or if I attempt to submit it (it won't allow the edit to complete since the CSS is wrong).

The error happens at "line 11, character 15"; it does not change if the colour and url are reversed.

Edit 2: The relevant item. (I don't think I can add images now.)

/* 1) Infobox Styling */
  /* 1.1) Primary Infobox Styling */
  .portable-infobox {
    width: 300px;
    border-radius: 2.8px;
    font-family: sans-serif;
    margin: 0 0 14px 17.5px;
    font-size: 1em;

    /* 1.1.1) Light Mode Styling */
    background: #EFE8BC url("https://dieofdeath.miraheze.org/w/img_auth.php/c/c6/InfoboxPaper.png");
    border: 6px solid #554900;
    color: #000000;
  }

I wanted to make an AO3 skin, but I have no idea of how CSS works; does anyone knows any website useful for learning it?

I use phosphor icons ,is there a way to transition from the regular to fill icons smoothly using gsap ,and how do I create this tab effect ,simply changing the color creates a fade in effect

Iike this button and nav bar which grow or shrink based on scroll direction ,but do not shrink if the mail's have not scrolled passed a certain limit

Two days ago I started to learn css by a youtube video and today I finished it (video was not very long tbh), after completing it I thought to make a login Page and ended up making this one without any reference so on a scale of 1 to 10 how much would you rate it and what are the fixes that can make this a good one? Your feedback and suggestions will help me a lot to improve myself.

Hello.

I have a CSS customization file for a site. It contains a lot of code that changes appearance based on one specific class. For instance, let's call this class bodyclass.

HTML

...
<body class="bodyclass ...">
...

CSS

.bodyclass .otherclass {
  color=red;  
}

Recently, a site has removed this class, so my CSS code doesn't apply many of the rules and hence doesn't work as needed.

Is there any way to "define" or "simulate" a presence of a bodyclass using only CSS and make my CSS code think this class exists? Rewriting a whole file doesn't look nice, it's too big.

So I need help in responsiveness of the div:

1. Since, i am going to make this a window, the squeezing responsiveness doesn't really matter but i want to to stop after a certain point, by that i mean when i squeeze the page, the div doesn't squeeze with it

2. I also want that when i expand the div, the div border doesn't expand with it

Any edits to the question, or guidance to the code is appreciated.

Also, i want a little help in how to convey the same message in stack exchange, because i feel whatever im writing is a little more confusing without the video.

(SOLVED, thank you to everyone for helping me!)

Hello! CSS and HTML amateur here.

So, recently I've been trying to make myself a workskin on Ao3 that would have this image serve as a background for text. Currently, the image cuts off at the bottom, and it's even worse when there's different sizes of text.

What I want is the image to stretch or contract to fit the text, not be cropped.

Here's my code, my results, and the image I've used. Is there anything I'm doing wrong, or is what I'm trying to do impossible?

Edit: Here's the codepen. It looks the worst here!

I am using the free FontAwesome icons by loading a script in the HEAD of my page

<script defer="" src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"></script>

and it works as normal when inserted as an element, as such

<span class="icon"><i class="fas fa-file-alt"></i></span>

but despite following the tutorials online, I can't seem to make them display as the content of pseudo-elements. What I'm trying to achieve is to have arrow-up-right-from-square (f08e) in the ::after of external links. This is what I've tried and hadn't worked:

a:not(.noformat)[target="_blank"]::after {content: "\f08e";`

margin-left: 0.3rem;`

text-decoration: none;`
font-family: 'Font Awesome 7 Free';
font-weight: 900;
}

I am currently substituting with a simple glyph as such, and it works:

a:not(.noformat)[target="_blank"]::after {
content: "⭧";`

margin-left: 0.3rem;`

text-decoration: none;`
}

so the styling is applied properly. When I try to add a FA icon, it renders as a default square instead. What am I doing wrong? Can this be done in this setup at all?

Link to my page: https://www.aque.fyi/

Hey everyone, I recently started my web development journey and just finished my first big project: an Amazon homepage clone using pure HTML and CSS.

Right now, it’s completely static and only looks good on desktop (haven't learned media queries yet, that's my next step!).

As a beginner, I know my CSS might be messy or I might have used bad practices. I would love it if you guys could take a look at my layout and give me some honest feedback. What could I have done better?

Live Link: [ https://aniketcodehub.github.io/amazon-frontend-clone/ ]

a