UPDATE:
My ongoing attempts to make the iframe container responsive have been focused on adjusting its size based on the intrinsic ratio of the iframe. Unfortunately, this approach has not fully worked as some elements of the iframe remain fixed in place. I am struggling to achieve a truly responsive Strava Iframe and have shared my current attempts in a Codepen Collection.
I recently implemented a shortcode to embed Strava iframes on my Hugo site using the academic theme. While the iframes display properly and are responsive on desktop browsers, they do not adapt well on mobile devices. The issue can be observed on this webpage or my GitHub repo. Any help in resolving this would be greatly appreciated.
I have experimented with various CSS tweaks recommended on the Hugo forum and other online sources.
Current Shortcode:
{{ if and (.Get "id") (.Get "hash") }}
<div class="responsive-object">
<iframe height='405' width='590' frameborder="0" allowtransparency='true' scrolling='no' src="https://www.strava.com/activities/{{ .Get "id" }}/embed/{{ .Get "hash" }}"></iframe>
</div>
{{ end }}
Current CSS:
.responsive-object iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.responsive-object {
position: relative;
padding-bottom: 67.5%;
height: 0;
margin: 10px 0;
overflow: hidden;
}