If images are added to a blog post and floated to the left or right, the text will wrap around the image. The problem is, if the screen is narrow, it will continue to word wrap down to the last letter. This looks odd, so we want the text to clear the image long before the width reduces down where the wrap is odd looking.
To accomplish this, the CSS below will work to unfloat the image and center it horizontally on the page when the screen width is 600px or less.
@media only screen and (max-width: 600px) {
.wp-block-image .alignright,
.wp-block-image .alignleft {
float:none;
margin-left:auto;
margin-right:auto;
}
}