Aligning images for mobile

Hi,

What is the best way to embed images in a page/post for mobile with regards to text near them? I guess due to all the different screen resolutions it is impossible to ensure compatibility with all of them. I noticed within the customizer the image for a page of mine displays OK, but when i checked on my smartphone (360 x 640) the text is out slightly:

It really depends on the screen size. We have to consider the legibility of photos on smaller screens.

To address this, we style images and their layout differently on various viewport sizes.

we implement css @media query to do this.

Example:
@media (min-width:1025px){ [your style here] } - for screens equal or bigger than 1020px, desktops.
@media (max-width:1024px) and (min-width:769px){ [your style here] } - for tablets and smaller desktops.
@media (max-width:768px){ [your style here] } - for screens not larger than 768px
@media (max-width:600px){ [your style here] } - for screens not larger than 600px

I was contemplating aligning centrally (perfect for mobile) although that looks a bit odd for tablet and desktop.

That's actually not a bad idea for screens smaller than 600px. It's quite normal for content images to go 100% fullwidth in small screens for better visibility. It's especially nice for people w/ eyesight problems. :)

If it seems odd for bigger screens, we can do @media styled differently for different sizes/viewports. :D

Hi Elvin,
Thank you for that, most useful. Thanks for helping me resolve that. And sorry for the delay. I think my original reply didn't go through.
Best wishes

No problem. Glad you found it useful. :)