[Support request] How to get the elements on may layout vertically aligned?

[Ying]

Try adding this CSS:

.gb-grid-wrapper.cu-grid-align >.gb-grid-column > .gb-container > .gb-inside-container >a >img,.gb-grid-wrapper.cu-grid-align >.gb-grid-column >.gb-container> .gb-inside-container >a {
    height: 100%;
}

.gb-grid-wrapper.cu-grid-align >.gb-grid-column > .gb-container> .gb-inside-container >a >img {
    object-fit: contain;
}

[Nicolas]

I did and I see no change.
(And I cleared my cache).

[David]

You can try this CSS:

.gb-grid-wrapper.cu-grid-align > .gb-grid-column > .gb-container > .gb-inside-container > a {
    margin-top: auto;
}

But when you have variable size images and content, there is no method to make that layout magically work.

[Nicolas]

It worked.

As of today, my CSS looks like this:

/* To align items of a grid vertically*/
.gb-grid-wrapper.cu-grid-align > .gb-grid-column > .gb-container > .gb-inside-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.gb-grid-wrapper.cu-grid-align > .gb-grid-column > .gb-container > .gb-inside-container > p:last-of-type {
   margin-top: auto;
}
.gb-grid-wrapper.cu-grid-align >.gb-grid-column > .gb-container > .gb-inside-container >a >img,.gb-grid-wrapper.cu-grid-align >.gb-grid-column >.gb-container> .gb-inside-container >a {
    height: 100%;
}
.gb-grid-wrapper.cu-grid-align >.gb-grid-column > .gb-container> .gb-inside-container >a >img {
    object-fit: contain;
}

.gb-grid-wrapper.cu-grid-align > .gb-grid-column > .gb-container > .gb-inside-container > a {
    margin-top: auto;
}

What can I delete?

In his message above (29 Dec), Fernando had said the following:

Alternatively, if you can wait a little bit, we’re releasing an Alpha version of GenerateBlocks 1.7.0 in January, hopefully, by the first week.

[David]

You can combine two of the rules so you have this:

/* To align items of a grid vertically*/
.gb-grid-wrapper.cu-grid-align > .gb-grid-column > .gb-container > .gb-inside-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.gb-grid-wrapper.cu-grid-align > .gb-grid-column > .gb-container > .gb-inside-container > a,
.gb-grid-wrapper.cu-grid-align > .gb-grid-column > .gb-container > .gb-inside-container > p:last-of-type {
   margin-top: auto;
}
.gb-grid-wrapper.cu-grid-align >.gb-grid-column > .gb-container > .gb-inside-container >a >img,.gb-grid-wrapper.cu-grid-align >.gb-grid-column >.gb-container> .gb-inside-container >a {
    height: 100%;
}
.gb-grid-wrapper.cu-grid-align >.gb-grid-column > .gb-container> .gb-inside-container >a >img {
    object-fit: contain;
}

1.7 we’re still doing the final rounds of pre-alpha (live) testing

[Nicolas]

I have the same issue on this page.
See URL in PI field info.

Since I’m not a coder, I am very confused every time I encounter such a situation, that is, almost on every page I design.
I’m so strongly looking forward to your update on 1.7.

[David]

The simplest fix is to add the HTML link and image inside its own Container Block, and then set the Container Blocks Minimum Height. Then you can manually adjust this in the editor for all the various designs.

[Nicolas]

IS this what you mean?

1. I had to test 50 px for the minimal height of the container. Then 120. Then 150, etc. Till finding what seems to aligned the buttons with the other column. Is this normal to have such an approach?

2. I also had to change the vertical alignment of the custom html to get the image at the center of the container.

3. Will this approach not create layout issues on smartphone and ipad? Or others?

4. When do you think you are going to release a more elegant, wisiwig solution to such recurrent layout design issue with GB?

Thank you

[Author]

Posts