Archived topic

Aligning button with space-between

5 replies · Started by Erika on January 10, 2023

Viewing posts 1–6 of 6

January 10, 2023 at 1:41 am #2489778

Hi there,

I have a css here that should align the button and the text, but when the size of the window is reduced, the space-between is not visible. What is wrong here?

css:
.flextopdown {
display:flex;
}
.flextopdown >.gb-inside-container {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}

Thanks for looking!

Erika

January 10, 2023 at 1:59 am #2489796

Hi Erika,

The CSS you currently seems to be not working.

Such a layout would be possible with no extra code needed in the next update of GenerateBlocks.

For now, what you can do is place the button outside of the flextopdown Container. After which, we can replace the CSS you have to make it work.

January 10, 2023 at 2:03 am #2489803

Hi Fernando,

I see, that´s why I wondered why it did not work... however good news on the update.

I made the changes in the first column, what would be the proper css.

Thanks, Erika

January 10, 2023 at 3:50 am #2489916

Hi there,

try this method instead.

1. remove your current CSS and the classes from the container Blocks.
2. Add this CSS:

.aligned-columns > .gb-grid-column > .gb-container > .gb-inside-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.aligned-columns > .gb-grid-column > .gb-container > .gb-inside-container > :last-child {
    margin-top: auto;
}

3. Select the Grid Block, and give it a class of: aligned-columns

January 10, 2023 at 3:55 am #2489920

Hi David,

that´s nice. I keep it for the moment and will check out the possibilities after the next update ;)

Erika

January 10, 2023 at 6:06 am #2490063

You're welcome

This archived topic is closed to new replies.

Start building better websites today.