[Resolved] split-screen

[John]

Hello Folks at Support !

I not even sure what to call this.
“split-screen” is surely not the right term.

Please see my landing page:
http://www.understand-culture.com

See the links below the video.

I may want to add three more links.
But instead of adding them vertically,
I’d like the option of displaying them to the left:

Germany Patterns
United States Questions
Germany:USA Exercises

I’m sure that that is doable.
You folks seem to make everything doable.

How would I do it?

John

[David]

Hi there,

ok theres a few ways – lets try this option:

1. Select your existing Headline Block that contains your links, and from the Block Toolbar 3 dot menu, select Duplicate.
2. Now select your duplicate block and update the links inside for your new list of links.
3. With that block still selected go to the sidebar Advanced > Additional CSS Class(es) and insert: inline-links

Publish the page.

4. In Customizer > Additional CSS add this code:

@media(min-width: 769px) {
    .inline-links {
        display: flex;
        justify-content: space-between;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[John]

Thanks, David !

Let me give this a try over the next few days.

I’m awaiting customized coding being done by
another David in England (Derby).

John

[David]

You’re welcome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[John]

Hi David,

See what your coding looks like here:
https://understand-culture.com/welcome_/

However, I miscommunicated what I wanted.

I’d like three clickable terms stacked.
And two stacks. As in:

Germany Patterns
United States Questions
Germany:USA Exercises

Those two columns/stacks on a wide screen.
But then on mobile, they are adjusted to:

Germany
United States
Germany:USA

Patterns
Questions
Exercises

Is that doable?

Thanks !

John

[David]

You can add a GB Grid Block, set that to 2 x Columns. Then add you lists in the columns.
By default the 2 columns will stack on Mobile.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[John]

Oh, this seems to be easier than I thought.
Ok, let me give that a try.

Thanks, David !

John

[John]

I couldn’t find GB Grid Block, David.

Please point me there.

John

[John]

I found it, David, remembering that GB
is WP and GP.

Thanks !

John

[David]

Glad to hear that!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[John]

Nope. I celebrated prematurely, David.

I’m in the page on the backend.
I click my cursor into the block.

What do I do next in order to create a grid?

[John]

I got it.
Found the next step.

Sorry for the back-n-forth.

[David]

Sorry i should have provided some docs:

1. This is the parent Grid Block:

https://docs.generateblocks.com/article/grid-overview/

2. And this is for the containers that are auto added to each of the Grids columns:

https://docs.generateblocks.com/article/container-overview/#layout-–-grid-item

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[John]

David,

I think I figured it out.
Please see:
https://understand-culture.com

Question: Is it possible to adjust
the width between the boxes within a grid
or are the grids static?

Thanks !

John

[David]

Looking good 🙂

You can add some space between the Columns by selecting the Grid Block and setting the Horizontal Gap:

https://docs.generateblocks.com/article/grid-overview/#horizontal-gap

Is that what you need ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts