Margins - how to set them for automatic new lines

Anki Desktop
1

Dear ladys and gentleman,
do you know how to set left and right margins?

At the moment I have so wiede text blocks on the pc
and when I use Enter for new lines I get a terrible layout on the smartphone.

Do you have some ideas? :slight_smile:

Thank you so much in advance for your time
and of course your help

Best greetings
Jonathan

PS:
I couldn’t find anyting in:

  • adons
  • overview Styling & HTML
  • topics in forum
2

You can use CSS styling from this template as an example: they are supposed to wrap text after 800 px.

3

I strongly advise against using linebreaks without semantic meaning. Purely visual customizations should be done with CSS.

The Basics

Both the body and the div are HTML elements. They have identifiers by which they’re selectable in CSS:

  • the body element has the class card which can be selected with a leading dot (.card)
    • the same class can be given to any number of elements
    • you could also use the HTML tag (body), but that’s a bit less specific - best would be to combine the two into a single selector: body.card
  • the highlighted div has an id: qa (question/answer) which would be selected with a leading hashtag (#qa)
    • an id should be a unique identifier for a single element, so there’s no need for div#qa

Styling

Now that we know what we can style, let’s apply some CSS to solve your issue:

#qa {
  max-width: 900px; // arbitrary
}

Why not target the body?

  • because we should apply size limits to the closest parent container of the text you want to restrict, which in Anki’s case is #qa - anything above in the HTML hierarchy would work too, but isn’t necessary and could have unwanted effects. Similar to the combined CSS-selector above, we want to be as specific as possible to achieve our goal.
2 Likes
5

.card {
text-align: center;
font-family: arial;
font-size: 20px;color: black;
background-color: white;
}

.container {
display: inline-block;
text-align: left;
max-width: 300px
}

Got it, and btw:
mx-width of 300px is the exact width for anki android

1 Like