Responsive image floating

[ASK]

Can you please explain how to float an image left or right only on desktop, so the image is full-width on mobile? Is it possible without custom css?

Specifically, I am interested about out-of-the-box support for floated images both using WordPress’ native media insertion tool, as well as in Cornerstone, new or classic image elements.

I can easily do it with custom CSS, but clients can’t.

[rad]

Hi there,

Thanks for writing in.

It’s not possible without CSS since you wanted to target a specific device. Plus, you only need to add the CSS once and just re-use its class name. Example, please add this to your global custom CSS

@media ( min-width: 980px ) {

.image-left {
float: left;
}

.image-right {
float: right;
}


}

Then whenever you add image, you can simply add image-left or image-right to its Class attribute. Example, <img src="" class="image-left">, or if you’re using cornerstone image element, then simply add the Class name to Class input field.

You can pre-add the CSS to your client and let them add the class name.

Hope this helps.