AndyB

Will you provide a link to the page with the video player? We may be able to use the pointer-events property on the container that has the text so the cursor interacts with that rather than the video thumbnail. 

Hi, Poppy.

Regarding the "padding" on mobile

I'm unsure how to change this off the top of my head, but let me tell you what's happening so you know why it looks like there's a lot of padding when viewed on mobile. In short, the container doesn't change size based on the testimonial that is visible.

If you scroll through the testimonials, you'll notice that the longest one fills the space vertically. So, the site is creating a container tall enough to accommodate the longest testimonial and then placing all of the testimonials in the middle of that container.

A few suggestions:

1. Put the longest first. Doing this will at least make the section look full when first viewed.
2. Make all of the testimonials similar in length.
3. Hide the longest testimonial on mobile. Doing this SHOULD make the container the size of the next longest testimonial.

Button Color

This should help:

.user-items-list-banner-slideshow__arrow-icon-background-area {
  opacity: 1 !important;
}

You probably just need to add h4 and p before the color property when hovering.

Try this:

/* apply the hover effect to all the blocks */
#block-4d9159bed5c68c86d676:hover,
#block-5fe23bf021cbdac4b243:hover,
#block-58052db15bcb402167b3:hover,
#block-362f90c2afaf8844ec0c:hover,
#block-75ac13840ab92eacc286:hover,
#block-569f7648aaa626926741:hover {
  background: rgba(248, 240, 226, 0.5); /* change background color to transparent beige on hover */
  h4, p {
    color: #444441 !important; /* change text color to #444441 on hover */
  }
}

This should do the trick.

In Custom CSS:

form input.button {
    background: #000 !important;
    color: #fff !important;
}

...OR...

In the page header:

<style>
form input.button {
    background: #000 !important;
    color: #fff !important;
  }
</style>

This is likely a problem with not having the pointer-events property set to "none" for overlays that restrict access to clicking on the video. For example, .video-block .intrinsic:after and .gallery-grid-item-wrapper a:after might need pointer-events: none; added to them.

On 3/17/2022 at 2:35 PM, vickys said:

Can anyone suggest why my accordion points have stopped working on this page ie. they are all expanded: 
https://www.earth-changers.com/sustainable-places/pangaea-exploration

I've changed nothing and they used to work.
And they work on all the other pages where I feature them, eg.
https://www.earth-changers.com/about/frequently-asked-questions
or https://www.earth-changers.com/sustainable-places/nepal-tiger-mountain-pokhara-lodge

I've fiddled around trying to add a new MarkUp block of content, but still they won't work on this page. I've also removed and re-saved the header code to no avail.

Any ideas? (please note I'm no developer!). Thanks!
Vicky

Hi, Vicky.

It looks like you have this code in the header of the page that's giving you issues:

<script>
     $(document).ready(function(){
     $('.markdown-block .sqs-block-content h3').css('cursor','pointer');
     $(".markdown-block .sqs-block-content h3").nextUntil("h3").slideToggle();
     $(".markdown-block .sqs-block-content h3").click(function() {$(this).nextUntil("h3").slideToggle();});
     });
</script>

You have this code in the header of the pages that are working as you'd like:

<script>
     $(document).ready(function(){
     $('.markdown-block .sqs-block-content h2').css('cursor','pointer');
     $(".markdown-block .sqs-block-content h2").nextUntil("h2").slideToggle();
     $(".markdown-block .sqs-block-content h2").click(function() {$(this).nextUntil("h2").slideToggle();});
     });
</script> 

So, on the page that's giving you issues, it's not targeting the h2s in your Markdown blocks but rather the h3s. The h3 markdowns are working on this page. If you want the h2s to work as well, putting both scripts in your page header should help.

On 5/16/2021 at 10:58 PM, Brent_Dickens said:

How do I target a section 'sectionTheme' using custom css.

I want to target: "sectionTheme": "light" within the: data-current-styles {}

Assuming you want to apply CSS to all sections with a light color theme assigned to them, you can use the data-section-theme attribute, or it looks like Squarespace creates a class based on the assigned color theme.

To use the attribute:
[date-section-theme="light"]

You'll notice this attribute in the first line of the <section> tag. I'm sure "light" changes to correspond with whatever color theme is chosen for that section.

To use the class:
.light

If you look at the end of the list of classes assigned to that section, you'll notice "light" show up right before the data-section-id attribute. It's sort of hidden by showing up right there, but it should work for selecting all sections with the light color theme assigned to them. The same is likely true with this class in that it changes to correspond with whatever color theme is chosen for that section.