How do I fix W3CSS formatting to match CKEditor5

Note, the same issue is happening when using Indent - paragraphs do not indent in theme.

To be clear, the indents do appear in the editor (ckeditor5 - Drupal 10.1.6)

But, not the theme:

Hello,
I have it indent on https://drupal8-w3css-theme.flashwebcenter.com/indent-ul
Not sure why you have it this way. You can use some css to update it.

#main-container ol,
#main-container ul {
  padding-left: 70px;
}

Best wishes,
Alaa

What about reflecting the non ol|ul indents?

In my examples, I am not using li tags but straight indents, which are in the editor but not reflected in the theme?

CKEditor 5 view source shows:

Text here

How do I modify for this? No ol, li, etc

TIA

The w3.css does have any classes for indent. Here is a custom css classes.

.indent1 {
  text-indent: 10px !important;
}

.indent2 {
  text-indent: 20px !important;
}

.indent3 {
  text-indent: 30px !important;
}

.indent4 {
  text-indent: 40px !important;
}

.indent5 {
  text-indent: 50px !important;
}

.indent6 {
  text-indent: 60px !important;
}

Add the CSS classes to the sub-theme then you can use them with any html tag.

<p class="indent5">
Text here
<p>

Best wishes,
Alaa

Thank you! That solves the indent problem, but still unable to indent the lists themselves.

Uploaded this video to demonstrate the issue: https://www.drupal.org/files/issues/2023-11-24/demonstration%20of%20how%... →

Attempts to indent the list only indents the list text. The bullet points stay aligned to left border.

To be clear, this is how it worked in Drupal 7/8/9

https://www.drupal.org/files/issues/2023-11-24/demonsration%20of%20how%2... →

Any css to be able to indent the lists themselves?

Automatically closed - issue fixed for 2 weeks with no activity.