0

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

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

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

  • Thank you so much for your answer and for taking time to write the code. It work perfectly and I learnt that it is finally not difficult to add CSS into the custom.css file :) – Eric81 Nov 9 at 10:56
  • Glad it helped, Please accept this answer if it worked for you :) – Arsalan Mithani Nov 9 at 12:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.