CSS to change img layout

Can you show us the problem on your site?

https://www.voxclamantisindeserto.us/2016/11/why-i-wear-skirts/

Basically–on this and another post–I want the p text to wrap the img on ample screens but not on a small screens. I would have thought that changing the img back to a block element would have worked, but no luck so far.

What do you want to happen on smaller devices?

On large screens I want the img to float/align right with text wrapping left and under the img, which it does.

On small screens the text wraps to awkwardly so I want the image then to appear as a block element by itself with no text wrapping. That is, as if the img were not floated/aligned (with at is, to mimic the default html/css behavior).

I think one problem is that there is a hard-coded style of ‘float: right’ given to the image.

OK, good catch. I removed it and the behavior improved, but then I found out why I had written that style into the img tag in the first place. For whatever reason, if img was the first element, WP nested it within an autonomously-generated p tag which caused the “<p>image</p>” to sit considerably higher than “<p>first paragraph</p>”. I suppose this relates to WP’s intended behavior whenever posts contain plain text paragraphs without markup, but it was an engineering oversight to fail to treat img as a permissible opening element.

The bandaid that I originally applied back in 2016 (which you discovered and pointed out to me) was to put the img within the p element (i.e. “<p>wrapped paragraph text</p>”). So it turns out that to prevent WP from nesting img within the autonomously-generated p was to myself nest img with its own div.

The styles are now behaving as I desired except for one thing: I can’t seem to get the img to center on a small screen. Any ideas?

Hey Andrew, css is now rendering as intended. I couldn’t have done it without your help. ?Un millón de gracias para ti!