Responsive/layout break points on SQUARESPACE?

Responsive
1

Hello All

I have a tiny problem concerning the break points I need to use with my website done on Squarespace
I just embed animations done on hype pro to my website on squarespace (and it works pretty well) :smiley:
here the website that I speak about: www.nrhk.or.jp

but I cannot find precisely which break points I need to use on hype to have a smoothly change between the different format of squarespace

I contacted squarespace and they truly don’t know :smiley:
in exchange they ask me to use http://responsivepx.com/ to verify the break points of my website
but indeed with this method I cannot have precisely the break points
(depending of the method used)
so far I found, considering the option “without scrollbar” and WIDTH only

change 1: … to 599
change 2: 600 to 639
change 3: 640 to 816
change 4: 817 to 1248
change 5: 1249 to …

if I add scroll bar we need to put + 15 px to each value

so my questions:
As all of you are experts in it (much more than me who is a noob)
what choose you will do to have the animations fitting perfectly to the Squarespace model?
I didn’t consider at all the height to calculate those breakpoints, do I have to?

thank you very much

ps:
for info to embed I use this code which works nice
but if you have advices too, you are more than welcome :blush:

<div id="nrhklogo_hype_container" style="margin:auto;position:relative;width:100%;height:447px;overflow:hidden;">
	<script type="text/javascript" charset="utf-8" src="//_name of the server_/_folder_/_subfolder_/NRHKlogo.hyperesources/nrhklogo_hype_generated_script.js"></script>
</div>
2

I’m not an expert with SquareSpace, so hopefully someone with more experience will chime in.

It looks like the current Hype document is the “mon” (correct term?) seal in the banner on top of the temple hero image?

It does appear that you currently have it in a working responsive state, so this is a slight matter of behavior that you don’t like? If so, can you elaborate on what exactly you don’t like about it and what you need to fix (perhaps annotated screenshots)?

I do see that on breakpoint changes, it re-animates the fade in and is somewhat abrupt.

For something like your document, perhaps you could consider not using different Responsive Layouts in Hype, and use the Flexible Layout system only? This would just let the content stretch/position just how you have the pins setup.