jsimpson Posted February 5, 2021 Share Posted February 5, 2021 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! Link to comment
creedon Posted February 5, 2021 Share Posted February 5, 2021 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. jsimpson 1 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. Link to comment
jsimpson Posted February 5, 2021 Author Share Posted February 5, 2021 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! 🙏 creedon 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment