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 --> <div style="width: 75%; height: 75%;">
mobile device screen --> <div style="width: 100%; height: 75%;">

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 :/

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 --> <div style="width: 75%; height: 75%;">
mobile device screen --> <div style="width: 100%; height: 75%;">

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 :/

• pages
• css
• html

• It’s not possible with inline styles only. Whoever told you that is misinformed. – Jacob Peattie Commented Nov 8, 2019 at 7:31
• @JacobPeattie Thanks for the answer :) – Eric81 Commented Nov 9, 2019 at 10:52

1 Answer 1

You should use Media Queries. Give that element a class & style it through media query following different screen sizes.

Here is the sample:

HTML

<div align="center">
<div class="resolution">
<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>

CSS

For bigger screens (laptop/desktop) use different widths like:

@media screen and (max-width: 1280px) { <-- /* Whatever screen size you want to put here */
.resolution {
width: 75%;
height: 75%;
}
}

For smaller screens (mobile/tab) use different widths like:

@media only screen and (max-width: 640px) { <-- /* Whatever screen size you want to put here */
.resolution {
width: 100%;
height: 75%;
}
}

To understand Media Queries better Here are few references : Web Design Media Query & Media Rule