r/Wordpress • u/star-soup • 4h ago

adjusting HTML block height?

I've had an old website running on Wordpress for years, and I'm finally building a new small site from scratch, but things have changed a lot from when I initially learned the system. I'm trying to do what I thought would be the very simple task of adjusting the size and height of an HTML block I dropped in the editor, but despite searching, I haven't been able to find a way to do this. The block seems to have a fixed, very short height, and a width constrained to a block container I can't identify.

Could anyone point me in the right direction for how to manually set the height and width for an HTML block containing an iframe element?

3 Upvotes

100% Upvoted

5 comments sorted by

1

u/bluesix_v2 Jack of All Trades 4h ago

can you show us the page you're trying to edit? the frontend.

1

u/star-soup 1h ago edited 33m ago

Sure! https://www.burbankbikemap.com

After some experimenting I can refine my question a bit here too. I'm trying to build a microsite that just displays a header menu, maybe a short text block, and an embedded map that fills the entire page with no scrolling. I finally found that I could set the iframe width and height properties as
> width: 100vw;
> height: 100vh;

This successfully gets the iframe to fill the page! But I am still getting a scrollbar, I think because of the header menu. Is there a way I can "pin" the header menu so it avoids creating a scrollbar?

EDIT:
Getting closer: I put the header and page body in a group block, and added a little CSS to define the whole group
> overflow: hidden;
> height: 100vh;
Somehow I'm still getting a vertical scrollbar despite this, and I'm not sure what I'm missing to solve it.

1

u/bluesix_v2 Jack of All Trades 1h ago

Set the height of your header to a fixed amount, like height: 6em

Then, set the height of your map's iframe height: calc(100dvh - 6em)

1

u/star-soup 10m ago

Sorry I missed your reply when I added my edit above! I gave your suggestion a go but I'm getting the same result as with my group "overflow: hidden;" method: it's still giving me a page that scrolls a bit. Any ideas what I could try from here? Thank you so much for your help!

1

u/bluesix_v2 Jack of All Trades 1m ago

remove anything to do with overflow - it'll make a mess of things and hide real problems.

Looks like you've cracked it - working nicely now!