Set different heights per screen size with inline styles CSS into the ‘Text’ section of a Page

I embedded a 360 Virtual Tour on a WordPress page using the following code:

<div align=”center”>
<div style=”width: 75%; height: 75%;”>
<div style=”position: relative; padding-bottom: 50.00%; padding-top: 35px; height: 0; overflow: hidden;”>
<iframe style=”position: absolute; top: 0; left: 0; width: 100%; height: 100%;” src=”html-websiteaddress” width=”640″ height=”360″ allowfullscreen=”allowfullscreen”></iframe></div>
</div>
</div>

Everything works pretty well but I need to be able different heights per screen size.
Exemple:
laptop/desktop screen –>
mobile device screen –>

I’ve been told it’s possible to do so by using inline styles CSS, so far I cannot find how to. I found about media queries but this seems to be plain CSS element.
Anyone can help? I’ve been looking for 5 hours aleady and I’m getting desperate :/

Read more here:: Set different heights per screen size with inline styles CSS into the ‘Text’ section of a Page

Leave a Reply

Your email address will not be published. Required fields are marked *