Change width of field depending on content

Card Design
1

Can anyone suggest a CSS solution for ensuring the width of a field within a card is say 600px if the content is text, or otherwise a maximum width of say 1,200px if the content is an image?

2

Template

<div class="container">{{Field}}</div>

Styling

.container {
    max-width: 600px;
}
.container:has(img) {
    max-width: 1200px;
}

Note: :has() works on the latest Qt6 version of Anki, but not on Qt5 versions or older Qt6 versions. On mobile clients (AnkiMobile and AnkiDroid), it may not work if the webview used internally is old. It should work on AnkiWeb if you access it with the latest version of a major web browser.

If you are using an Anki client that does not support :has(), you will probably need Javascript, as it is probably impossible to achieve that using CSS alone without :has().

5 Likes
3

Perfect solution – thank you!

1 Like
4

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.