Image align on mobile phones - text squished

Support
#1

Hello,

I am creating my website and all is going well. But when building the content I am adding images, and aligning left or right, and on desktop they display well with text to the side of the image. But on mobile phones the image is still being left or right aligned, which means a few letters or words appear in a thin column to the left or right of the image which looks plain silly. I have attached an image to show what I mean.

So on a mobile is there a way to remove any left or right align against an image so the image is centralised and content fits above or below the image? Does that make sense?

Thanks, Ashley

#2

Actually I have just found this CSS works

.alignleft,
 .alignright {
        float: none;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

Is that likely to cause problems anywhere else, is that the best way to do it? I tried img.alignleft but that didn’t seem to work.

#3

Hi There,

That custom CSS will affect to the desktop version as well.

Please try with this custom CSS instead:

@media (max-width: 480px){
	.alignleft,
	.alignright {
		float: none;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
}

Regards!

#4

Thank you, yes sorry I had meant to say I had included in the mobile breakpoint, but thank you for clarifying.

1 Like
#5