Spacing issues

sarahpeller · February 2020

Hello, I'm working on this page and I can't figure out why there is such a huge empty space above and below the image/text when I view this page for ipad pro in the developer tools on chrome. I've looked through the sections and wraps and don't see anything obvious that is setting any extra padding or margins... Can you help me discover where the space is coming frrom?

Here's a screen shot of what I'm seeing: https://snipboard.io/zZoYlI.jpg

Thanks!

Pablo · February 2020

Hello,

You are using the "Equal Height of Wraps" + "Full Screen" in section settings and while resizing it's keeping the original height while loading.

Do not worry about it, it will look fine on devices on load, because it's attaching this height value while the page is loaded.

Thanks

sarahpeller · February 2020

Thanks. I am now having other spacing issues that I don't understand on this page. When I view the page in developer mode, I'm seeing that padding is set to 328px on the top and bottom of the "What We Treat / How We Treat" section, but I can't figure out where that setting is to change it?

Pablo · February 2020

It is because you are using the "Full Screen" option in the section with that element.

Please edit the section with this element and tick off that option:

http://prntscr.com/r8e07c

Thanks

sarahpeller · March 2020

OK... but that is not checked on this page and I'm still getting that weird spacing on ipad. What can I do differently?

Question #2: I'm also getting weird spacing now on desktop view as well. See this screen shot... I set the padding at the top to 0, but still there is so much space between the nav bar and the image.

One more question...

As you can see in this screen shot, I'm also trying to get the text section and the image section on this same page to align well. Right now, it appears that they are both vertically aligning to the top of their section. I set the section to align center, but they are still aligning to the top and I can't figure out why...

Pablo · March 2020

1,2)

That's because of the section you inserted at the top of the mufifn builder:

http://prntscr.com/rdo20n

3) 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

Thanks

sarahpeller · March 2020

Ok, I think #1 and #2 questions have been answered. But I'm still struggling question #3.

I set equal height wraps in the advanced section of the section.

Then I set the vertical align to middle in the wrap section. But still they look like this....

btw, I'm now working on this page, but it's the same format as the last one I sent you a question about.

Pablo · March 2020

That's because you inserted a single wrap: http://prntscr.com/re3nxx

You have to use two wraps, one with image inside, second one with text (1/2 width of wraps), and then apply the "Equal height of WRAPS"

Thanks

Spacing issues

Comments