joseph81

Hi. 
Check out this video: 
 

In the Custom CSS panel you should add this code:
@media (max-width:767px) { section[data-section-id="632e50f9d2011344c3f06578"] .fluid-engine { grid-template-rows: unset; } }  

I actually wrote an article about this, maybe can help someone. Take a look: 
https://www.ui-workarounds.com/how-to-make-a-squarespace-accordion-image-friendly/

Thank you so much!! Now it works 🙂

In your case the code is slightly different:
.video-block { .video-player { padding-bottom: 125% !important } }  

Hi. It is a little bit harder to give you the best advice without seeing your website, but I can write here 2 solutions that might work but it all depends of the structure you are having in your video block:
The first:
.video-block { .video-player { padding-bottom: 177% !important } } The second if the first does not work for you:
.video-block { .embed-block-wrapper, .intrinsic-inner { padding-bottom: 177% !important } } For further explanation or other options please visit my article:
https://www.ui-workarounds.com/control-the-aspect-ratio-of-your-videos-in-squarespace/
If these 2 examples don't help please let me know. The 177% is for 9/16 portrait aspect ratio.

If your question is still valid, then I want to give you my solution:
https://www.ui-workarounds.com/boosting-your-squarespace-accordion-with-videos-images-tables-lists-and-titles/
With this script you can add in your accordion videos, images, tables, titles and lists. If you have questions, just let me know.

Oh, the other way to do it is to create a code block and copy first the html then in  <style>...code here...</style> to put the css and in <script> ...code here</script> to put the javascript.
I don't think the current accordion block  let's you do that. 
I wrote an article about this in the past, take a look, if you need further assistance let me know. I am planning to make also a video for this article. 
https://www.ui-workarounds.com/boosting-your-squarespace-accordion-with-videos-images-tables-lists-and-titles/

Oh, the other way to do it is to create a code block and copy first the html then in  <style>...code here...</style> to put the css and in <script> ...code here</script> to put the javascript.
I don't think the current accordion block  let's you do that. 
I wrote an article about this in the past, take a look, if you need further assistance let me know. I am planning to make also a video for this article. 
https://www.ui-workarounds.com/boosting-your-squarespace-accordion-with-videos-images-tables-lists-and-titles/

Oh sorry!! I don't know much about coding. I didn't know this detail which turns out to be very important..! Thanks for your time, it worked!!!!

You placed that code outside the style tag, that is one of the problems.

Take a look at my video, for now there is support only for images but the process is pretty simple. 
Also the article: 
https://www.ui-workarounds.com/how-to-make-a-squarespace-accordion-image-friendly/

Take a look at my video, for now there is support only for images but the process is pretty simple. 
Also the article: 
https://www.ui-workarounds.com/how-to-make-a-squarespace-accordion-image-friendly/

Just a quick update: weglot support were able to fix the issue for me from their end. Cheers

This second one worked perfectly! Thanks so much for your help. 🙂

@media (max-width: 640px) { .sqs-layout .sqs-col-12 [class*=sqs-col] { float: left !important; width: 50% !important; } } This is one approach to achieve what you want.

Ah @joseph81 it works perfectly! You superstar, thank you ever so much. 

In your case the code is slightly different:
.video-block { .video-player { padding-bottom: 125% !important } }  

Thanks for this! I think I got it worked out but this article is amazing!

Then just add another a selector before the img selector:
a img:hover {transform: scale(1.1); transition: .4s;} a img{transform: scale(1); transition: .4s;}  

The 4:5 ratio would look like this:
.video-block { .embed-block-wrapper, .intrinsic-inner { padding-bottom: 125% !important } } My solution works with video blocks, I'm not sure what you are using since the  password you provided does not work to enter your website.

I just wrote yesterday an article about this actually: 
/*make video-blocks 4:3*/ .video-block { .embed-block-wrapper, .intrinsic-inner { padding-bottom: 75% !important } } https://www.ui-workarounds.com/control-the-aspect-ratio-of-your-videos-in-squarespace/

Hi. I wrote recently a blog article about implementing a tarot card random show when clicking on a button. Maybe it helps.
https://www.ui-workarounds.com/random-tarot-cards-on-a-click-of-a-button-using-svg-sprites/

Ahh I knew it was going to be something 'silly' like that, thanks so much for your help!

You have 2 problems. A specificity issue  is the first problem(you have an important on the pr  button color) and the second is you target only the main navigation(using the wrapper class). Solution: Use !important to override the other !important on the book a pr chat link and also remove the wrapper class and add the #header id for bigger specificity:
#header :not(.header--menu-open) a { color: var(--navigationLinkColor)!important; }