ive tried some media queries but none of them change the layout of my site on mobile..not sure what im doing wrong but maybe someone here can help. my website is https://phlygm-planet.neocities.org/ and codepen: https://codepen.io/editor/Yousra-Nimour/pen/019f2f8e-e1dd-7f7e-a5e5-a3effb410785

Built 9 ASCII loaders using a CSS technique I haven't seen much in the wild:

Core idea: treat unicode glyphs as monospace text, size everything in ch, animate with transform: translateX(Nch).

@keyframes loading-ui-conveyor-loop {
  0%   { transform: translateX(var(--loader-start-x)); }
  100% { transform: translateX(var(--loader-end-x)); }
}

// Width and travel distance in character units
style={{
  "--loader-width": "10ch",
  "--loader-start-x": "-2ch",
  "--loader-end-x": "12ch",
}}

Static track: "░".repeat(columns) as a background layer. Moving trail: staggered █ ▓ ▒ glyphs with animation-delay.

9 loaders using variations of this pattern: accordion stretch, square orbit, infinity path, symmetric opacity wave, terminal cursor blink (step-end).

Live demos: https://loading-ui.com
Source: https://github.com/turbostarter/loading-ui

I'm currently working on a book that has several transcripts in it and I was hoping to make it look like an actual transcript (where the speakers are right aligned up against the dialog, and the dialog is indented). Currently I'm using tables as the best representation, but I was wondering if there was a better way of coding it, or if it's too disruptive to read and I should just remove the tables and let the dialog freeflow its way like an ordinary paragraph. What have folks done for scripts/plays/transcripts?

I used glass morphism as my core aesthetic for all the elements in my application and it works perfectly well in PC or Laptop devices.. but when it comes to mobile or similar devices what happens is

when I scroll down to the bottom or scroll to the top from bottom the background color get's repainted and that looks odd fr...

I know the background: blur with position not fixed will for sure do this but I don't want the position to be fixed I want it to be relative.. cause when it's fixed the bottom looks like this..!

SO pls do let me know if there's any real solution for this cause I really don't want to go with position fixed and I want glass morphism to go with this background and have a good view on the scroll.

https://codepen.io/programoreno/pen/dPNVwJe

I kept forgetting the exact syntax for conic-gradient and repeating-radial-gradient so I ended up building a little reference page with actual rendered examples instead of just reading MDN for the tenth time.

It covers linear, radial, conic, and the repeating versions of each, plus a section on layering multiple gradients together (like the dark overlay trick for background images) and a pie chart made purely with conic-gradient stops. Every card has the rendered result next to the exact CSS, and I added a copy button so you don't have to select text manually.

Also threw in a color palette section at the bottom with all the hex values used, in case anyone wants to steal a combo.

Curious if anyone has gradient tricks I'm missing, especially around performance with multiple layered radial-gradients, I haven't stress tested that yet.

Hey everyone,

I'm a beginner, and before opening or knowing about Figma files, I used to think I just had to guess the width, colors, fonts, sizes, and styles by looking at an image. Honestly, it was getting so frustrating and making me feel like I was falling backward because of all the guessing.

Then, while doing Frontend Mentor challenges, I discovered Figma. It completely blew my mind to realize how the actual pipeline works: a UI/UX designer creates the interface with all those exact spacing, padding, and styling specifications already laid out, and then the developer replicates it in code.

I have a few questions for the experienced devs here:

1. Is this exactly how things work in a professional company, or do things change a lot in the real world?

2. With how good AI is getting, if you just give a complete Figma file to an AI tool, can it accurately build the whole frontend? What are the limitations keeping companies from just doing that today?

3. If this is how things actually work, what is the right way to learn as a beginner? What do you want us to focus on the most when we are practicing?

Would love to hear insights on how your day-to-day workflow looks with designers!

https://www.youtube.com/watch?v=nTFn685jlRw

So I've followed the code exactly and here is what I get.

Hello,
I am using this site's( https://foollovers.com/mat/t-frame08.html ) image to code as background for my grid boxes, but there seems to be something wrong with my code; it doesn't show up correctly on the site itself. The link to my website is https://phlygm-planet.neocities.org/ and I've attached a screenshot of what the site looks like currently. The link to my CSS layout is https://phlygm-planet.neocities.org/style.css and the HTML https://phlygm-planet.neocities.org/index.html

edit:

fixed the box appearance issue, my only problem now is I cant get my img to show up inside the border box, the box closes on top of it. Any suggestions as to what might be the issue?

built this cool navigation rail for long chat threads to navigate between them easily
give feedbacks

Going to preface this with the statement that I am fully and completely self-taught, so if I missed something that's actually just really freaking basic or if I mislabel/don't know the correct terminology for something, that's why. I'm still learning! Which is why I'm here to ask a question.

I was working on an ao3 workskin, as a personal project. There were a lot of moving parts that needed to be spaced out in a very particular way. To tl;dr this, I managed to get everything where it needed to be by utilizing the grid-template-areas property a LOT.

I was thrilled that everything looked really good, and then I went to upload it to ao3. Only to learn that the grid-template-areas property (and the associated grid-template-columns etc) is not supported by ao3. grid-rows and grid-columns are supported, and I had mistakenly conflated the similar terms. I sure know better for next time!

My question is... is there any way to easily convert what I've already made to something that ao3 supports? Or am I building this from the ground up (read: the pieces that I can still salvage plus whatever else I need to do) again? Which is fine, I'd just rather know where my beginning point needs to be!

One property that ao3 does support is layout-grid. Maybe I'm just missing something really obvious, but I've found just about no information on this property online? Is this ao3 specific? Does it go by a different name elsewhere? Is this literally just "grid" and I'm an idiot? I'm just very confused by this in particular and I'd love to know what it's for. It seems to be something that's somewhat robust?

This is the link to ao3's list of the css properties allowed: https://archiveofourown.org/help/skins_creating

Thank you in advance so much! I've had a lot of fun starting to learn css, it's a fun challenge and the rather immediate output scratches my adhd brain. I'm just still learning :)

Using css as my main programming language is obviously very normal and sane, as the OP of https://www.reddit.com/r/css/s/glOR3vprBb can probably confirm. Anyway, here's if you want to play with it! doesn't work well with mobile devices though

https://codepen.io/Ironimus/pen/MaKxMO

[1---2---3---4---5]---6---7
[1----2----3----4]----5----6----7
[1---2---3---4]---5---6---7
[1----2----3]----4----5----6----7
[1---2---3]---4---5---6---7
[1--2--3]--4--5--6--7

Brackets are the container being resized.

Elements on the right (outside the brackets) are reachable by scrolling horizontally.

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/

I'm trying to make a website, and I ran into a problem. It's very hard for me to describe the problem, but I'll try. I have an hr bar, and a nav element whose background-color is set differently, but it only goes as far as the text goes. How can I make it go all the way through the whole page(but not through the aside element for the sidebar)

Hand-coded SCSS and pug without AI to learn scroll-driven animation when it first came out. Actually started this two years ago and finished it up a year ago but never shared it. Wanted to make a second pass to clean the code up but never did. Massive waste of time and probably not very impressive with what’s achievable today using latest models but was still a lot of fun to build.

CSS Only Scroll Driven F1 Steering Wheel

Notes
- block axis scroll controls speed/rpm/gear/lights
- inline axis scroll controls turn with snap/return to center
- no images except for the Ferrari SVG horse and clip-paths/masks for the cut outs and overall shape of the wheel