vertical-align

Hi there,

theres no 'auto magical' way to keep the spacing even.

But you can try:

1. Add this CSS:

@media(min-width: 769px) {
  .spaced-columns>.gb-grid-column>.gb-container>.gb-inside-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-end;
  }

  .spaced-columns>.gb-grid-column>.gb-container>.gb-inside-container>*:first-child {
    flex-basis: 70px;
  }

  .spaced-columns>.gb-grid-column>.gb-container>.gb-inside-container>*:nth-child(2) {
    flex: 1;
  }
}

2. Edit the Grid parent container and in the Advanced > Additional CSS Classes add: spaced-columns

Note in the CSS above this: flex-basis: 70px; is defining the min height of the first element ( ie. the title ).

Hello David,
it works greate.
How can I change it on mobile?

Thanks!

Swen

I assume you don't want it applied on mobile ? If so i have updated the code above to just apply to larger devices.

Perfect!

Many Thanks!

You're welcome

Hello David!
Ich have a shift with this code on Internet Explorer Version 20H2. All other Browser works fine.
You can see it here.

Can I disable the code for Internet Explorer?

Thanks!

Swen

Is that CSS causing the issue ?
If so try updating the CSS to this - not sure but worth a try:

@media(min-width: 769px) {
  @supports not (-ms-high-contrast: none) {
    .spaced-columns>.gb-grid-column>.gb-container>.gb-inside-container {
      display: flex;
      flex-direction: column;
      height: 100%;
      justify-content: flex-end;
    }

    .spaced-columns>.gb-grid-column>.gb-container>.gb-inside-container>*:first-child {
      flex-basis: 70px;
    }

    .spaced-columns>.gb-grid-column>.gb-container>.gb-inside-container>*:nth-child(2) {
      flex: 1;
    }
  }
}

Hello David,

The code works. Although the arrangement is not perfect in IE, it's sufficient for this old browser.

Another problem I have on the page is a slight horizontal scrolling. I think it's in the start screen but I can't find the error.

Thanks!
Swen

Hi Swen,

The horizontal scrolling is from the CSS class alignfull you added to the gb containers.

This easist solution would be adding this CSS:

body {
    overflow-x: hidden;
}

But I would recommend setting this page to full width and remove the alignfull class, you could set the inner container width separately.

Let me know :)

Hello Ying,
thanks for Help!

I don't understand this at the moment and am using the code for now.
The whole page is not full width but only individual containers.
Can you explain that to me?

Thanks!

The Content Container width option:

https://docs.generatepress.com/article/content-container/

This will remove theme padding and set the content to 100%.
This means all content will span full width.

You can then use a Group Block or better still a GenerateBlocks Container Block to split your page into sections - then you can decide on what is full width and what is not.

Hello David,
thanks for information!

You're welcome