Bulleted lists do not comply with left margin on mobile (tested on iOS)

[isaacverdu]

First of all, thanks a lot for making (and supporting) this theme for free. The references to 1984 resonated with me :-)

The issue: bulleted lists align to the left in mobile (iOS), disregarding the padding/margins that the rest of the text adheres to. Here it is ion my website:

Here it is in the live demo:

Thanks!

Isaac

[anonfaded]

I have done a workaround, which can work for you as well.
In the static/css folder, make a custom.css file, and in that paste the following code, this will overwrite the default styling values:

/* Bullet points styling */
.content ul,
.content ol {
  margin-left: 20px !important;
  margin-top: 10px !important;
  margin-bottom: 20px !important;
}

.content ul li,
.content ol li {
  font-size: 18px !important;
  line-height: 20px !important;
  margin-bottom: 10px !important;
  margin-left: 20px !important;
}

@media (max-width: 767px) {
  .content ul,
  .content ol {
    margin-left: 15px !important;
    padding-right: 15px !important;
  }
  
  .content ul li,
  .content ol li {
    margin-left: 15px !important;
    margin-bottom: 8px !important;
    line-height: 1.5 !important;
  }
}

It will be better to use some Ai code editor like Windsurf or cursor, which can do this easily for you if you are not familiar with coding much.

Demo: