Streaming live at 10am (PST)

Tile Design Help Needed

Hi Everyone,

Trying to design this tile, see attached JPG. Not sure how to get copy over an image, and set to a specific size?

Thanks,
Chris

Tile


https://preview.webflow.com/preview/chriss-blank-site-23c9aa?utm_medium=preview_link&utm_source=designer&utm_content=chriss-blank-site-23c9aa&preview=17fdfa8fe93ea7c22645869ece3ac6d9&pageId=600dd7f752cf053301506316&mode=preview

Hi @TheChris,
i´ll attach the class settings and the structure, how i would do it. Note: i use a gradient layer, so you dont need to add it to the images. I would recommend you to create a symbol and add override fields for Heading, Sub Heading, Text, the button, and the image.
image






Feel free to ask.

Maxi

1 Like

Edit:
You´ll need to add a fixed height to the tile container:

1 Like

Thanks Maxi! I will try this out. Yes, my intent was to create a symbol and then use override fields. Exactly what I wanted to do. I will let you know how it works out when I get to it. May not be for a couple of days.

Chris

Hi Maxi,

Not sure what I am doing wrong here. Pics attached as well as a link.

Thanks for your help,
Chris

https://preview.webflow.com/preview/chriss-blank-site-23c9aa?utm_medium=preview_link&utm_source=designer&utm_content=chriss-blank-site-23c9aa&preview=8ed8ab9c83006a2798dfedb668fa5077&pageId=600dd7f752cf053301506316&mode=preview

Hi @TheChris ,
you forgot to set your container to position relative. Therefore, your content is aligned with the body.

If this doesn’t help, I’ll take a look tomorrow.
Maxi

1 Like

Hi Maxi,

Yes that did help a lot. However, I’ve been trying to troubleshoot this on my own given what you’ve provided me, with no luck. My new problem is the text content does not stay within its area when changing browser dimensions and sizes.

What I really want to happen, and this may not be achievable, is for all the tiles to continue to remain 20 px from each other, height and width, and to scale with the page (going to 4 cols on wider screens and 1 col on a phone). It just seems that the content does not stay within its container, and the images in the tiles sometime separates wildly by row, and also overlap each other when tight.

Hi Maxi,

I actually figured it out using an inline layout with the tiles. I think I’m on my way now with this. Thank you so much for your help!

Chris