Inserting an IFrame and making it mobile friendly

Question

Hi there I'm compiling a page about cycling in the Alps and have embedded Strava widgets (see code below)

http://www.stylealtitude.com/cycle-routes-briancon-serre-chevalier.html

And I can't get them to look good on a mobile - I have tried various divs using media embeds from your pages, changing dimensions of the Iframe, removing dimensions, but no luck, could you please advise what should be the best way to achieve it looking good on a mobile apart from making them all images !!

Regards

G

SemiColonWeb · Accepted Answer

Hello,

We have just checked this out for you but Strava currently does not support Responsive iFrames. Consider using the following CSS Code:

.iframe-wrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
	padding-top: 25px;
	height: 0;
}

.iframe-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

and then enclose your iFrame inside the .iframe-wrapper DIV. Example:

This works for Videos but we are not Fully Sure of its compatibility with other iFrame Content. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

GavinBaylis · Answer

Thanks but no success never mind