Issues with white space and borders

[mcphoto]

Hey guys - trying to wrap my head around the latest version of X - take a look at https://laurenbohartwellness.com -

The section has a huge gap of white space around it, though everything is set to zero. You can see I have a video background, but there’s like 60-some pixels of white space all around. There used to be something like a “marginless columns” button, but can’t find that anywhere. How to I get the sections to go to the edges of the site?

There’s also a gray border around the whole site frame, and borders and box shadows around the section - I haven’t added any of that. There’s border/box shadow around the header as well, and big gaps above and below the section. I’ve got zero margins, zero padding, no borders or shadows - where is all this stuff coming from?

And finally, if I have no menu in the header, how can I center the (graphic image) logo?

Thanks, will post login.

[ruenel]

Hello @mcphoto,

Thanks for writing in! You are having the 60-pixel gap because you are using the Blank - Container page template. Please edit the page and change the page template to Blank - No Container to eliminate the gap. For more details about the different page templates in the theme, please check this out:

• https://theme.co/docs/page-settings#page-attributes

Best Regards.

[mcphoto]

Thanks - I started building the page with “no container” but it wouldn’t let me add any elements to the section, but working now.

How can I get the background video to be centered at smaller preview sizes? It’s just cutting the right side off as the page resizes.

And - is there a way to center the logo and header elements via the controls, or do I have to dig in to the CSS for that? Thanks again!

[christian]

Hey @mcphoto,

The video will automatically be centered if you load the site directly on your phone. It won’t resize and reposition if you just resize the browser.

There’s a trick to maintain the aspect ratio of the video as close as possible though and that’s to use percentage-based padding. Set your Section’s Top and Bottom padding to a percent value. I say “close” because it’s tricky to maintain aspect ratio when the height of the text shifts per screen size because of wrapping.

Regarding your logo, it’s already centered. Since you’re using X, you need custom CSS to customize the header beyond what’s offered in the Theme Options.

Hope that helps.

[mcphoto]

Thanks - I actually found some code on the forum to center the BG video, and I changed the logo to “stacked” and added a display-none for the menu - I’ll disable the video at the smallest breakpoint and use a still there.

Can I throw in a request for the development team? This deals with parallax for backgrounds, either stills or videos. Those elements get resized when parallax is selected, but it makes it difficult to design around. I wish there were an option when the designer could make the BG element (still or video) to the size desired, and control parallax framing by adjusting the height of the container. Essentially crop the top and bottom of the video to give enough space for parallax to work - it isn’t necessary to have more content on the left and right sides of the container for parallax, since it’s only the up-down motion that creates the effect. I really feel that would make parallax much more useful and offer more control of appearance.

[ruenel]

You’re most welcome @mcphoto.
The feedback has been noted and passed to our developers.