Hi, so basically i was making cards in which i used ```<details>``` and ```<summary>``` tag so create description.
But than i faced a problem, by default the align items is set to stretch, so when one card height increased the others height also increased(provided we havent set a max height to the cards).
I fixed it using ```flex-start``` which scales only one card when its description is shown, i experimented with other values such as ```flex-end``` , ```center``` etc.
I thought ```align-items: flex-start``` is only used to position elemnts on the start on vertical axis, but how is it functioning in this scenario,
Sorry the question may be dumb but i wanna know how it actually works.
Here's the code

Here is the CSS!!
card-container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    align-items: flex-start; /* Ensures cards are independent in height */
}
.card{
    max-width: 325px;
    min-width: 325px;
    width: 100%;
    flex-wrap: wrap;
    margin: 50px;
    background-color: #1e272e;
}
.card-image{
    max-width: 325px;
    width: 100%;
    max-height: 200px;
    height: 100%;
    object-fit: cover;
}
.card-content{
    color: white;
    text-align: center;
}
.card-button{
    background-color: black;
    font-weight: bold;
    padding: 10px;
    text-align: center;
    color: white;
}


```
<section class="card-container"> 

        <div class="card-base img-effect-default max-min-width-200 margin-20"> <!--Apple Card-->
            <img src="/Images/ApplePlant.jpg" class="card-image-base max-min-height-200">
            <section class="card-content">
                <h1>Apple</h1>
                <details>
                    <summary class="card-button display-inline-block">Read More</summary>
                    <p1>
                        The apple (Malus domestica) is a popular fruit tree known for its sweet, 
                        crisp apples and beautiful blossoms, 
                        thriving in temperate climates. 
                        <a href="https://en.wikipedia.org/wiki/Apple" target="_blank">
                            Check the wiki for more info.
                        </a>
                    </p1>
                </details>
            </section>
        </div>

```

Hey guys,
I know Python, Java, and C++, and I wanted to move towards full-stack web development. I've completed basic HTML, CSS, and JavaScript.

JS is good, but CSS is tough! There are so many things to remember in CSS, like the numerous properties with similar names but different purposes. And then there's Flexbox and Grid.

Guess what? In Flexbox, there's a property for centering, and in Grid, there's a property for centering too, but their names are different! Why does it have to be like this?

I even tried Tailwind, but I realized that to get good at Tailwind, I first need to get good at normal CSS.

Do you guys suffer from this too? If not, how do you manage to understand it all?

Hi, I recently moved my CSS file to a new folder named CSS in my project, and now it’s not linking to my HTML file anymore. The styles aren’t applying, and I’m getting a MIME type error in the browser console.

It works fine if I move the CSS file back to the same folder as the HTML file.

I’m using VS Code and Live Server. How can I fix this issue?

Thanks for any help!

Just to start down, I want everybody to know that I am 13 year old, so please don’t mention unnecessary work stuff and such. I started learning HTML around 5-6months ago. I use Programiz, an online self-teaching course, and went through basics, and since, they just uploaded CSS at that moment, I knew that was just next thing to do. Now (I may be off by weeks or even months, I am so sorry!), as 3 months went by, I am almost finished with the course and lots of stuff. The problem is that I don’t really have an idea how to evaluate myself and how to know whether I know CSS decently or not. So, if there are any front-end developers out there, can they write down me a short (unless you are willing to do long one) “checklist” of what CSS properties/functions I need to know in order to fall in “decent” category. Also, I am open to any suggestions or recommendations from people that are familiar in this topic!

(so sorry if I wrote down stuff incorrectly somewhere - English is not my first language)

I'm a happy amateur fiddling around with a just for fun-project of mine. I added a custom checkbox to my site, copied from the following source:

codepen.io/NadGu/pen/WzKmLB

Once I introduced this code to my site *all* my checkboxes started using this new format. How should I alter the code in order to only make only certain selected checkboxes use this pimped up format?

share with other frontend devs too.

The body bg color is yellow and it has covered the entire screen but when i selected it, it has only covered the top part and i can't make the the red box (h: 50%, w:50%) bigger.

I'm a complete beginner

Hi. I know how to use Grid syntactically.

What I don't know is HOW the grid ought to be used. Here is my dillema:

a) The grid IS the layout. I should shape the cells in the way I want the layout to look and place the content inside these cells.

or

b) The grid is what the layout is mapped UPON. Simply make the grid any way I see fit, then map the pieces/components on the layout on top of the grid in the way the layout will look (similar to the Responsive Grid-View example found on the w3schools).

What way is correct?

Roast as much as possible https://youtu.be/8rYCgrrbHqk

Fell free to remove your frustrations.

I'm using Firefox's DevTools to change the styling on a website, and located an element that I'd like to come back to again later. This screenshot shows the element I'd like to revisit. I was just wondering what the most efficient way to find that exact element again would be.

hi, i'd love to have a vertical line between `sticky` and `header`, while keeping border collapse.

is it achievable? do i need to hack it somehow?

https://svelte.dev/playground/8420bc94ffb7416cae7b53dc31d4f821?version=5.16.0

in this repl (not svelte related), if you remove the `position: sticky` line, it looks how i want, but i'd lose the stickiness.

what to do?

screen recording, illustrating vertical extending of the grid

Hi, i need the grid cell (page) contain an element with specified aspect-ratio (in this case 1). The element must be limited by width and height of the cell. I have tried multiple properties, but all i get is that i can only limit one of the side, while other side of an element will extend the grid size.

I need to prevent extending of grid vertically (which can be seen in the video)

.editorContainer {
    display: grid;
    grid-template-columns: 80px minmax(auto, 1fr) 80px 160px;
    grid-template-rows: 40px minmax(auto, 1fr) 160px;

    grid-template-areas: 
    "pageHeader pageHeader pageHeader sideHeader"
    "sideLeft page . sideRight"
    "footer footer footer sideRight";

    height:100%;
    max-height: 100%
}

.page {
    grid-area: page;
    align-self: center;
    justify-self: center;
    margin:auto;
    aspect-ratio: 1;
    width: 100%;

    background-color: rgb(77, 123, 111);

https://jsfiddle.net/nyz2a70L/2/

Here is my use case: I don't use any framework for my small project, I'm using only lightweight libraries which are good to go with cdn link. But now I found myself in situation when I want to optimize one part of the project: CSS. Now I have to include on my page 3 CSS files: 1) a theme made by other person; 2) some fixes and improvements for previous file made by yet another person; 3) my additions for two previous files.

What I want to achieve: I want some tool to process those three files, throw away duplicated styles and minify them into one neat and efficient CSS file.

What I don't need: I don't need any CI/CD and I don't need to process other parts of the code. Those CSS files are more or less complete and if I will ever make any changes to them I don't mind to process them manually again.

I'm not familiar with build tools enough to know if those are capable of doing that. In my experience it always was all or nothing. Can you recommend any solutions for my need?

I know there are so many ways to center elements in CSS Flexbox, Grid, margin auto, etc. but I always feel like I’m overcomplicating it. What’s your preferred method for centering, and do you have any tips for choosing the best approach in different situations?

I'm trying to build an interlinear with the following code:

<RUBY><ruby><ruby>καὶ<rt>καί</rt></ruby><rt>-</rt></ruby><rt>CONJ</rt></RUBY> <RUBY><ruby><ruby>ἐν<rt>ἐν</rt></ruby><rt>in the middle of...</rt></ruby><rt>PREP</rt></RUBY> <RUBY><ruby><ruby>τοῖς<rt>ὀ</rt></ruby><rt>-</rt></ruby><rt>T-DPN</rt></RUBY> <RUBY><ruby><ruby>λοιποῖς<rt>λοιπός</rt></ruby><rt>others</rt></ruby><rt>A-DPN</rt></RUBY> <RUBY><ruby><ruby>ἔθνεσιν<rt>ἔθνος</rt></ruby><rt>gentiles</rt></ruby><rt>N-DPN</rt></RUBY>

How can I get ἐν aligned to the center ?

p.s. forgot to include my codepen: https://codepen.io/Andley/pen/yyBXxwZ

https://preview.redd.it/avigz3lyca9e1.png?width=784&format=png&auto=webp&s=ea6f65cab191f3ab821d4adc74355b1a780241e4

Hello, I'm a new webpage developer and I've been making an old school neocities page. However I have a problem, one of the divs is causing a space on the bottom of the webpage and I learned this through inspecting the elements of the page. I've tried padding and margins to 0 and everything else but nothing seems to work.

Here's my codepen: https://codepen.io/Squiddy-Pineapple/pen/OPLjXmK

Here's also a screenshot of the webpage:

https://preview.redd.it/ctrm4s8ur99e1.png?width=1913&format=png&auto=webp&s=5d12ca6c0434e50494d06519b9e6ad2eab97d0c0

What do I do to this div and how do i fix this because in VSCode the preview looks fine then I see the webpage and it has this space from the div

Hi, I am not even a beginner or newbie to CSS/code, literally my only experience is that in high school I took an HTML class and made a few MySpace layouts back in the day. So please excuse my lack of formal knowledge of coding, and any knowledge of coding terminology as well. I'm very much a fish out of water and I am flailing!!

I work for a small business managing and making our marketing content and projects, and because I "built" my own personal website a few years ago on Format, I have been assigned the task of building my company's new website on Wix. I would love to give this project to an actual web designer, but unfortunately we don't have the budget for it currently, and we have a very short deadline to have the site up and running.

I came to this Subreddit for help with an obstacle I'm having while making our website. Basically, the website's 'Home' page will have our logo in the top corner, with a running slideshow of full-screen images. The logo is a basic vector text .svg file, in black, transparent background obviously, that overlaps the full-screen image slideshow. The problem is that I would like the logo color to be adaptive/responsive to the lightness/darkness of the background images. For example, the black version of the logo appears when the background is a lighter color, and the logo inverts to the white version when the background is darker. Currently the black logo is blending in too well with the darker images in the slideshow, so I would like the logo to change to white to pop out, but only for certain images.

Below is a basic illustration of what I'm talking about:

https://preview.redd.it/892iu4k3g89e1.png?width=811&format=png&auto=webp&s=010238c8af6109fb29d6654cea96fc5c8dd47507

https://preview.redd.it/6wdn2dm4g89e1.png?width=915&format=png&auto=webp&s=a5ff7fea0f95d2196afc41fc243fa2bd7bae80a8

I have never used Wix before, and I literally just started making this website last week, so I am still learning as I go, but how exactly can I go about creating this? I know Squarespace has a responsive feature where the text automatically changes based on the background, but I also understand that responsive text is very different from a responsive image. Is this even possible with a vector image file? If so, what code can I embed in the header? And if it's not possible, then what should I do to make it possible? Unfortunately this feature is a "must" for the business owner, so I have to find a solution no matter what.

Any advice or recommendations would be incredibly helpful and appreciated! Especially from anyone who is more familiar with Wix and the Wix interface or whatever.

Thank you in advance!!

What resize do you recommend for an image that serves as a bullet for a “li” tag?

I want to create a animation in which there is a bottle on the hero section, when we scroll down the bottle will also follow us down and when we reach a certain part, the bottle will be in a certain position for a while.

And again we scroll, then the bottle will also go down and take another position.

How do I make that while it also being responsive?

If I change the background color of a <button> it seems to also cause the <button> to lose its slight radius and have a much thicker border.

I'm trying to level up my CSS skills and would love to learn from this community. What are some lesser-known CSS properties, techniques, or hacks that you think are game-changers but often overlooked? Bonus points if they’re practical for everyday use! Examples, code snippets, or links are super appreciated.

I am making a website, but I don't get the footer on the end of the page. I do not want it fixed at the bottem, but I want it after all the text. In the images you can see the code. If you can help it would be nice. I'm new to coding.

https://preview.redd.it/ug6k6wk2109e1.png?width=1366&format=png&auto=webp&s=470859ad3f64e66136087b13f3d540c603473095

https://preview.redd.it/gobw1wk2109e1.png?width=1360&format=png&auto=webp&s=9300b37fbdc3145b167b61307b1fcc30fce251c5

https://preview.redd.it/w8laywk2109e1.png?width=1345&format=png&auto=webp&s=88bb4ddadf2c79124f8b5b8df4d7de3ff8a76675

The "hoofdsite" and colour change should be the footer