Using I frame to get the job done and seems to work nicely, except for an issue of padding. There’s a top padding of 40… how can I get rid of this padding?

Also, it creates an issue of dual scrolling windows that can be a bit confusing (if you’re to the left or right of the iframe, in the whitespace, it scrolls the main site, if you’re inside the iframe it scrolls the iframe. This seems to be created by extra space on the side that isn’t registered (at least via inspect this element) as padding on the iframe. Is there anyway to disable the main site scrolling on this page and only have the iframe scroll?

http://www.openequalfree.org/teachbuzz

Thank you for writing in!

To remove the padding, add the following CSS code under Custom > CSS in the Customizer:

.page-id-77 .x-content-band {
   padding: 0;
}

Regarding the double scrollbars, the iframe has been given a height of 1600px, that’s the reason it’s showing scrollbar on body of the page. You can try the following CSS code to remove it:

html, body {
   overflow-y: hidden;
   height: 100%;
}

Hope this helps. 🙂

Thank you.

Thanks!

Michael

Please add the following CSS code under Customize -> Custom -> CSS:

body.page.page-id-77 {
position: fixed;
overflow: hidden;
left: 0;
right: 0;
}

Change your page template to full width to remove padding from left side .More information on http://theme.co/x/member/kb/page-templates/.

Hope it helps.