Adding javascript has messed with my site width – help!

Site URL: https://www.gorsecottage.co.uk/

Today I added a Javascript booking widget to a client's homepage, and the site width on that page only has cropped in at the sides. Any page without the widget on is fine, so it's clearly interfering with the layout somehow. The background on the cropped section has also defaulted to a green from the site palette (white would have been less of an issue!)

When I messed around with it, it seems to be the first part of the code inside the <script> tags which is bugging it.

Can't seem to find a workaround since it's an interference rather than a setting, can anyone help?

The web page: https://www.gorsecottage.co.uk/

This is the code:

<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="326152" data-language-code="en" data-checkout-page-url="https://checkout.lodgify.com/gorsecottage/en/#/335012" 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: #183f39;
    --lodgify-ui-action-darker-color: #13322e;
    --lodgify-ui-action-lighter-color: #a3b2b0;
    --lodgify-ui-action-contrast-color: #ffffff;
  }
  </style>
  </div>

On 7/8/2021 at 9:19 PM, scelawrence said:

Site URL: https://www.gorsecottage.co.uk/

Today I added a Javascript booking widget to a client's homepage, and the site width on that page only has cropped in at the sides. Any page without the widget on is fine, so it's clearly interfering with the layout somehow. The background on the cropped section has also defaulted to a green from the site palette (white would have been less of an issue!)

When I messed around with it, it seems to be the first part of the code inside the <script> tags which is bugging it.

Can't seem to find a workaround since it's an interference rather than a setting, can anyone help?

The web page: https://www.gorsecottage.co.uk/

This is the code:

<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="326152" data-language-code="en" data-checkout-page-url="https://checkout.lodgify.com/gorsecottage/en/#/335012" 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: #183f39;
    --lodgify-ui-action-darker-color: #13322e;
    --lodgify-ui-action-lighter-color: #a3b2b0;
    --lodgify-ui-action-contrast-color: #ffffff;
  }
  </style>
  </div>

The widget css override the container styling, you can reset it like so

.container {
  padding: inherit;
}

On 7/8/2021 at 9:19 PM, scelawrence said:

Site URL: https://www.gorsecottage.co.uk/

Today I added a Javascript booking widget to a client's homepage, and the site width on that page only has cropped in at the sides. Any page without the widget on is fine, so it's clearly interfering with the layout somehow. The background on the cropped section has also defaulted to a green from the site palette (white would have been less of an issue!)

When I messed around with it, it seems to be the first part of the code inside the <script> tags which is bugging it.

Can't seem to find a workaround since it's an interference rather than a setting, can anyone help?

The web page: https://www.gorsecottage.co.uk/

This is the code:

<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="326152" data-language-code="en" data-checkout-page-url="https://checkout.lodgify.com/gorsecottage/en/#/335012" 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: #183f39;
    --lodgify-ui-action-darker-color: #13322e;
    --lodgify-ui-action-lighter-color: #a3b2b0;
    --lodgify-ui-action-contrast-color: #ffffff;
  }
  </style>
  </div>

The site has some problems. Do you need support on these?

Site URL: https://www.gorsecottage.co.uk/

1. (Tablet – Homepage) Button overlap

2. (Mobile/Tablet – Footer) Make email lie on the same row

3. (Tablet – Homepage) Reduce white space?

4. (Mobile – Homepage) Make text on the same line

5. (Tablet – The cottage) Word break

https://www.gorsecottage.co.uk/about-gorse-cottage

6. (Tablet – The cottage) Want to increase text width?

https://www.gorsecottage.co.uk/about-gorse-cottage

7. (Tablet – Footer) Make address lie on the same row

8. (Mobile – What on event) Text overlap

https://www.gorsecottage.co.uk/whats-on-events

9. (Tablet – Find us) Want to increase text width?

https://www.gorsecottage.co.uk/find-us

On 7/10/2021 at 3:58 AM, bangank36 said:

The widget css override the container styling, you can reset it like so

.container {
  padding: inherit;
}

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!

1 hour ago, JessPlease said:

I'm having the same issue as scelawrence with a Lodgify booking widget (site is https://www.stoerview.co.uk).

Please provide us with a few more details: 

1. The site is password protected. We'll need to know the public password.
2. Provide a screenshot of the issues you see.
3. Provide the page URL for the page with issues.
4. Share the code (HTML, JS and CSS) you have added and where you've added it.

3 hours ago, paul2009 said:

Please provide us with a few more details: 

1. The site is password protected. We'll need to know the public password.
2. Provide a screenshot of the issues you see.
3. Provide the page URL for the page with issues.
4. Share the code (HTML, JS and CSS) you have added and where you've added it.

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:

The Lodgify booking widget which has created the issue, I added in a code block on the header banner:

12 hours ago, JessPlease said:

The page with the issues is the home page only

Thanks for the additional information @JessPlease. This issue is due to a conflict of styling between Squarespace and Lodgify, but it's solvable 🙂.

On Squarespace 7.1, Squarespace gives the main page element a classname of "container". Unhelpfully, the styling used by Lodgify uses the same classname of "container" and, as their code is added last, it overrides the page settings by adding 40 pixels of padding along the left and right sides!

The good news is that you should be able to override this with some Custom CSS. Add the following to Design > Custom CSS:

#page.container {
  padding: unset!important;
}

Please let me know how you get on.

  If this post has helped you, please click a 'Like' or 'Thanks' icon below  ⬇️

13 minutes ago, paul2009 said:

Thanks for the additional information @JessPlease. This issue is due to a conflict of styling between Squarespace and Lodgify, but it's solvable 🙂.

On Squarespace 7.1, Squarespace gives the main page element a classname of "container". Unhelpfully, the styling used by Lodgify uses the same classname of "container" and, as their code is added last, it overrides the page settings by adding 40 pixels of padding along the left and right sides!

The good news is that you should be able to override this with some Custom CSS. Add the following to Design > Custom CSS:

#page.container {
  padding: unset!important;
}

Please let me know how you get on.

  If this post has helped you, please click a 'Like' or 'Thanks' icon below  ⬇️

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.

16 minutes ago, JessPlease said:

My remaining issue is that there is now a scroll bar along the bottom of the home page which shows grey padding if you scroll right.

Something on the homepage is exceeding the width of the page and causing this 'overflow' of additional grey space. It's difficult for me to troubleshoot this from here because I don't have admin access to your site and this isn't happening on test sites where the same code has been added. However, the following should hide it:

#page {
  overflow-x: hidden;
} 

26 minutes ago, paul2009 said:

Something on the homepage is exceeding the width of the page and causing this 'overflow' of additional grey space. It's difficult for me to troubleshoot this from here because I don't have admin access to your site and this isn't happening on test sites where the same code has been added. However, the following should hide it:

#page {
  overflow-x: hidden;
} 

 

All sorted, thank you so much

On 12/17/2021 at 2:36 AM, paul2009 said:

Thanks for the additional information @JessPlease. This issue is due to a conflict of styling between Squarespace and Lodgify, but it's solvable 🙂.

On Squarespace 7.1, Squarespace gives the main page element a classname of "container". Unhelpfully, the styling used by Lodgify uses the same classname of "container" and, as their code is added last, it overrides the page settings by adding 40 pixels of padding along the left and right sides!

The good news is that you should be able to override this with some Custom CSS. Add the following to Design > Custom CSS:

#page.container {
  padding: unset!important;
}

Please let me know how you get on.

  If this post has helped you, please click a 'Like' or 'Thanks' icon below  ⬇️

This helped me too. Thanks so much!

I have a problem with Lodgify's "Book Now Box" widget causing issues with my multi image sections at the bottom of the page. I tried 2 versions to try to get around it, but the first I can't scroll through and the second the images disappear. When I inspect, I noticed some errors when I add the widget. See screenshot.

Site: https://searenaproperties.com/villa-tryst

On 3/12/2022 at 5:08 AM, hummingbird said:

This helped me too. Thanks so much!

I have a problem with Lodgify's "Book Now Box" widget causing issues with my multi image sections at the bottom of the page. I tried 2 versions to try to get around it, but the first I can't scroll through and the second the images disappear. When I inspect, I noticed some errors when I add the widget. See screenshot.

Site: https://searenaproperties.com/villa-tryst

 

Can you share link to page where you used this way: "but the first I can't scroll through"?