Grid Design Issue

Hi there,

You can select the Grid, set its horizontal alignment to right:
https://docs.generateblocks.com/article/grid-overview/#horizontal-alignment

Ok, this did not work, at least fully.

When the image was on the right, I can select vertical alignment on the container with the image and center it (so if there were 5 paragraphs the image was not at the top). The image container was vertically the length of the 5 paragraphs.

The right horizontal alignment does put the 5 paragraphs under the heading on the right instead of under the image, and I can now have the 3 containers all aligned under each other (instead of an indented container under the heading), but the image container does not span the entire length of the 5 paragraphs anymore, and so selecting center for the image container does nothing. Any other ideas?

Thanks,
Doc

but the image container does not span the entire length of the 5 paragraphs anymore

Select the Grid, set the vertical alignment to default.

You can also set a min-height for the image container.

Getting there but not quite. The Grid vertical alignment is set to default

I set the min-height to 300 px and the length of the image container expands and can be centered. But the heading container also expanded, so now there is a large gap between the heading and the paragraphs:

————————————-
————————- heading

imaage

————————————-
————————- paragraph

the only way to fix it was to give the paragraph container a -250px top margin. It seems to work, but is this the only way to do this, or is there any other simpler solution.
thanks,
Doc

• This reply was modified 2 years, 10 months ago by tthdoc.

I can’t provide suggestions in this case without seeing the code.
Can you link me to the page where I can see this issue?

I have the issue solved using the margin adjustment and it worked fine. Thanks for the help with that. But do have one other question. If you have this:

Container(1)
-Grid
–Container
—Paragraph
-Container(2)
–Grid
—Container
—-Image

How do you move Container 2 so it is in the same position as container 1. In other words, Container 2 is indented so that it is a part of container 1. I want it to be its own container. How do you back up the indent? I try to grab and slide it in but without success. I know I could start from scratch but I was hoping there was an easier way.

thanks
Doc

Are you dragging them in the list view? If not, try it!

List View

Ying,
Yes, I use the list view all the time, but it is not easy in some cases.
Like for this…

Container(1)
-Grid
–Container
—Paragraph
-Container(2)
–Grid
—Container
—-Image

When you select Container(1) it selects everything. What I wanted was Container(1) to include the grid, container, and paragraph below it, then Container(2) would include its grid, container, and image. But could not drag container(2) to the left so it would do that. So I just created a new Container at the main level (call it Container(3), dragged the grid under container(2) under it, then deleted the now empty container(2).

Container(1)
-Grid
–Container
—Paragraph
-Container(2) <– deleted this after dragging under (3)
Container(3)
–Grid
—-Container
—Image

What I was looking for was an easy way to “shift” container(2) so it looked like container(3). It did not let me drag it left 1 position.

In any case, this workaround did what I needed, just was seeing if there were another way. I find sometimes the dragging works fine (like moving the grid under container(3), but other times, like shifting it left, not so much.

Thanks for all the help,
Doc

First off, GP doesn’t have control on how the drag and drop works as it’s a WP feature.

But I can give you a tip, add another block at the root level, then you should be able to drag the child block to the root level.

Shot a small clip to show you: https://www.screencast.com/t/v91ZC1LoYENC

• This reply was modified 2 years, 10 months ago by ying.

Ying,
That’s what I did in the prior post. I actually had the container(1) with multiple container(2)’s under it. So I just created 3 container(3)’s, then just dragged each grid under container(2)’s to the new root level container(3)’s, then just shifted them up to the right positon and it worked fine. I may try your method in the video next time by dragging it one level below to where it allows the root level placement.

Thanks again for all the help and tips,
Doc

You are welcome ??