[Resolved] Background image 50% width and vertical align buttons

[Ismael]

I can’t create two 50% width backgrounds (color/image) where the content is limited to the width of the container, as stated in the private information.

Also, I’m wondering how I can align the buttons vertically to the center even if one has content around it and the other does not.

[Ying]

Hi Ismael,

The site you linked is not using GP, can you confirm?

And I’m not able to load the specific page you linked, it times out.

Let me know!

[Ismael]

Yes, you are right.

What you can see in that domain is our old website. We are currently developing new one using GP, but DNS are not changed yet, so to access our develop site you have to add the IP provided in private information to your host file. (Tutorial: https://www.hostinger.com/tutorials/how-to-edit-hosts-file)

[Ismael]

Hello, we are changing our DNS, so in a few hours you will be able to see our current website we are working on.

[Ying]

Just checked, it’s still the old site, I will come back and check it again in 1 hour.

[Ismael]

Hello Ying, can you check it again please?

Although I think I have found the closest shape to the final design.

[David]

Hi there,

takes a few steps.

1. Add a top level container block with these settings:
Layout -> Display Flex -> Row. No Wrap.

2. Inside that add 2 x Container Blocks. with
Layout -> Display Flex -> Row. No Wrap.
Left Hand Container: Layout -> Justify content flex end ( right )
Right Hand Container: Layout -> Justify content flex start ( left )
Sizing -> Width 50% and set a min height, this will defined the height of the section.
Background -> Add your color / images to these two.

3. Inside each of these Containers add a Container Block.
Sizing -> width 100%
Sizing -> Max width: 600px – adjust this to be half of the contained with you want, this example would be for 1200px.

[Ismael]

Hello David,

It works as charm. In addition to that, i actually had to add auto-margin to child containers to respect page full width.

Besides that, i achieved vertically align buttons to center. (Can you check it is done correctly?)

Thank you!

[David]

Looks great!!

[Ismael]

Thanks!

[Author]

Posts