Making responsive iframe for shortcode (using academic theme)

support
1

I am relatively new to the Hugo platform, but I have set up a personal website this week using the Academic theme and everything has been going smoothly. I recently added a shortcode that processes iframe embeds from Strava. On desktop browsers, the embed appears fine, but on mobile, the iframe is too wide. I have tried making the iframe responsive using custom CSS but I haven’t been successful thus far. Does anybody have any advice or tips that I could try implement to fix this?

The HTML shortcode used is:

{{ if and (.Get "id") (.Get "hash") }}
<div class="fixed-wrapper">
    <iframe style="height: 405px; width: 100%; min-width: 360px; max-width: 590px;" frameborder="0" allowtransparency="true" scrolling="no" src="https://www.strava.com/activities/{{ .Get "id" }}/embed/{{ .Get "hash" }}"></iframe>
</div>
{{ end }}

Thanks!

2

I use @media rule for dynamic style.

<div class="shortcode-iframe-wrapper">
    <iframe class="shortcode-iframe" src={{}}></iframe>
</div>

.shortcode-iframe{height: 405px; width: 50%}

@media(min-width : 900px){
.shortcode-iframe{height: 405px; width: 100%}
}
3

Hi @ghfkddorl, thanks for the advice, unfortunately, this particular solution does not seem to be working on the Strava iframe. The embed loads as normal for desktop, or tablets but it is not responsive for mobile. I also checked to see if accounting the ratio of iframe had an impact to no avail :thinking: