Hi folks. I expect this is a really simple thing but I’ve been going round in circles for a while and can’t work it out.
I have set up a grid of tiles/cards using 2 3 column components. Some have image above heading and para, others have full cover image with header and text on top. For the life of me I can’t work out how to do the latter.
Currently I have the image as a background image of a div, but as soon as I add a header the tile shifts down the page about 20px.
How should I be doing this?
My next question will be how to add the icons in the bottom right of the tiles. More columns? Or float them?
Like I said I’m new to this, coming from a design background but excited to see how far I can take this!
screenshot of work in progress, and my sketch visual.
1 - Inside 2 Column - change Column Container Position from Auto to Relative
2 - Change Column Image Position to Absolute and check to Full
3 - Set negative margins from Column Image to 0
Now you can add stuff inside the Column Image div.
Sorry for not recording it, ( I am currently at work and have limited time ) - but hopefully this will give you the right direction.
As for next question.
You would need to wrap items inside Div’s.
I would suggest to look at webflows Flex tutorials and use them over the ROW/COL style.
Header Text: When adding it, you have a 20px style on the top, make that zero and image is fine.
For Icons: Use font awesome for these instead of images, because they’re text and can be sized with css.
(fontawesome.com) If you need help adding this, shoot me a message.
Remember, if using a background adding text over will not effect anything, so it’s a viable option if it’s a static image for design.
If you add an image inside the div, then the text will need to be positioned appropriately to whatever you want. Text over background has more freedom for sure. However the image will rely on the div’s size, positioning, etc.
I don’t think you need anything else done, the layout looks good! Here’s the screenshot:
