Hello! I’m trying to make a column of images and text. The column has 72px padding, but I’d like the images to ignore that. There are a few ways to do it with traditional code, and calc(), but I’m curious if there’s a way to do it with Webflow.
Currently, I’m just setting the width of the image manually. I’d like to avoid this if possible. I’d also like to avoid putting each image in its own div, to which you could just add negative margin on both sides.
It’s also possible to use a rich text block for the whole thing—and set all the text inside to have 72px padding left and right instead. But rich text blocks are harder to reorder and organize, especially with images, since you can’t drag and drop.
Here’s a great example. This stream of images and text seems to be built with container level padding and images that ignore it.
Hey there, I’m on mobile right now but I can take a closer look shortly…
One way is to set the column position relative, and set the image as “absolute” and “full”. This will still be a child of the column but act as a sibling to everything else and will ignore the column padding.
Try this, I’ll be online shortly and happy to take a closer look, there is certainly a solution I’m sure. (There always is with Webflow!)
I’m not sure where on your site you are referring to. But why not just use margins on your paragraphs, etc., and not use padding on the columns at all?
Thanks for this! Setting the images to “absolute” and “full” does fill the column and ignore padding—awesome to know for the future—but then the images just stack together as opposed to stacking up below each other. Make sense?
I’m referring to the home page, which has a column of text and images.
I could indeed use margins on my paragraphs—but sometimes the images will be contained to the padding. It seems silly to add a class to every item that doesn’t break the grid, when I’d really like to add a class to just a few images to have them break the grid. Does that make sense?
Add a class to everything, it makes it easier to amend later if you need to, and when you DO add a class, you can re-style one element with that class name and it changes them all at the same time. Class naming saves tons of time.
Create one paragraph, style it, copy and paste it then change the content. Make it easy for yourself where you can
Thanks for taking a second look, Mark! Appreciate it. For some reason I thought padding + negative margin was the best practice—I’ve seen it used a few places, including the example—but your way is going to suit me just fine. Thank you!
Make it easy for yourself where you can 