[Support request] Image align left or right doesn´t work on mobile

[Sonja]

Hi there,

I have some small images with alignleft or alignright. But if i make the browser smaller or look at it on mobile, then these images are displayes as center. This looks not so nice, because the text does not float around them anymore.

What could be the problem?

[David]

Hi there,

you could add this CSS to force them to the width of the content for mobile devices:

@media (max-width: 768px) {

    .alignleft,
    .alignright {
        width: 100%;
        margin-bottom: 1.5em;
    }
}

[Sonja]

Hi David,

no, that does not work. With that code, the images get very big and does not align left or right.

[David]

To keep them floated then this CSS should do the trick:

@media (max-width: 768px) {
    .alignleft {
        display: inline;
        float: left;
        margin-right: 1.5em;
    }
    .alignright {
        display: inline;
        float: right;
        margin-left: 1.5em;
    }
}

[Author]

Posts