How to make an element stick out of its container

GenerateBlocks
#1

I am trying to figure out how to use GenerateBlocks Pro to recreate something I so far can only do (and imperfectly) using a regular WordPress Group Block.

It looks like this, on the Desktop view.

Screen Shot 2022-06-02 at 10.37.06 AM
Screen Shot 2022-06-02 at 10.37.06 AM1920×1083 67.3 KB

This section is build by using an outer Container (GBP), then a Grid (GBP) with two Containers (GBP) as “columns” in the Grid. Inside each Container (GBP), there is a WP Group Block. Inside the Group Block is an Image (WP), Heading (WP), and a Buttons (GBP) block with a Button (GBP).

I was going to show you a screenshot, rather than try to describe that. But apparently I’m not allowed to post more than one image.

The problem is that to get the heads to stick up out of their Group, I’m using CSS. And I’ve managed to get everything okay on Desktop. But when I go to Tablet or Mobile views, everything goes all wonky.

I’m sure if I played long enough, I could fix all that with media queries. But I’m trying to figure out how to do as much as I can without either CSS or media queries. (Just in case that turns out to matter in some future iteration of either GBP or WP.)

Anyone have any thoughts on this? I believe Kadence has a block that will do what I want. But I don’t think GBP does. I’m posting in case I’m wrong. Because I don’t want to have to pay for yet another package just to get one block.

Thanks, in advance, for any help I can get.

P.S. I wasn’t sure if I should be posting this here, or trying to open a ticket with Support. I figured I should try here first, in case I’m not the only person wanting to do something like this. (I mean, after all, if Kadence has it, it must be something other people besides me are interested in.)

#2

I’m no expert and clicked on this to see the answer, but I think the easiest way to do what you want is to use the background gradient tool one color white, one color same as background flip the direction to 180degrees or( the other direction). Center picture where you want it in container with padding. easy to conrol on mobile.

#3

Thanks. I did figure out how to do this with nested containers and negative top margins. It did take some tweaking, but it worked.

I also found someone else’s them on the GP site that did the same thing. (In fact, they also used it for a nice effect on a merged header/body. I’ve implemented that, also, but am having more trouble making sure it doesn’t go too far and cause overlapping text between the header and footer.)

Anyway, the basic problem seems to be solved, and involves using containers and negative top margins, as I said above.

Thank you for replying to me!

#4

If you’re still struggling, This is a fast way to do it. Don’t have to move anything Just chose the inflection point of the gradient.

image illusion
image illusion1912×827 170 KB

1 Like
#5

Sorry for not getting back to you. I’m going to try this. I’m building a different website right now, that doesn’t need this. About to turn it over to the client, then will return to the other project.

I decided to say something now, so you don’t think I’m ignoring, or ungrateful!

#6

Bob Iasillo! You’re amazing! It works perfectly! And that resolves all the issues I was having when viewports resized.

THANK YOU. THANK YOU. THANK YOU.