Jump to content

How to Hide iFrame on Mobile

Recommended Posts

Posted

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! 

 

Screen Shot 2021-02-05 at 3.29.32 pm.png

Screen Shot 2021-02-05 at 3.29.43 pm.png

  • Replies 2
  • Views 1.1k
  • Created
  • Last Reply
Posted

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Posted

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! 🙏

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.