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

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

1 Answer 1

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

2
  • 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
    Commented Nov 9, 2019 at 10:56
  • Glad it helped, Please accept this answer if it worked for you :) Commented Nov 9, 2019 at 12:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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