Hi,
Currently having some trouble getting a rich text field to properly justify.
I have a portfolio site for a client with several projects (CMS). For several pictures, there is a title and a text to accompany these. I would like the title to align vertically to the top of the image next to it, while the text aligns to around the centre point. The title plus text content come from a rich text field in the CMS Collection.
What I tried is the following:
- Insert Rich Text field and couple to CMS Collection.
- Set Rich Text to 50% height so the bottom of it aligns to the middle of the picture.
- Set to flexbox, direction to vertical and justify space-between.
Then I would except the title to hug the top of the div while the text hugs the bottom. Instead there seems to be just as much space above and below both the title and the text as there is in between them.
I tried looking up a solution. I do see some messages claiming that the Container acts in this same funky way with justify (and that it’s a bug) and that switching to a div fixes it, but this is not possible since it’s a rich text block.
I tried adding a 50% row gap, but that also pushes the title down.
Furthermore I saw some people claim you can decouple a CMS field from the Collection, fix it and then recouple it. However, as far as I can see this is only possible with a Collection List, not a Collection item on a Template Page. Or at least, I cannot find it anywhere.
Now I would say the easiest solution here is probably to use two separate plain text fields for the title and the text, but that would chew up twice as much Fields and almost half my images, so that’s not really a good option.
Another option might be if I could somehow add 50% padding between the two text items, but as long as the rich text is coupled to the CMS I cannot see the separate heading and paragraph items. Decoupling the field from the CMS collection might make this possible, but as mentioned above I don’t know how.
I think I searched pretty extensively and couldn’t find a good answer to this issue, but hope my search was thorough enough.
You will find an attached screenshot of the issue + read-only link.
Any help would be greatly appreciated!
Here is my public share link: Architecture Website