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:
Put the longest first. Doing this will at least make the section look full when first viewed.
Make all of the testimonials similar in length.
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;
}
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.