I did a quick search on the sub and the HTML one but didn't find much. I'm going to post this there as well. Basically, I'm trying to code my site myself using HTML, CSS, and JavaScript. I am finding that I'm creating a CSS file for each main page, which seems counterintuitive. In the CSS files I've created, I'm mostly just changing the "background-image" of the following:

body {

color: #7E7E82;

background-image: url(../images/TJ\_Catch\_Yak.gif);

background-repeat: no-repeat;

background-position: right center;

background-color: #121337;

}

Is there something that HTML can do to replace the image for each page AND keep the same general location? It's of course for school and I'm getting a bit frustrated with this part.

I was thinking that maybe I can simply specify background images for each page within the CSS file? Maybe have a default image if none is specified?

I'm in a process of learning web development. Currently, I am studying CSS and I was wandering is it worth it to create flashcards to remember CSS properties and their values? Obviously, I don't intend to create flashcards for every CSS property and their possible values, but only the most commonly used. Maybe 300 - 400 in total. Is that a good strategy, or is it better to learn and memorize them through doing?

Thank You!

To those who don’t know, in modern browsers you can do this:

main { h1 { color: red; } } without SAAS.

CSS nested structure really solves my problem of CSS being very long and hard to find. Although most major browsers support it, seeing that it was not available before iOS 16.4, I thought it would be better not to use it first, but I feel like Apple will never fix it...

In CSS, I want to establish good practices about variants states on css tag. (I'm in a design system context, so it's a simplified example but a lot of variants are declared in each to component to handle the custom properties as like component style API: you can change high-level component variables values and all is updated in cascade).

I want to define which of both approach is best in some points :

• In term of reusability.
• In term of paint performance (and repaint when state is updated).
• In term of robustness in wide projects (like a design system).

I'm also open to other approach if you think it can be a better alternative to the followings.

The common values:

button {
  --button-color: red;
  --hover-color: green;
  --active-color: blue;

  color: var(--button-color);
}

Approach 1:

The straightforward approach, reassign the property value.

button {
  &:hover {
    color: var(--hover-color);
  }
  &:active {
    color: var(--active-color);
  }
}

Approach 2:

The variable value reassignation. Instead of give a new property to the value, we updating the value. I see this one in the most part of tutorials, articles, blogs...

button {
  &:hover {
    --button-color: var(--hover-color);
  }
  &:active {
    --button-color: var(--active-color);
  }
}

Hello, as you can see in the link, the footer and nav bar won't fill out the page, especially when you minimize the window it gets bad, im trying to figure out how to fix that but I can't find a answer anywhere.

codepen:

(ignore the text In the middle)

https://codepen.io/Jackson-Grove/pen/ZEZVRqB

I wrote this block https://www.codeply.com/p/6jbL7Wl3K2I wrote this block https://www.codeply.com/p/6jbL7Wl3K2 that works perfect for my purpose. A fix-height top bar, and fix-height bottom bar, the middle parts (left and right) are filling the remaining space.

However, I am struggling to make it mobile/small-screen friendly. I want to make the orignal left and right to be vertical now, with a fixed 400px height. I tried to use various media queries, but all have issues.

<div class="min-h-screen flex flex-col">
<div class='bg-blue-700 px-8 flex items-center justify-between py-4 text-white'> Top </div>
<div class='relative flex flex-grow'>
    <nav class='bg-white w-1/2'> Left </nav>
    <main class='bg-gray-100 flex-1'> Right </main>
</div>
<div class='h-20 bg-red-200'> </div>

https://www.codeply.com/p/6jbL7Wl3K2

https://preview.redd.it/bdggzne5v8xc1.png?width=1536&format=png&auto=webp&s=573a35595dd2ea784253ee99a922a10376783a01

https://preview.redd.it/ohdndge5v8xc1.png?width=548&format=png&auto=webp&s=650358ef2cb377bbee395d6988dbabc73ebd266c

I've seen hyphens: auto; work on one website, but I can't seem to replicate it.

Here's the closest thing I made, but, there are no hyphens 🫠: https://play.tailwindcss.com/X9J6Zh62hE

Please help me how to make auto hyphens work.

NOTE: DO NOT USE "­­"­! It seems unrealistic in any dynamic content scenario.

I am trying to make the font size the same as the height of the container, but for some reason, it's the height of the viewport and not the height of the container. Here is my code:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 400px;
  height: 100px;
  border: 2px solid green;
  font-size: 100cqh;
}
</style>
</head>
<body>

<div>Lorem Ipsum.</div>

</body>
</html>

.titleSec .start .character {
    width: 5rem;
    height: 5rem;
    background-repeat: no-repeat;
    background-size: 100% 300%;
    transform: rotateY(180deg);
    background-image: url("/assets/PACK 1.png");
    animation: wing 4s infinite;
}

@keyframes wing {
    0%, 100% {
        background-position: top, top !important;
    }

    25%, 75% {
        background-position: center, top !important;
    }

    50% {
        background-position: bottom, top !important;
    }
}

The css is imported correctly, i can see the image. just the animation is not working. in the chrome webtools section, it recognizes the "@keyframes" but it is just empty

https://preview.redd.it/5ji3g1u5l2xc1.png?width=305&format=png&auto=webp&s=cf55af7d98a0a3ed1e59d72f08b5ffa9583708a9

I'm using Arc Browser for Windows btw, but it is a Chromium browser. can anyone solve the problem, thanks.

im trying to move that infinity logo to make it level right next to where it says "product:.

codepen:

https://codepen.io/Jackson-Grove/pen/ZEZVRqB

the logo is the svg tag at the beginning of the footer

https://preview.redd.it/p95hsotjj0xc1.png?width=558&format=png&auto=webp&s=c9db73f590b2804e7fc5374a83606a762d94135a

Demo: usanowadays .com/?intro

Hi, I'm using the latest Bootstrap and I'm having trouble with my row heights. I currently have 4 rows that I want to take 20%, 15%, 15% and 20%(there'll be more later) of the total window height. It's all smushed up when I run it. My code is as follows:

<div class="container-fluid">
	
		<div class="row h-20">
			<div class="col-lg-4">
				<h1 id="black-header">Black</h1>
			</div>
			<div class="col-lg-4">
				<section id="gameTime"><h1>0:00</h1></section>
			</div>
			<div class="col-lg-4">
				<h1 id="white-header">White</h1>
			</div>
		</div>
		
		<div class="row h-15">
			<div class="col-lg-4">
			 	<section id="black-score">0</section>
			</div>
			
			<div class="col-lg-4">
				<section id="jamTime"><h1>0:00</h1></section>
			</div>
			
			<div class="col-lg-4">
			 	<section id="white-score">0</section>
			</div>		
		</div>
		
		<div class="row h-15">
			<div class="col-lg-4">
			 	 <button id="black-one" onclick="blackPoints(1)">+1</button>
			</div>
			
			<div class="col-lg-4">
				<section></section>
			</div>
			
			<div class="col-lg-4">
			 	 <button id="white-one" onclick="whitePoints(1)">+1</button>
			</div>		
		</div>
		
		<div class="row h-20">
			<div class="col-lg-12">
			  <section>
                            <button id="new-game" onclick="newGame()">New game</button>
                            <button id="timeout" onclick="pauseGame()">Timeout</button>
                            <button id="toggle-jam" onclick="toggleJam()">Start Jam</button>
                          </section>
                        </div>
                </div>

	</div>

I am using a library called `tremor`
that draws charts. I am trying its Tab block. I want to make a tab group that can fit into a parent container which has a specified height. However, I think by default the Tab block doesn’t fit into its parent’s container size, and instead it overflows.

Any suggestions of how to make it size flexible?

I highlighted the border of the parent contain in the screenshot to explain what I mean. The parent container is set to 400px height, but the child somehow overflows.

Below is my code.

import { AreaChart, BadgeDelta, Card, Tab, TabGroup, TabList, TabPanel, TabPanels } from '@tremor/react';
import { sky } from 'tailwindcss/colors';

export default function Page() {

    const chartdata = [
        {
            date: "Jan 23",

            "This Year": 233,
            "Last Year": 289,
        },
        {
            date: "Feb 23",

            "This Year": 233,
            "Last Year": 294,
        },
        {
            date: "Mar 23",

            "This Year": 258,
            "Last Year": 309,
        },
        {
            date: "Apr 23",

            "This Year": 275,
            "Last Year": 314,
        },
        {
            date: "May 23",
            "Last Year": 334,
            // "This Year": 285,
        },
        {
            date: "Jun 23",
            "Last Year": 344,
            // "This Year": 305,
        },
        {
            date: "Jul 23",
            "Last Year": 384,
            // "This Year": 325,
        },
        // ...
        {
            date: "Oct 23",
            "Last Year": 383,
            // "This Year": 347,
        },
    ];


    return (
        <div className="mx-auto max-w-full max-h-[400px] border-8 border-red-600">
            <TabGroup>
                <TabList variant="line" defaultValue="1">
                    <Tab value="1">
                        <div>
                            <Card
                                decoration="top"
                                decorationColor="sky"

                            >

                                <p className='text-tremor-default text-tremor-content dark:text-dark-tremor-content'>Title</p>
                                <p className='text-3xl text-tremor-content-strong dark:text-dark-tremor-content-strong font-semibold'>3000</p>
                                <div className="flex items-center justify-between">
                                    <BadgeDelta
                                        deltaType="moderateIncrease"
                                        isIncreasePositive={false}
                                        size="xs"
                                    >
                                        +9.3%YoY
                                    </BadgeDelta>

                                </div>

                            </Card>
                        </div>

                    </Tab>
                    <Tab value="2">
                        <div>
                            <Card
                                decoration="top"
                                decorationColor="sky"

                            >

                                <p className='text-tremor-default text-tremor-content dark:text-dark-tremor-content'>Title</p>
                                <p className='text-3xl text-tremor-content-strong dark:text-dark-tremor-content-strong font-semibold'>3000</p>
                                <div className="flex items-center justify-between">
                                    <BadgeDelta
                                        deltaType="moderateIncrease"
                                        isIncreasePositive={false}
                                        size="xs"
                                    >
                                        +9.3%YoY
                                    </BadgeDelta>

                                </div>

                            </Card>
                        </div>

                    </Tab>
                    <Tab value="3">
                        <div>
                            <Card
                                decoration="top"
                                decorationColor="sky"

                            >

                                <p className='text-tremor-default text-tremor-content dark:text-dark-tremor-content'>Title</p>
                                <p className='text-3xl text-tremor-content-strong dark:text-dark-tremor-content-strong font-semibold'>3000</p>
                                <div className="flex items-center justify-between">
                                    <BadgeDelta
                                        deltaType="moderateIncrease"
                                        isIncreasePositive={false}
                                        size="xs"
                                    >
                                        +9.3%YoY
                                    </BadgeDelta>

                                </div>

                            </Card>
                        </div>

                    </Tab>
                </TabList>

                <TabPanels>
                    <TabPanel>
                        <Card
                            decoration="left"
                            decorationColor="indigo"
                            className='mt-0 pt-0'
                        >
                            <span className="text-tremor-default text-tremor-content">
                                Title
                            </span>
                            <AreaChart

                                data={chartdata}
                                index="date"
                                categories={["This Year", "Last Year"]}
                                colors={['sky', "gray"]}
                                yAxisWidth={33}
                            />

                        </Card>
                    </TabPanel>
                </TabPanels>
            </TabGroup>
        </div>
    );

}

​

here what I tried

I’m really close I believe. I can style each box individually using the following CSS:

#respond #commentform #comment{color: #FFCC00;
background-color: #483E2A;
border: 0px;
}

If I change #comment to #author or #email or #url it will style the corresponding box. But when I try to change all of the boxes either by duping the code and change #comment to #author etc, all the boxes remain unstyled and just the standard white. This also happens if I try to add #author after #comment (there’s a hierarchy I believe? I’m a noob to CSS)

So what is the best way to go about styling all the fields simultaneously? Thanks in advance. The page in question btw https://tech.minnix.dev/index.php/2024/04/18/hello-world/

I posted this on the wordpress forums but no response.

Solved, see /u/TheMortBM comment

To remove the horizontal scroll bar on multiple different pages I used * {overflow-x: hidden} but the * is wrong so what is the proper way? Please and thank you

I want to change the opacity of the bg image without affecting the text.

I have the following:

.chatFeed {
	background-color: rgba(0, 0, 0, 0.25);
	background-image: linear-gradient(
			to bottom right,
			rgba(222, 222, 0, 0.5),
			rgba(0, 222, 0, 0.5)
		),
		url("/pattern.png");
	background-size: cover, 400px;
	background-repeat: repeat;
}

I don't want to use ::before, because i want the bg image to stay while scrolling.

​

​

​

AAAAAAAAA

So I have a bunch of equally sized cards.

• equal size

• have a gap between them, but not on the outside

Within them, I have text that varies in size. I want to align their tops, between cells.

​

Is this impossible? For examples I see online, generally everything inside each cell is a fixed height except one element that flex-grows
e.g. https://stackoverflow.com/a/52761584,
or they can align the starts but not have equally-sized cards
e.g. https://css-tricks.com/snippets/css/a-guide-to-flexbox/ (okay, it doesn't cover this directly but I ctrl+c ctrl+v'ed in at least 10.8 different combinations)

or most element heights within each card are fixed making everything a piece of cake
e.g. https://stackoverflow.com/questions/58572329/how-to-vertically-align-the-contents-of-css-grid-cards and https://css-tricks.com/almanac/properties/a/align-items/

or the cards are correctly sized but the inside elements can't be aligned... asdasd

​

https://reddit.com/link/1cddoc4/video/bqiiida5hrwc1/player

Did this quick animation in After Effects to explain better. I am trying to make the text grow in its weight smoothly. I am unable to get a smooth animation using components. Should I just have a video play instead of trying to make this work?

hello! beginner level css skills, so not sure if my issue is one that can be easily fixed or nah 😅

i'm working on a project that contains an animation made using pixel art to css, so it's built from box-shadow properties of a div changing in keyframes. i have a div container around it that responds to viewport size, but the animated div stays the same size.

example here: https://codepen.io/internet-dog/pen/ZEZPeeR

i've tried changing the values of the box-shadow to equivalent em/vw with no luck. am i missing something really obvious or is this just not doable?

​

thanks heaps if you can help me out, i'm going a bit cuckoo lol

​

Hey people,

First of all, I'm very new to CSS, and this is my first post here. Apparently it does not break any rule but let me know if this isn't the expected behavior in this subreddit

I'm using generative AI to help me style a custom media player to my Wordpress blog, and it worked just perfectly throughout the design process, as you'll be able to see on my CodePen. It's perfectly functional and looking exactly as I intended it to.

After it was ready, I pasted my custom CSS into the theme's style.css file, uploaded my scripts.js file and tried two different approaches:

First, I added a shortcode function to the theme's functions.php file, trying to create a more dynamic asset that could be used for files with different variables (album cover, song title and source file), like this:

[peteplayer album_cover="http://pedrogalindo.info/wp-content/uploads/2024/04/asa-branca.png" song_title="Asa branca" audio_source="http://pedrogalindo.info/wp-content/uploads/2024/04/asa-branca.mp3"]

I also tried to use a Custom HTML block, and it is partially working: I see the correct file being played, and the correct name appearing. But it is simply not reading my CSS classes

This is how it is supposed to look:

https://preview.redd.it/fvhud3wryowc1.png?width=877&format=png&auto=webp&s=bc8bc8f46b8e765c6423f4f66984fc6574ba60c9

And this is how it's looking:

https://preview.redd.it/f863jwegyowc1.png?width=954&format=png&auto=webp&s=09875e90874595cb3af82b5ce779975755aa0c26

In the next post I'm going to paste my CSS code, and hopefully there's someone in here that will be able to see something i'm not :D

Thank you so much for the patience and, eventually, for the help too!

I'm experimenting with stopping DOM elements (specifically input/textarea/button/a HTML elements) from getting focus and after some playtime, I stumbled on a strange and unique solution.

element:focus {
   visibility: hidden;
}

This causes the element to be hidden and therefore lose focus.
In turn, the lose of focus causes the element to become visible again.

Also:

• Only looking to have a DOM element lose focus.
• CSS ONLY! Not using Javascript/HTML
• Not looking to make the element "invisible" using opacity or colors

I'm looking for comments on this technique since the lost focus at best feels like a side effect and a hack at worst.

Thanks

I have the below CSS that creates a dropdown, as you can see in the attached video, the transition doesn't work to smoothly change it from closed to open but the last link doesn't disappear until the 300ms have passed. How can I fix it? Thanks

@media only screen and (max-width: 901px) {
	nav {
		position: absolute;
		inset: 100% 0 auto;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		background: var(--clr-dark-110);
		border-top: 1px solid var(--clr-light-200);
		backdrop-filter: blur(0.5rem);
		gap: 2rem;
		padding: 2rem;
		overflow-y: hidden;
		visibility: hidden;
		height: 0%;
		transition: all 300ms ease;
	}
	nav[data-visible="true"] {
		height: auto;
		visibility: visible;
	}
}

​

https://reddit.com/link/1cctpbn/video/jr5x7do80nwc1/player

I have now run into this case twice where I want to create a color variable in a style.css file and I either get multiple false errors, or the code doesn't work.

For a little bit more background: I'm trying to configure Waybar and Wofi

----------------------------------------------------------------------------------------------------------------------------------

This works, but I get in-line error messages:

@define-color background #24283b;         Unknown at rule @define-color

window {
    background-color: @background;        property values expected
}                                     at-rule or selector expected

----------------------------------------------------------------------------------------------------------------------------------

This doesn't work, but I don't get any in-line error messages:

:root {
    --background: #24283b;
}

window {
    background-color: var(--background);
}

However, when I try to run it, I get:

Theme parsing error: <data>:\location of ":root"`: Invalid name of pseudo-class Theme parsing error: <data>:`location of variable use`: 'var' is not a valid color name`

----------------------------------------------------------------------------------------------------------------------------------

If anyone knows what causes this / how to fix this, I'd appreciate their input!

so i have this string of css that im trying to modify:

.chatimage { display: inline-flex; width:20px; height:20px; background : {{usernameColor}};

-webkit-mask:url('https://i.imgur.com/YwurIKy.png') center/contain; }

it comes from a custom StreamElements chat widget for Twitch, and this part is an image with a mask over it to make it the same color as the username of the person thats typing in chat. I'm trying to make it just the raw image (a cute green mushroom) and I have very little css experience. I've tried deleting the background portion entirely, ive tried changing it to background: rgba(0,0,0,0.5) because a friend suggested that but that didn't work either. I'm sure there's just an entirely different code I can put there to make it a normal image but I can't find one online that works. I figured I'd post here in hopes that somebody might know how to help! I'll also upload an image of what it currently looks like to make it make more sense

https://preview.redd.it/bm7n8qeltjwc1.png?width=257&format=png&auto=webp&s=49119b30fbb333d748788d13a3d4b98c42417932

Each time I use <h> a mini scrollbar appears next to it. This appeared after I added the overflow-x: hidden; how can I fix this please

I have a page/component. I have divided it into two vertical sections which have a fixed height. Those two sections (lets say 1 and 2) have some items in them. (1's item are in green and 2's items are red in color). There will always be some items in both the sections.

Now if the items in the first column exceeds the length of the section(as in image 1), that/those item/s should go to the next section(as in image 2). How can we do that?

https://preview.redd.it/nh9jo7s73iwc1.png?width=542&format=png&auto=webp&s=d4e955e562e441dc1dc617c6d102850d2524bf7e

https://preview.redd.it/v5g0vd883iwc1.png?width=575&format=png&auto=webp&s=f645d56312bec19d0a3c07c843c84860a24720f4