List Padding Issue

Kirby 2 Solved ✅
1

I’m pretty new to Kirby and I’ve encountered an issue with the lists I have made. Despite my css saying otherwise, my KirbyText is adding padding to my list where I don’t want it to be.

    <?= $page->list_type()->kirbytext() ?>

.projectskillset {
width:100%;
text-align:left;
float:right;
list-style: none;
margin: 0;
padding:0;
}

.projectskillset li {
list-style: none;
text-decoration: none;
padding:0;
margin:0;
}

2

You have defined styles for a particular class of lists, but the lists in your kirbytext doesn’t have a class applied. You would have to remove padding from the ul/li elements in general.

3

I tried that just now but doesn’t seem to have resolved the issue, the padding is still despite adding a margin and padding 0 to both my li and ul across the entire site, is there a way to target that specific piece of Kirby text within my CSS.

4

Well, I don’t know what’s happening there without actually seeing it. Have you checked in your dev tools what’s happening and where the padding is applied?

5

When checking the dev tools I found this

ul, menu, dir {
display: block;
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
}

I’m not entirely sure where this is coming from considering I have in my stylesheet saying to do otherwise. It only seems to appear when kirbytext is involved though.

6

Sorry, but this is not a Kirby related problem but a problem with your stylesheet. If you have added styles to the ul element, they are obviously overwritten by the ones above that are probably added later in the cascade.