RTE image size/position ... fluid design?

Design help Layout & Design
1

Situation:
We have a blog-type content page using RTE and CMS to manage the content. The text can be styled nicely, change the font size/spacing depending on screen size.

Problem:
The same doesn’t seem to be as easy for images? Images can be added nicely to the RTE content via the editor, but from a design pov we would like to change the image size depending on the screen size. e.g. center the image from tablet upwards and use full width on smaller, i.e. mobile devices.

Question:
How can this be achieved?

2

Welcome @geert :wave:

I usually attack this problem within an RTE element not on the image itself, but a couple of levels up on the “Figure” parent element. This is where I apply my styles. I’m not sure if that helps you or not, but maybe it points you in the right direction.

3

I found a solution so I thought I’d share it. I added the following custom code on the CMS page to force 100% width on mobile devices.

<style>
/* force RTE image size 100% on mobile */

/* Mobile Portrait */
@media only screen and (max-width: 479px)
{
.w-richtext figure { 
	position: relative; 
  width: 100% !important; 
  max-width: 100% !important;
  text-align: center; }
}
</style>
4

Yup, exactly. On the figure.

5

Yeah, it does feel like a dirty work-around though. Now part of the design styles are hidden on a page in the custom code section.

I think I would prefer if adding images in RTE always go centered and full-width (a bit like how Medium does it) so that the actual position width can be managed using standard styling.

6

The common way to handle this, so you don’t have hidden styles in custom code, is to either on the same page, or how I do it, on another “styles” page add a RTE element this is NOT bound to the CMS.

It sounds odd, but this is a common approach.

The non-bound RTE element allows for full control that the CMS bound RTE does not give you.

What you do is you give that non-bound (to the CMS) RTE element a class, style it how you like (e.g. your images) and then apply that same class name to your CMS bound RTE element.

Et voila!

Give it a try.