Two full hight containers (50%-50% width)

nilph · September 2017

Hello,

I want to know, if it´s possible to split one column into two halves. So i can use one side for a full size image and the other for e.g. a fancy heading. It would be great to solve this within the Muffin Builder.

Thank you for support. Best regards, Nils (GER)

Bryan · September 2017

The equal height of wraps is used to position elements on: top, middle or bottom in wraps. In order to achieve this you need to:
1. Edit your page, and go to the muffin builder. Edit a section and under the advanced>style select 'equal height of wraps'. See screens:
http://prntscr.com/f40hvn
http://prntscr.com/f40kh0
2. Now edit each wrap in that section and set the desired vertical align(top, middle or bottom). See screens:
http://prntscr.com/f40kvr
http://prntscr.com/f40lhl

nilph · September 2017

Thank you for the respond.

I did it the way you showed up, but it didn´t work. The section is now as high as the wraps.

Maybe I have not expressed myself correctly.

I wanted to achieve, that the section within the content/the wraps (divided into two halves) are full screen as well. Maybe I can send you the url of my page?

The image shows, what i want to achieve

Thank you very much, Nils

Bryan · September 2017

Please edit your sections and set the style to full-screen.

nilph · September 2017

Hi, yes i did it, but unfortunately the picture is not full screen, as you can see at this screen:

Screen

These are my Settings:

Bryan · September 2017

It will not be fulscreen since it is an image not a background, this will not work.
This will be very hard to do, we usually give a background on the whole section and then cover it with a wrap on one side.
Can you send a link to this page.

nilph · September 2017

Yes sure, this is the link to the page: LINK
I tried to set the image as background, but that didn´t work either.

Bryan · September 2017

Please show me how it would look like when it is done. Send an image.

nilph · September 2017

This is how it looks like, when the the image is set as:

-section-background image

-postion: Left Top No-Repeat

-background size: Cover

-style: Full Screen | full-screen

The right wrap:

-backgroundcolor: #ffffff

-background position: Center Top Repeat

-background size: Auto/cover... makes no difference

The wrap contains the item: Column

See Screenshot

Bryan · September 2017

Please set the section style to full-width and add padding to the wrap, this way the wrap will controll the height of the section, not the other way around.

nilph · September 2017

That sounds logical. I have set the height of the wrap to 100%. But that destroys everything.

When I set a fixed px size like 1500px it looks a bit better, but it does not fill the whole browser hight as shown in my first posts. Any other ideas? Funny it is so hard... :-D

Bryan · September 2017

yeah, height in css is a pain. I think you did not understand the padding.
Please edit the wrap with the text and set the bottom and top padding to 200px (example)
Like this:
http://prntscr.com/ghsqb0

nilph · September 2017

Yes i understand, but the padding is a fixed value or isn´t it? :-??

Here is an example of what I want to achieve: LINK (You have to scroll a bit down to the full hight images)

No matter how high the height of the browser is, the picture always fits 100% into it.

Bryan · September 2017

Okay I understand fully what you mean from the start but this will be not possible with the wraps.

nilph · September 2017

Mhmm okay. Thank you very much for support.

Is it instead possible to have two wraps of the same hight? On the left side a full width image and on the right side a text colum aligned to ne middle?

Here is the Link one more time: LINK. There you can see what i mean (Second section)

I already tried to put the padding of both wraps to the same value (600px hight). But that does not work, because the padding is additional to the text in the colums.

Two full hight containers (50%-50% width)

Comments