width and position of (image) icon run-in into text in horizontal layout

[David Stirling]

David Stirling

June 12, 2024 at 8:12 am

I’m doing what I think must be a common thing, but I haven’t been able to find an answer. I have a page layout where there are a bunch of subheadings, each preceded by an icon (an uploaded image, not a built-in icon). To put the icon in front of the text I created a Row Layout with an image block on the left and a text block on the right.

The width of each box in the Row Layout is a relative percentage, but what I really want is for the icon to remain a fixed size with a fixed distance from the icon to the text. I was able to partially fix this by adding “width: 48px” to the CSS. That keeps it from resizing as I narrow the screen, but I’m still having two problems:

1. The distance between the icon and the run-in text is wider if the Row Layout is wider

2. When the layout switches to single-column for phone view, the position of the icon and text get completely messed up.

The second item is much more important than the first one, but I want to understand overall how I can set up a run-in icon that remains fixed size and distance from the text that follows. Should I be adding these images in a different way than Row Layout? Or can I force fixed size and position of one element in a Row Layout?

Here is a link to the page:
*Login to see link