Reputation: 147
I am trying to make the Meteogram Weather Widget from yr.no responsive and align it in the centre of a div. The widget embed is an SVG. The developer's docs say to include the embed in an iframe, which I have done.
I am using Bootstrap 5, so have tried the mx-auto class to centre the widget, but that hasn't worked. I have also tried centring by using the flex classes (d-flex justify-content-center), which hasn't worked either. The widget stays left aligned regardless of the options I have used and is not behaving responsively.
HTML
<div class="weather-embed mx-auto">
<iframe class="weather-embed-iframe" src="https://www.yr.no/en/content/1-72837/meteogram.svg" frameborder="0" scrolling="no"></iframe>
</div>
SCSS
.weather-embed {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 56.25%;
&-iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
}
Upvotes: 0
Views: 18