Froala provides a great WYSIWYG editor for Django admin, but on page the styles for django-froala-editor didn’t work no matter what I tried. It didn’t look like what I get at all.

At some point, it was clear that providing a quick fix would suffice. I made a short style sheet to make these styles work on Django templates. It is my example that fits my needs. I don’t eliminate the fact that I failed to find an organic solution to this via package files.

Styles for Froala I suggest

<style>
        .fr-img-wrap {
            padding: 10px 0 0 0;
        }
        .fr-img-wrap img {
            max-width: 200px;
            border: none;
            margin-bottom: 10px;
        }
        .fr-fil, .fr-fir {
            padding: 10px;
            border: solid lightgrey 1px;
            margin: 10px;
            max-width: 220px;
            border-radius: 10px;
        }
        .fr-fil {
            float: left;
            margin-right: 20px;
        }
        .fr-fir {
            float: right;
            margin-left: 20px;
        }
</style>

This gets me this result that can be used for the journal/company blog application:

It works with captions as well:

Responsiveness

The wider the screen the better it works. Here is a showcase:

IPhone 5/SE (decent), IPhone 6/7/8 or IPhone X/11 (can be regulated with an elaborate image positioning), IPhone 6/7/8 Plus (the best as is the widest)

Caption just elongates the picture are so it is fine on smaller screens too:

IPhone 5/SE, IPhone 6/7/8 or IPhone X/11, IPhone 6/7/8 Plus