Kevin Powell - Community•2y ago

side task labels

I need to make this kind of label at the side of my text outside of main area of the page, it needs to be aligned with that text. at first i have done that with a grid (at left bar was that label and in the middle area of the grid i was using flex box for a responsive design) but now I have a problem: I need to make two of these texts next to each other with that label. Under each text there is a content that have to be under that text. I tried to just split my grid to multiple areas but it was just causing more problems when I wanted to make it responsive . . . I also tried to create it with a pseudo elements, but my lack of understanding of css would not let me finish it (although i could move it with position: relative, it would leave its hitboxes at its original position and it can't offset text from where it is really positioned.) can some pro help me with this and tell me how to solve it? thanks a lot

26 Replies

Senra•2y ago

I think the problem that you have has been explained by Kevin in one of his videos. I suggest you check this video out. https://youtu.be/r6hx35TbtN4?t=781 I have linked the part of the video where he demonstrates his implementation. You can watch the full video for more information. Also he uses the css counter property to number the <heading>s

Kevin Powell

YouTube

Build a responsive website with HTML & CSS | Part eight: Numbered list

Because of the way the layout for the numbered list is done, it's a little more complicated than it might appear at first! 🔗 Links ✅ GitHub repo for where I start this video: https://github.com/kevin-powell/fem-manage-landing-page-part-7 #css -- Come hang out with other dev's in my Discord Community 💬 https://discord.gg/nTYCvrK ...

m1.r0OP•2y ago

ow, nice . . . thanks a lot, this will help me for sure (I will try to implement it later and if everything works I will lable this as solved)

Senra•2y ago

Sure

m1.r0OP•2y ago

ok, finally found some time . . . by any chance, do you know how to solve this?

m1.r0OP•2y ago

I made those labels through pseudo-elements (just so I don't need to create them in html every single time). I made that layout according to that video you sent me tho because I'm using pseudo-elements, I can't make multiple before and after elements (I'm using both for that one label) and I need to make another one in that space in the middle when I have two pillars like this

<div class="numbered-task reset-count">
            <div class="task">
                Lorem ipsum, dolor sit amet consectetur adipisicing elit.
            </div>
            <div class="content">
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Saepe, eum? Aliquid blanditiis odio nisi
                    consequatur voluptate, doloribus culpa. Nihil amet animi velit voluptatem eos dolorum incidunt saepe
                    architecto repellendus ipsam!
            </div>
        </div>
        <div class="numbered-task two-tasks-columns">
                <div class="col-1 task">
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                </div>
                <div class="col-2 task">
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                </div>
                
                <div class="col-1 content">
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Saepe, eum? Aliquid blanditiis odio nisi
                    consequatur voluptate, doloribus culpa. Nihil amet animi velit voluptatem eos dolorum incidunt saepe
                    architecto repellendus ipsam!
                </div>
                <div class="col-2 content">
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Saepe, eum? Aliquid blanditiis odio nisi
                    consequatur voluptate, doloribus culpa. Nihil amet animi velit voluptatem eos dolorum incidunt saepe
                    architecto repellendus ipsam!
                </div>
            
        </div>

<div class="numbered-task reset-count">
            <div class="task">
                Lorem ipsum, dolor sit amet consectetur adipisicing elit.
            </div>
            <div class="content">
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Saepe, eum? Aliquid blanditiis odio nisi
                    consequatur voluptate, doloribus culpa. Nihil amet animi velit voluptatem eos dolorum incidunt saepe
                    architecto repellendus ipsam!
            </div>
        </div>
        <div class="numbered-task two-tasks-columns">
                <div class="col-1 task">
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                </div>
                <div class="col-2 task">
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                </div>
                
                <div class="col-1 content">
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Saepe, eum? Aliquid blanditiis odio nisi
                    consequatur voluptate, doloribus culpa. Nihil amet animi velit voluptatem eos dolorum incidunt saepe
                    architecto repellendus ipsam!
                </div>
                <div class="col-2 content">
                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Saepe, eum? Aliquid blanditiis odio nisi
                    consequatur voluptate, doloribus culpa. Nihil amet animi velit voluptatem eos dolorum incidunt saepe
                    architecto repellendus ipsam!
                </div>
            
        </div>

.numbered-task.reset-count {
    counter-reset: task-counter;
    counter-increment: task-counter;
}

.numbered-task > .task { counter-increment: task-counter; }

.numbered-task {
    margin: 1rem 0;
    display: grid;
    grid-template-columns: 0.5fr 4fr 0.5fr;
    column-gap: 1rem;
}

.numbered-task.two-tasks-columns{
    grid-template-columns: 0.5fr 1.75fr 0.5fr 1.75fr 0.5fr;
}


.numbered-task > :is(.task, .content) {
    grid-column: 2 / 3;
}

.numbered-task > .col-2:is(.task, .content){
    grid-column: 4 / 5;
}
.numbered-task > .col-1.content{
    grid-column: 2 / 4;
}



@media (max-width:30em) {
    .numbered-task > .content{
        grid-column: 1 / -1;
    }
    .numbered-task > .task {
        grid-column: 2 / -1;
    }
}

*{border-color: #2b9d59;}

.numbered-task::before {
    content: counter(task-counter);
    grid-column: 1/2;
    grid-row: 1;
    margin: 1rem;
    background-color: #c2d9c3;
    text-align: center;
    width: 40px;
    line-height: 40px;
    aspect-ratio: 1 / 1;
    border-radius: 40%;
}

.numbered-task::after {
    content: "";
    margin: 1rem;
    grid-column: 1/2;
    grid-row: 1;
    z-index: -1;
    background-color: #c2d9c3;
    width: calc(40px/2);
    aspect-ratio: 1 / 1;
}

.numbered-task.reset-count {
    counter-reset: task-counter;
    counter-increment: task-counter;
}

.numbered-task > .task { counter-increment: task-counter; }

.numbered-task {
    margin: 1rem 0;
    display: grid;
    grid-template-columns: 0.5fr 4fr 0.5fr;
    column-gap: 1rem;
}

.numbered-task.two-tasks-columns{
    grid-template-columns: 0.5fr 1.75fr 0.5fr 1.75fr 0.5fr;
}


.numbered-task > :is(.task, .content) {
    grid-column: 2 / 3;
}

.numbered-task > .col-2:is(.task, .content){
    grid-column: 4 / 5;
}
.numbered-task > .col-1.content{
    grid-column: 2 / 4;
}



@media (max-width:30em) {
    .numbered-task > .content{
        grid-column: 1 / -1;
    }
    .numbered-task > .task {
        grid-column: 2 / -1;
    }
}

*{border-color: #2b9d59;}

.numbered-task::before {
    content: counter(task-counter);
    grid-column: 1/2;
    grid-row: 1;
    margin: 1rem;
    background-color: #c2d9c3;
    text-align: center;
    width: 40px;
    line-height: 40px;
    aspect-ratio: 1 / 1;
    border-radius: 40%;
}

.numbered-task::after {
    content: "";
    margin: 1rem;
    grid-column: 1/2;
    grid-row: 1;
    z-index: -1;
    background-color: #c2d9c3;
    width: calc(40px/2);
    aspect-ratio: 1 / 1;
}

@senrastalker (also, can I ping whole category of people or I shouldn't do that?) OK, I think I did it, but I had to use one

!important

!important

parameter, which I heard I shouldn't (don't know why it wasn't working, I don't know how that other element has bigger specificity)

.numbered-task.reset-count {
    counter-reset: task-counter;
    counter-increment: task-counter;
}

.numbered-task > .task { counter-increment: task-counter; }

.numbered-task {
    margin: 1rem 0;
    display: grid;
    grid-template-columns: 0.5fr 4fr 0.5fr;
    column-gap: 1rem;
    row-gap: 1rem;
}

.numbered-task.two-tasks-columns{
    grid-template-columns: 0.5fr 1.75fr 0.5fr 1.75fr 0.5fr;
}


.numbered-task > :where(.task, .content) {
    grid-column: 2 / 3;
}

.numbered-task > .col-2:where(.task, .content){
    grid-column: 4 / 5;
}
.numbered-task > .col-1.content{
    grid-column: 2 / 4;
}

.numbered-task::before {
    content: counter(task-counter);
    grid-column: 1/2;
    grid-row: 1;
    margin: auto;
    background-color: #c2d9c3;
    text-align: center;
    width: 40px;
    line-height: 40px;
    aspect-ratio: 1 / 1;
    border-radius: 40%;
    border-top-left-radius: 0;
}

.numbered-task.two-tasks-columns::after {
    content: counter(task-counter);
    grid-column: 3/4;
    grid-row: 1;
    margin: auto;
    background-color: #c2d9c3;
    text-align: center;
    width: 40px;
    line-height: 40px;
    aspect-ratio: 1 / 1;
    border-radius: 40%;
    border-top-left-radius: 0;
}

@media (max-width:40em) {
    .numbered-task.two-tasks-columns {
        grid-template-columns: 0.5fr 4fr 0.5fr;
    }

    .numbered-task.two-tasks-columns::after {
        grid-column: 1 / 2;
        grid-row: 3;
    }

    .numbered-task.two-tasks-columns > .col-1.content { grid-row: 2; }

    .numbered-task > :is(.content, .task) {
        grid-column: 2 / -1;
    }
}

@media (max-width:30em) {
    .numbered-task > .content {
        grid-column: 1 / -1 !important;
    }
}

*{
    border: 1px;
    border-style: solid;
    border-color: #2b9d59;
}

.numbered-task.reset-count {
    counter-reset: task-counter;
    counter-increment: task-counter;
}

.numbered-task > .task { counter-increment: task-counter; }

.numbered-task {
    margin: 1rem 0;
    display: grid;
    grid-template-columns: 0.5fr 4fr 0.5fr;
    column-gap: 1rem;
    row-gap: 1rem;
}

.numbered-task.two-tasks-columns{
    grid-template-columns: 0.5fr 1.75fr 0.5fr 1.75fr 0.5fr;
}


.numbered-task > :where(.task, .content) {
    grid-column: 2 / 3;
}

.numbered-task > .col-2:where(.task, .content){
    grid-column: 4 / 5;
}
.numbered-task > .col-1.content{
    grid-column: 2 / 4;
}

.numbered-task::before {
    content: counter(task-counter);
    grid-column: 1/2;
    grid-row: 1;
    margin: auto;
    background-color: #c2d9c3;
    text-align: center;
    width: 40px;
    line-height: 40px;
    aspect-ratio: 1 / 1;
    border-radius: 40%;
    border-top-left-radius: 0;
}

.numbered-task.two-tasks-columns::after {
    content: counter(task-counter);
    grid-column: 3/4;
    grid-row: 1;
    margin: auto;
    background-color: #c2d9c3;
    text-align: center;
    width: 40px;
    line-height: 40px;
    aspect-ratio: 1 / 1;
    border-radius: 40%;
    border-top-left-radius: 0;
}

@media (max-width:40em) {
    .numbered-task.two-tasks-columns {
        grid-template-columns: 0.5fr 4fr 0.5fr;
    }

    .numbered-task.two-tasks-columns::after {
        grid-column: 1 / 2;
        grid-row: 3;
    }

    .numbered-task.two-tasks-columns > .col-1.content { grid-row: 2; }

    .numbered-task > :is(.content, .task) {
        grid-column: 2 / -1;
    }
}

@media (max-width:30em) {
    .numbered-task > .content {
        grid-column: 1 / -1 !important;
    }
}

*{
    border: 1px;
    border-style: solid;
    border-color: #2b9d59;
}

it's still quite big and I believe terrible so any idea and advise would be great

Senra•2y ago

Hey i think you can use the grid so that the item which is on two columns, can have its own ::after so basically a 4 column layout A layout something like this

Senra•2y ago

Senra•2y ago

so it will look like a two column layout for the single line item, and a 4 column layout for a double column item

m1.r0OP•2y ago

I'm no longer using two pseudo classes for a one element (found out that I can use border-top-right-radius to get that desired shape) . . . that second css I sent is already fully working . . . the only problem is that mentioned !important

Senra•2y ago

Okay hold on... I will first replicate the problem you are having. I will see what I can do then

m1.r0OP•2y ago

wait, I did smth . . . I just found out that .col-1.task has bigger specifity than just .col-1 (like obviously but everyone just said to me that only thing that matters is id>class>type)

Senra•2y ago

So you are telling class has higher preference here

m1.r0OP•2y ago

probably

Senra•2y ago

Hold on, my first question is why are you splitting the tasks into one column and two column layouts?

m1.r0OP•2y ago

bcs. it should look like this:

Senra•2y ago

You can still use classes to make it like that. Wait ill show you @m1.r0_bot check this out. Is this the result you were expecting?

Senra•2y ago

m1.r0OP•2y ago

yes

Senra•2y ago

Okay so what I have done is really simple ill send you the demo code https://codepen.io/Amrut-Wali/pen/PoxRgZe I have made use of 2 grids

Senra•2y ago

this is the grid for the numbered items

Senra•2y ago

This is the grid for each item in the numbered tasks grid

Senra•2y ago

Hope that helps

m1.r0OP•2y ago

ow, so just a grid inside of an another grid

Senra•2y ago

Yup

m1.r0OP•2y ago

thx

Senra•2y ago

Sure NP

Gaming

Programming

side task labels