[wp-trac] [WordPress Trac] #61130: Twenty Twenty-Four: Bullet points are outside the surrounding box

[WordPress Trac]

#61130: Twenty Twenty-Four: Bullet points are outside the surrounding box
-------------------------------------------------+-------------------------
 Reporter:  strukturdoktor                       |       Owner:  (none)
     Type:  defect (bug)                         |      Status:  new
 Priority:  normal                               |   Milestone:  Awaiting
                                                 |  Review
Component:  Bundled Theme                        |     Version:  6.5
 Severity:  normal                               |  Resolution:
 Keywords:  reporter-feedback needs-screenshots  |     Focuses:
-------------------------------------------------+-------------------------

Comment (by strukturdoktor):

 Hi,

 I tried your suggestion with the padding, but it had no effect. I inserted
 it that way:
 with the inside command:

 {{{
 ul li {
  list-style:square;
  list-style-position:inside;
 }

 .entry-content > ul {
   padding-left: 2rem;
 }
 }}}

 Please find attached the two images. Especially in the first image you can
 see, that the bullet points are at the left side of the page. In the
 second image you can see the bullet points slightly outside the box. That
 would be ok for me.


 Replying to [comment:2 sabernhardt]:
 > Hi and welcome to WordPress Core Trac!
 >
 > > The bullet points are left outside the surrounding box, and depending
 on the other elements below they disappear.
 >
 > Could you share images and/or steps to reproduce your issues with the
 bullets disappearing (without any custom styles) in Twenty Twenty-Four?
 >
 > > if there is an automatic line break, the text starts at the beginning
 of the new line and is not indented correctly
 >
 > When list items are set to [https://developer.mozilla.org/en-
 US/docs/Web/CSS/list-style-position list-style-position: inside], the text
 **should** wrap to the next line beneath the bullet point (list marker).
 If that is not the style you want, you probably would prefer increasing
 the padding on the list instead of editing `list-style-position`. For
 example, you could double the default indentation with something like this
 (specifically within the post content area, and not affecting nested
 lists):
 > {{{
 > .entry-content > ul {
 >   padding-left: 2rem;
 > }
 > }}}
 >
 > > In the Block Editor the bullet point is on one line and the text is
 shown on the next line
 >
 > The editor has a rich text `div` element inside the List Item block, and
 that may need to retain the element's `display: block` default style.
 However, you could open an issue on the Gutenberg repository to consider
 changing that to `display: inline` for anyone else who might have the list
 marker's position set to `inside`.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/61130#comment:4>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform