Lesh

Hi, I have a similar issue. Site url: http://daybreakbrokerage.com/mortgage. My client is a brokerage company and has a third party mortgage calculator widget on a page that isn't responsive on mobile (which the mortgage company says should be and believes Squarespace has some kind of code that is interfering). I've tried adding div tags and custom CSS similar to what was initially tried for the Google Map but it hasn't worked. Should I add something similar to the code you suggested earlier: /* GG Map */ iframe.responsive-iframe[src*="maps"] { width: 100% !important; height: 700px; }

Hi. I'm not sure how the following resolved the issue but I deleted a comment I added at the top of the injected code and this resolved the issue. I then pasted the comment back where it was and the problem didn't manifest itself again. The comment only said that the code adds a scrolling arrow. Thanks Tuanphan.

Thanks so much. The site is https://bulldog-denim-7l96.squarespace.com/config/pages

I added code provided by @bangank36. It works fine on desktop but mobile cuts off logo and navigation. Here's the code: <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <style> #page section:first-child a.next-section { padding-top: 140px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 2; display: inline-block; color: #fff; font : normal 400 20px/1 'Josefin Sans', sans-serif; letter-spacing: .1em; text-decoration: none; transition: opacity .3s; } #page section:first-child a.next-section span { position: absolute; top: 0; left: 50%; width: 24px; height: 24px; margin-left: -12px; border-left: 1px solid #fff; border-bottom: 1px solid #fff; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: sdb05 1.5s infinite; animation: sdb05 1.5s infinite; box-sizing: border-box; } @-webkit-keyframes sdb05 { 0% { -webkit-transform: rotate(-45deg) translate(0, 0); opacity: 0; } 50% { opacity: 1; } 100% { -webkit-transform: rotate(-45deg) translate(-20px, 20px); opacity: 0; } } @keyframes sdb05 { 0% { transform: rotate(-45deg) translate(0, 0); opacity: 0; } 50% { opacity: 1; } 100% { transform: rotate(-45deg) translate(-20px, 20px); opacity: 0; } } </style> <script> $(function() { $("#page section:first-child").append('<a href="#" class="next-section"><span></span> </a>'); $('a.next-section').on('click', function(e) { e.preventDefault(); $('html, body').animate({ scrollTop: $("#page section:first-child").next().offset().top}, 500, 'linear'); }); }); </script> Whether I hide the scroll on mobile or not using CSS the issue remains. Screenshots are attached. Is there simple code I can add so the home page on mobile appears correctly?