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! [Screenshot_20200213-135029]

Try getting rid of the padding-right in this class .cooked ul[dir="ltr"] { padding-right: 40px; padding-left: 40px; } [image] You can also reduce the padding-left .cooked ul[dir="ltr"] { //padding-right: 40px; padding-left: 15px; } [image]

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 overal…

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; } [image]

[image] 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.

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 [image] [image] Here is that post if you want to see how it looks for you on mobile List item that is longer t…

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 …

Our webmaster made the tweak. It is MUCH better now. Thank you! [Screenshot_20200216-101256]

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. [image] [image] @smrtey solution is the right one, you should completely remove the right padding. I suppose this right pa…

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.

Weird. Did you try: .cooked ul[dir="ltr"] { padding-right: 0; padding-left: 15px; } :grey_question: 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; }

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. Bu…

Mobile indents for bulleted lists

Support

emyoulation (Brian McCullough) February 16, 2020, 4:17pm 8

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

Thank you!

Topic		Replies	Views
Numbers Cut-Off in Long List Bug	20	2755	August 15, 2017
Removing padding in the closing button UX	1	732	October 24, 2020
Markdown nested lists have different vertical padding for different bullet depths Support	10	4280	January 23, 2019
Markdown css styles not shown when RTL is enable Bug	9	2032	July 16, 2018
Margin issue on users page UX	2	519	February 4, 2021

Mobile indents for bulleted lists

Related topics