specify different image alignments on desktop and mobile

[Area33]

I want to align an image in the body of a post either to the right or left on desktop, but always center it on narrow mobile screens (480px or smaller).  Is this possible?

If that is not possible,  can I specify that images in the body of a post be displayed at 100% width on mobile?

 

https://areathirtythree.com/blog/

 

[scrambler]

You can definitely do that with CSS and using the mobile class as explained in the guide article below for both featured image and content images.

Posts: Changing Featured Image Layout on Mobile – Weaver Xtreme Guide (weavertheme.com)

For example to do that on all the posts of your blog page, you could add the rule below to the Theme Global Custom CSS Rule box

.blog.is-phone .wvrx-posts .alignleft {float:none !important;margin-left:auto !important;margin-right:auto !important;}

If it does not work, post back with the rule in place

 

[Area33]

It works for the home page.  On individual posts, images are still not centered.

[scrambler]

Add the selector for the single post pages

.single.is-phone .alignleft, .blog.is-phone .wvrx-posts .alignleft {float:none !important;margin-left:auto !important;margin-right:auto !important;}

And if you also want to target aligned right add this one

.single.is-phone .alignright, .blog.is-phone .wvrx-posts .alignright {float:none !important;margin-left:auto !important;margin-right:auto !important;}

[Area33]

Works great.  Thanks.

[Author]

Posts