Problem integrating Algolia into Squarespace via embed block

Bootstrap CSS is the cause.

1 year ago I installed some effects that use Bootstraps, it causes the same issue, in addition it also distorts icons when inserting block in editing mode.

You will need to write more CSS to override Bootstrap.

Have you solved this yet?

On 12/13/2020 at 7:38 AM, edhex said:

I am trying to integrate Algolia but it seems when I put the code in the whole site’s look and fonts change (become smaller, padding added to the sides of the page etc).

 

I am just using an embed block - see the integration here (password: ed) https://www.thewesternport.com.au/code - with the Algolia block halfway down (the lists of bands coming)

 

Playing around it is this line from the block's Algolia integration that is causing the whole site to change: <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 

 

This is how the website is meant to look (larger font sizes and no padding on sides etc) https://www.thewesternport.com.au - just wondering if someone knows what might be the problem/ something I've missed

You can found some scoped-bootstrap css build and place all your code inside that container

Hi Ed,

Curious if you got this to work. I have a client that needs to have the search tool directed to Algolia - it's required - and before I tackle the job, I want to be SURE this is not going to be a headache in SS.

*I'm more of a designer, not coder, so this is quickly getting over my head.

Thx!