I am connecting CMS to a list of resources. When the titles are different lengths I want the buttons and image to all be aligned. Is there a way to do this in settings so it looks more uniform?
Product:
Wix Studio
What are you trying to achieve:
I would like to know how to align items linked to a repeater CMS so that buttons and images align across different items.
What have you already tried:
I have looked at the forum but only found old examples
Additional information:
There are multiple ways to do it:
#1 Place the Title in a Container
Simply add a container, set it’s height to a fixed value, and attach the title inside the container. This should be the easiest way.
#2 Using the CSS Grid
You can apply a grid to the repeater items where the image, title, and button will all go in their specific rows, and you can set the height of each row in fixed pixels.
1 Like
Pratham thank you so much!! I have done many wix courses but could you perhaps give me more details on how to do this because I can’t work it out. The CMS is in a repeater. Do I put the repeater in a container? Sorry if this is so simple. I havent had to do this before
Ohh no worries, it’s pretty simple!
- Just drag and drop a container box between your image and title. This should add the container in all your items.
- Simply resize it 's width so that it fits within the item itself and does not overflow to the other items.
- Now drag the title inside the container, and adjust it’s height and positioning between the button and image, and change it’s background color opacity to 0% - which will make it transparent.
And there you have it! Now all your titles will occupy the same space. If you can’t figure it out, feel free to post some more sreenshots, I’d be happy to help you out! (:
1 Like
AMAZING!! I sussed it out. Thank you so much.
Theres only one more thing, the images are not connecting to the images I chose on CMS which is really odd, keeps defaulting to this blob image. Do you happen to know about that?
Is it just the image?
Is the title and button connecting right? If yes, then that means your dataset setup should be fine. Worth making sure that the field in the CMS is an image field, an not a media gallery. You might wanna try deleting this placeholder and drag another image element, and try linking that. Maybe that should solve the issue.