Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Adding javascript has messed with my site width – help!


Question

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>

Link to comment

2 answers to this question

Recommended Posts

  • 0
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;
}

image.thumb.png.f4539236d63b39dba9fe3e44adaf7660.png

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
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

gorsecottage.co_.uk-01-min.png

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

gorsecottage.co_.uk-02-min.png

3. (Tablet – Homepage) Reduce white space?

gorsecottage.co_.uk-03-min.png

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

gorsecottage.co_.uk-04-min.png

5. (Tablet – The cottage) Word break

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

gorsecottage.co_.uk-05-min.png

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

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

gorsecottage.co_.uk-06-min.png

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

gorsecottage.co_.uk-07-min.png

8. (Mobile – What on event) Text overlap

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

gorsecottage.co_.uk-08-min.png

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

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

gorsecottage.co_.uk-09-min.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...