CMS Masorny - min height
Hey Keegan, I've just set up your Masonry CMS, and it's working like a charm! Thanks a bunch!
Quick question – is it doable to set a height for the images to make sure the hover effect looks snazzy? I gave min-height a shot for the item, link block, and the image, but I couldn't quite nail it.
https://lightit.webflow.io/why-light-it ("check our projects" section)
preview link here: https://preview.webflow.com/preview/lightit?utm_medium=preview_link&utm_source=designer&utm_content=lightit&preview=243ea14734c130af52e8f0d4994430e7&pageId=64f9d75e250f8a6d2fc54304&workflow=preview
Thanks in advance!
8 Replies
your card will get its "height data" from its internal elements that are position static or relative. Your current setup has the text elements are absolute and the image (which is a background element here really) as static. Here's what I would try:
1. Change
our-work_card-footer to position:relative
2. Change our-work_card-header to position: relative
3. Change our-work_img to position:absolute and set it to cover.
Does that work?
From Macyjs docs: "All direct children of an element with this selector will become sortable items and a height applied to the target container."
the first child of the container which in your case would be our-work_item - the CMS item element. We need to make sure this element knows what height to render so making sure it knows about the height information of the text is key!
You might also need to check for text overflow on resizing the screen. It's likely you'll have to reinit Macy.js on window resize to account for that but I'm not sure.
If you're a Patreon member, I did a video on working with the Macyjs API to achieve custom stuff liek this 🙂
https://patreon.com/webbaethanks!
yep, now it's works better, the only issue is that now the card height it's defined by the logo+description instead of using the image height. but It looks better than before so I'm happy with this jeje.
and yes! definitely I must become a Patreon!
Also, I noticed that you're working on your rebranding. If you need any assistance from me and my team, it would be a pleasure for us to help (we are graphic designers 🤓). It's a way for us to give back some of the value you've provided to me. just drop me a message
Thanks Ander that’s a very nice offer. I need some help with assets for a JavaScript course if you’re interested in helping with that!
Sure! What do you need?
@Ander I'm working on a "Javascript for the Webflow enthusiast" or "21 days of Javascript" course.
Here's the lesson plan: https://docs.google.com/document/d/10_MPzeGBaK4OWFWClLKW0-t-JBacSPgJAFDrsyDjTqw/edit?usp=sharing
I'm going for designs in this style: https://www.ls.graphics/products/t-shirt-mockups
Do you have time to help design some of these components? I would provide you the finished course for free!
Google Docs
21 Days of Javascript
Javascript for the Webflow Enthusiast. 21 Days of Javascript Drum Kit BMI Calculator Countdown timer Clock (analog style with hours, minute, second hands) Random Quote Generator Random Excuse Generator Password Generator Custom HTML5 Video Player TODO List from LocalStorage Snake Game Pong Game ...
T-Shirt Mockups
T-Shirt Mockups – 32 Scenes
I like the design direction, a mix of code + punk + cyberpunk + webflow gradient hahaha
yes of course, so you need the UI for the components you will build in each lesson?
Yes - it’s a bit or work for sure so I’m happy to pay as well :). Maybe DM me and we can chat about it.
You can also do as much/little as you are comfortable taking on
hey Keegan, just in case you didn't see it, I sent you a DM (discord)