Streaming live at 10am (PST)

Side by Side Images Responsive While Using CMS Rich Text Field


#1

I would like two images to be responsive and stay side by side until a certain breakpoints using the CMS and a rich text field. When I try to resize them at tablet they stack and do not look good. I tried using a defined Pixel size as well as a % of container setting.

Below is an example of the issue I run into.

Basically, I want to have a blog like a post for each of my projects with some images being side by side for comparison or layout purposes.

I have reached out to support and this is the workaround they recommended. First solution is what I am struggling with and there was a new proposed solution at 3:30

https://cl.ly/1Y1J420v331f

While it works it can be cumbersome especially if certain posts are not following the same layout and it causes it to be clunky.

Example Project pages to view should be Northwestern Medicine


Here is my site Read-Only: https://preview.webflow.com/preview/nicholasphillips?preview=12c7fd2ac10cc25335ad0376d4fcd234


#2

@Nicholasdaniel93, my thoughts would be to create a page that has styles on it only and create Rich Text Styles for everything including image placements. Here is a link for Rich Text Styling: https://university.webflow.com/article/rich-text

See if that helps with your struggles. Beyond that I would reach out to @Waldo for additional support.


#3

Hi @Nicholasdaniel93

At this time the rich text field doesn’t have the sort of image styling you are looking to achieve. I think splitting the post up into two separate posts and using columns (or a custom column build) in between the two halves of the post is the best way to achieve this if you want this higher level of control.

The other option would be to use smaller % sizes when adjusting the width of the images in the rich text field, but this won’t give you as much stylistic control.

Best of luck with this design and I hope my recommended solution helps :bowing_man: