Mobile indents for bulleted lists

[emyoulation (Brian McCullough)]

Is there a way to eliminate the right margin padding on indented content for a mobile device?

On a narrow screen, the mirrored indents constrict the horizontal screen space down to just a couple characters. Text wrapping goes nuts!

[anon48433008]

I don’t play a CSS expert on TV and didn’t stay at a Holiday Inn last night

but, couldn’t you try a padding change in the mobile css for the ul or li ,maybe reduce padding-left to % or vw or even just fewer px?

Likely someone here could answer this in their sleep, might be good for everyone overall and you’re just the first to spot it

or not

[smrtey]

Default is

.cooked ul {
    margin: 0;
    padding-left: 40px;
}

Change value for padding-left to make it indent less in the Mobile CSS. After pic below is

.cooked ul {
    margin: 0;
    padding-left: 15px;
}

[emyoulation (Brian McCullough)]

@smrtey

Change value for padding-left

Thanks for that suggestion. Reducing the index steps from 4 to 2 will help some. But I’m more concerned about the mirrored padding being added on the right side! It would be best to completely eliminate that padding for a mobile.

[smrtey]

Can you link to a page where you’re experiencing that or copy the post over here. It’s hard to tell what’s going on from that screenshot. In my example there is no right margin indent

Here is that post if you want to see how it looks for you on mobile

• List item that is longer than a word or two
• • List item that is longer than a word or two
• • • List item that is longer than a word or two
• • • • List item that is longer than a word or two
• • • • • List item that is longer than a word or two
• • • • • • List item that is longer than a word or two

[emyoulation (Brian McCullough)]

Thanks! This is a fairly new Discourse site. We’re experimenting in hopes of getting rid of our MailLists for the ‘Gramps’ open source Genealogy project. So we’re on the steep side of the learning curve.

The screen capture was from the version 4 Android app. The same problem reproduces on Chrome

Here’s a link to the posting:
https://gramps.discourse.group/t/genealogical-numbering-systems/230/5

[smrtey]

Try getting rid of the padding-right in this class

.cooked ul[dir="ltr"] {
    padding-right: 40px;
    padding-left: 40px;
}

You can also reduce the padding-left

.cooked ul[dir="ltr"] {
    //padding-right: 40px;
    padding-left: 15px;
}

[emyoulation (Brian McCullough)]

Our webmaster made the tweak. It is MUCH better now.

Thank you!

[Canapin (Coin-coin le Canapin)]

Your webmaster didn’t do a great job then since it seems there’s still a huge empty space on the right.
He decreased the left padding, but kept the right padding as it is.

@smrtey solution is the right one, you should completely remove the right padding.
I suppose this right padding was set in order to have the correct padding for right to left languages, but it has no reason to be here for a left to right language.

[emyoulation (Brian McCullough)]

Thanks!

We did some experimenting ended up liking having a mirrored left&right indent of 15px.

When we tried commenting out the right margin entirely, it didn’t change! (Probably a cascading value problem.)

Here’s a link to our local discussion with captures at different attempts.

[Canapin (Coin-coin le Canapin)]

Weird.
Did you try:

.cooked ul[dir="ltr"] {
    padding-right: 0;
    padding-left: 15px;
}

If it doesn’t work and this is overridden by other rules, you can try to have a more precise selector:

.topic-post .cooked ul[dir="ltr"] {
    padding-right: 0;
    padding-left: 15px;
}

[emyoulation (Brian McCullough)]

No, we didn’t try an explicit zero value. I’ve always contended a zero was handled as a special case too often in parameter passing. Thus, it tends to be a bad choice for experimental diagnostics.

So we went with 15px… and felt no further pressure to experiment. That value met our requirements.

But, yes, it was weird that commenting out did not resolve that problem. And thank you!

[Canapin (Coin-coin le Canapin)]

It would have worked if you commented an already existing padding-right: 40px;, but simply writing //padding-right: 40px; as a new rule has absolutely no effect.

The correct way here to cancel the existing padding-right: 40px; is indeed to override this previous value with a new rule by writing explicitely padding-right: 0;.