I’m creating a page where I need photos with captions to the right side of them. I’m trying to do this in Page Builder by creating a row with two columns. I put the (fixed size) image in the col 1 and the caption in col 2. But this isn’t working well in a responsive setting. It works fine on a smaller screen but on a big screen the caption ends up a way to the right of the image. What I really need is to be able to set col 1 to be a fixed width in pixels so that the caption always sits the same distance to the right of the image and on the smallest screens swaps to being below the image.
There doesn’t seem to be a way within the UI to do this, but is there a reliable way of doing it with CSS?
Hi, thanks for reaching out.
When editing a row within the Layout section you can set the Collapse Behavior to No Collapse. That might be helpful.
The challenge with using fixed widths is you’d have to write a set of media queries, changing the widths for various resolutions. This can be done but is, unfortunately, outside of the free support scope we’re able to offer.
I’ll chat with Alex here at SiteOrigin and see if he has any ideas, I’ll come back to you as soon as I’ve heard back. Thanks :)
Hi Rvialls,
Unfortunately, as Andrew mentioned, there’s no simple way of adding fixed widths.
As an alternative, you could set the alignment of the image to right and set the text alignment to left. This will ensure both the image and text are very central on the page and never too far apart. You can add space between the columns by opening the row and going over to the Row Styles sidebar on the right. Open the Layout settings group and set the Gutter to the amount of spacing you would like.
Thank you. That was really helpful. I’ve gone for two 50%:50% columns with vertical alignment set to centre. I’ve put an image widget in the left and a text editor in the right for the caption. On the image widget, I’ve set CSS Styles to ‘float:right’ and Mobile CSS Styles to ‘float:none’. That gives a reasonably pleasing responsive outcome although not quite what I’d ideally want.
You might want to consider developing a specific widget for handling images that allows captions to be placed anywhere around the image (above, left, right, below).
Thanks again for the help.
Hi Rvialls
Great to hear you were able to come up with an outcome that works for you. :)
Currently, the SiteOrigin image widget only allows you to position the widget text to the top and bottom of the image. I’ve logged horizontal positioning options as a feature request.