Archived topic
How to set negative margin on photo
6 replies · Started by Arie on January 20, 2022
Hello, using Generate Press and Generate blocks. Have a two-column grid and in the right one I have a PNG photo with transparent background. Trying to apply negative margin to the right column so that the photo sticks out past the background, but it simply chops off the photo.
Any ideas how to do this?
Sharing link to staging site in private section below.
Hi Arie,
After you've added a negative margin-top to the image, try adding this CSS:
.overflow-visible {
overflow: visible !important;
}And then add overflow-visible to the container block's additional CSS classes. I'm pertaining to the one you've placed inside the WP column block, not the direct parent container block of the image. :D
Ah, didn't realize it was inside of the WP columns block. Using just Generate Blocks it works perfectly. Thanks!
Nevermind, it works perfectly until I add the subtle background stripes to that container. Once set to pseudo-element it chops the top of the photo off...
Hi there,
yeah for now you gonna need some CSS.
1. Select the Container with the pseudo background, and in Advanced > Additional CSS Class(es) add: allow-overflow
2. Add this CSS:
.gb-container.allow-overflow {
overflow: auto;
}Thanks David, had to modify that CSS slightly to get it to work:
.gb-container.allow-overflow {
overflow: visible !important;
}
Glad to hear that!
