Iframe height displaying incorrectly

Help
1

Can anyone please tell me how to embed a Komoot tour correctly in my post?

The code is:

<iframe src="https://www.komoot.com/tour/238168407/embed?profile=1" width="100%" height="700" frameborder="0" scrolling="no"></iframe>

But the result doesn’t look right? It’s not 700 high.

See: https://mattpedals.bike/ridgeway-kennet-and-avon-loop

What’s wrong?

Thanks in advance.

2

Hey @mattpedals! It looks like you set your blog’s Custom CSS to the following:

iframe { width: 100%; height:350px; }

That will automatically make your Komoot tour iframe always appear at 350px, regardless of what you put it in the iframe. If you remove that from your custom CSS you should get the result you want.

Hope that helps!

Also it’s great to see another cycling blog on Write.as! You should definitely check out @ianbgibson’s cycling blogs — they’re awesome and in-depth: https://cycling.ianbgibson.com/ as well as https://trainingnotes.ianbgibson.com/.

3

I also just wanted to say, cool cycling blog. I don’t think I’ve ever seen it show up on the read.write.as feed though. So I’m thankful I found it here.

4

Thanks @dino, and thanks @cjeller1592. I’ll check out ianbgibson’s blogs.

I don’t remember adding that custom CSS! I’ve deleted it but the iframe appears very narrow – not 100% width unless I add this code to the custom CSS:

`iframe { width: 100%}`

That seems to have sorted it.

1 Like