JessPlease

All sorted, thank you so much

Hi @paul2009 – that's so helpful, thank you! Maybe not so helpful of Lodgify not to have identified/fixed this, since they claim to have easy integration with Squarespace. Your code above has worked a treat. My remaining issue is that there is now a scroll bar along the bottom of the home page (https://www.stoerview.co.uk/home), which shows grey padding if you scroll right. This appeared when I added the initial bit of container code in the CSS, but didn't disappear when I removed it. It only affects /home, not the other pages. Have I messed something up when I initially added the wrong CSS code? Any advice appreciated.

Hi - thank you 1. Password is StoerView&2021 2. Screenshots attached of homepage without the booking widget (banner is full width) and with the booking widget (banner is constrained, with grey margins left & right). Also screenshots attached of view within Squarespace, without custom code (grey margins) and with custom code added (this fixes the grey margins within the Squarespace view but not on the actual site). 3. The page with the issues is the home page only – https://www.stoerview.co.uk/home 4. The code I added (in the Custom CSS) to try to solve the issue was bangank36's from the thread above ^, as below: .container { padding: inherit; } The Lodgify booking widget which has created the issue, I added in a code block on the header banner: <script type="text/javascript" class="" src="https://cdn.lodgify.com/portable-search-bar/1.43.3/renderPortableSearchBar.js"></script><div><div id="lodgify-search-bar" data-website-id="337133" data-language-code="en" data-checkout-page-url="https://checkout.lodgify.com/janet-chapman/en/#/349366" data-dates-check-in-label="Arrival" data-dates-check-out-label="Departure" data-guests-counter-label="Guest" data-guests-input-singular-label="{{NumberOfGuests}} guest" data-guests-input-plural-label="{{NumberOfGuests}} guests" data-location-input-label="Location" data-search-button-label="Search" data-new-tab="true"> </div> <style type="text/css"> html { --lodgify-ui-action-color: #8BAA86; --lodgify-ui-action-darker-color: #697f66; --lodgify-ui-action-lighter-color: #697f66; --lodgify-ui-action-contrast-color: #000000; } </style> </div>

Hello I'm having the same issue as scelawrence with a Lodgify booking widget (site is https://www.stoerview.co.uk). I've added your .container code to the Custom CSS on the site, and strangely that's fixed the side margins within Squarespace, but not when I look at the site outside SqSp... can you advise? Thank you!