Virtual Tour Not Optimizing for Mobile

Site URL: https://www.blvd.vet/ravenswood

Hello,

I'm in the process of putting virtual tours for each of our locations on our site. The tours are hosted by Real Vision, and while they work well on the desktop site -- they don't optimize for mobile. Spacers don't work, at least not on both sides. I can add one to one side, but the addition of the other essentially breaks the page and/or it's not even recognized.

Here's the page in question: https://www.blvd.vet/ravenswood

Any thoughts, suggestions or comments are extremely appreciated!

Add to Design > Custom CSS

@media screen and (max-width:640px) {
iframe[src*="real.vision"] {
    width: 100% !important;
}
}

On 1/23/2021 at 7:31 PM, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:640px) {
iframe[src*="real.vision"] {
    width: 100% !important;
}
}

 

Thanks so much - this worked perfectly!

On 1/24/2021 at 1:31 AM, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:640px) {
iframe[src*="real.vision"] {
    width: 100% !important;
}
}

 

@tuanphan I've tried this and can't get it working, is this for version 7.1, can you tell me if there's a specific place in the code I should put it? I've tried a few things and it isn't working for me 🙁 any help would be gratefully appreciated!

19 hours ago, Hyates said:

@tuanphan I've tried this and can't get it working, is this for version 7.1, can you tell me if there's a specific place in the code I should put it? I've tried a few things and it isn't working for me 🙁 any help would be gratefully appreciated!

Can you share link to page where you added virtual tour? We can check easier