How can I get each photos to be the same size? The first image in pink box is the size i’d like each photo to be.
I’d also like the category button in blue to be placed in the middle of each photo just how it is on the first image.
Hey ashley,
if the images are not exactly the same size in width and height, I would suggest that you use them as a background imgae of a div and set the “fill option” to “cover”.
-
Just take an extra div into your column and giv it a specific height or stretch it if you use flexbox inside your column.
-
Set your image as a background image and let it “cover” the div.
That’s it.
Hope that helps. Otherwise I could make a screenshot or gif to explain further as soon as I am at my office.
Have fun.
#edit
For the Button-Part:
After you have done the steps described above just drag the button with a negative margin onto the image.
#edit 2
I see now they are CMS items but it doesn’t matter.
Do the steps with the first CMS item (using a div and bg-image) and the rest will follow.
Thanks I was able to get the image and the buttons in there however how can I add spacing between the images? Also, there are a few posts at the bottom that get thrown off a bit and I’m not sure why.
Sorry for the late reply,
on the screenshot it seems like the spacing is ok. However you just need to give a right-margin to the collection item if you want to adjust the spacing.
About the throen off posts at the bottom: I guess they just get wrapped automatically. Display the parent-div as flex and / or set the CMS-Item wrappe to display as “absolute”.
I am unfortunately just guessing. Please share a preview link of your project if you dont mind, so we can try to help further.
Cheers, Deniz.
Oh, you already shared a preview link. I will give it a try
- Set Collection List to “Flex”
- Set Children to “Wrap”
- Adjust Spacing on the Collection Item to your liking.
- In general you should remove unused classes now and then (as shown in the video)
Hope this help. Otherwise please don´t hesitate to ask.
Cheers, Deniz.
*edit
sorry but i amnot able to upload the video. trying to convert it to a .gif
*edit 2
there you go
screencapture
HI is there another way to send the video? I can’t see what’s going on here
Oh…weirdly cutted out. I’ll try again.