How to Hide iFrame on Mobile

Site URL: http://beachcomberholidayunits.squarespace.com

Help please!

Having a bit of trouble hiding an availability booking grid iframe for a client's site on mobile. https://beachcomberholidayunits.squarespace.com/

I had a good read of the previous article below but didn't have any luck. 

 https://forum.squarespace.com/topic/53270-how-to-hide-iframe-on-mobile-sites-or-resize/#comment-94830

The iframe I'm working with is below. 

<iframe src="https://apac.littlehotelier.com/properties/beachcomberholidayunitsdirect/widget?number_of_days=14" height="250" width="100%" frameborder="0" scrolling="no" allowtransparency="true"></iframe>

(I've also tried with width="750" as recommended by the Little Hotellier booking engine) 

Following the previous article I've tried adding <embed class="booking" to the above and then updating the header code injection to:

<script> if(window.innerWidth <= 800 && window.innerHeight <= 600) { document.querySelector('.booking').style.display = "none" } </script>

The end result is the availability grid widget still displays in mobile and breaks the container. Screenshots attached for reference.  

Any help would be greatly appreciated! 

It looks like you have two code blocks that have iframes.

First remove any previous attempts at the effect you are trying to achieve.

For each iframe add the following attribute.

class="littlehotelier"

Add the following to Design > Custom CSS.

@media screen and ( max-width: 767px ) {

  .littlehotelier {
  
    display : none;
    
    }
  }

Let us know how it goes.

Thanks so much, I added your Custom CSS to the Code Injection header before realising I needed to add into the CSS. You've made my day mate thank you! 🙏