Wolfsilon

Oof!

My immediate instinct is to say that you'd want to use some type of conditional script to determine when to execute the code depending based on the location or destination.

However, there's probably a less tedious and more stable way to accomplish this, especially given SQS's finicky loading system.

Unfortunately, you cannot prevent double opt-in for member areas with reCAPTCHA.

Hi,

iframes are still supported. It's likely an issue with the widget itself. Since the ifame effectively loads all document, scripts, and styles when inserted and loaded on a page. Sometimes the iframe contains assets that attempt to hook or change other objects matching existing elements and components on the screen resulting in the parent document being effected. 

The best course of action is to reach out to the host of the iframe or to see if it can be resolved with a different version or updated accordingly.

Best of luck,

Dan

Hi,

I'd recommend searching this kind of thing up on W3 (https://www.w3schools.com/cssref/pr_pos_z-index.asp).

To kind of piggy-back on that as it relates to Squarespace, you'll want to make sure that 1) you're targeting the image as specifically as you can and 2) you aren't applying the property to an element that already has z-index applied to it.

Also, with Fluid Engine, this becomes even easier to accomplish and shouldn't require additional layering that you can't do out of the box.

Best,

Dan

Hmmm,

You could try:

@media only screen and (max-width:640px){
.portfolio-hover {
min-height: unset;
	}
.portfolio-hover-display {
min-height: unset;
	}
}

Hi,

You can start by removing the padding from the wrapper itself:

.gallery-lightbox {
padding: 0 !important;
}

Hi,

Could you please share a link to your page so that we can view and provide a accurate solution to your issue.

Best,

Dan

If I remember correctly, there were some changes to selectors and that alot of color changes via CSS would need to be adjusted to the new selectors. This change requires more specific targeting.

Hi,

You can try this:

.portfolio-hover-items {
flex-grow: 0 !important;
}

Hi,

I think you could just add a section above the header/banner section, decreasing the height to something minuscule and adding the marquee block to that tiny section. That might be the easiest solution, but maybe I'm missing something.

Best,

Dan

Hi there,

Yes, I do! This is an awesome find too. I'd be happy to help you learn or something. Could be a fun exercise for me as well. Feel free to DM message me on here, if you like.

Danny

Hi there,

You can try this:

#block-147549d76f399be66d1a {
	h1 {
	white-space: pre !important;
	}
}

Does it work is you remove the autoplay="autoplay"? Just write, 

<video autoplay loop="true" width="100%">
  ...
  ...

<div class="image-swap" id="swap-one">
  <a href="https://example.com">
    <img class="top" src="https://static1.squarespace.com/static/62f3cffc493e186006918632/t/630f7d2baf5afb34fc1f668c/1661959471742/cabernet-sauvignon-everly-farms-winery-minnesota-wines-mn-web.png">
    <img class="hovered" src="https://static1.squarespace.com/static/62f3cffc493e186006918632/t/630f7d465b47932cc38280d3/1661959496503/cabernet-sauvignon-what-are-the-best-wineries-in-mn-b%26w.png">
  </a>
</div>

Here's what I came up with as a solution for your code block.

Below is the CSS. I put an ID in the code above just in case you needed to do some extra targeting for the other images. Here's a link to the code too, if I understood what you wanted to do. https://codepen.io/wolfsilon/pen/vYjBeBY/bcfb77d250bc68ece9eb4e19f4b56039

.image-swap {
  opacity: 1;
  max-width: 400px; /* adjust widths */
  height: auto; /* adjust height */
  position: relative;
}
.image-swap img {
  width: 100%;
  transition: all 0.3s ease;
}
.hovered {
  opacity: 0;
  position: absolute;
  left: 0;
}
.image-swap:hover .hovered {
  opacity: 1;
}

Hi there!

The Squarespace stock animations for the slideshows, carousels, and the likes is notoriously difficult to edit. In fact, there's very little that you can do that would not achieve other undesirable effects. In my experience there are quite a few "hacks" or paid plugins that might help if you really wanted to stay "in-house" with the design.

I'd suggest evaluating whether or not your specific use-case, design, and website would benefit from a third-party JavaScript library. I'd be more than happy to help you set that up or point you in the right direction.

Best,

Dan

I'm not sure if that integration updates the style-sheets automatically, but it's possible you'd make the change in your Weglot settings and then have to add the script again to your website?

That's how ConveyThis translator works anyways.

Best,

Dan

Maybe adding:

[...]{
white-space: pre !important;
}

To your css would help?

Hmm,

I think the easiest way to achieve this is insert the three images and position them where you want them. Take the 3 images you want to display on hover and add them as the background of a pseudo-element.

When someone hovers lower the opacity of the original image and raise the opacity of the pseudo-element. You can then add the link to the original element and use that to direct people to where you want them to do on click.

Without seeing all three images or being able to replicate the problem, I can't give you a solid code to try.

Best,

Dan

Hi,

You've been very specific with the elements you want to target, which is good. However, some of the text elements that are used look similar to H1, H2...etc but they are actually sometimes "span, a, figure,..etc"

You can try to apply a global style change using the code below:

* {
font-family: "your_font_name_here";
}

Since you've already done most of the legwork this solution might help target those elements you may have missed.

Best,

Dan

Hi there,

If I understand this correctly, you can use Custom CSS to achieve this. The URL you shared above is the page that I will provide the example for:

#collection-6113f92368fd8d6659f31c4e {
.sqs-block-html {
padding: 0 !important;
	}
}

Hope this helps!

Best,

Dan

Hi,

I'm having trouble understanding what exactly you're trying to do. Could you give more details about what you're trying to achieve? Or the desired appearance.

Thanks,

Dan

Hi!

It would help enormously if you could set a published private version of your website and share the link with viewing password so that we can look at the issue. Without seeing the bug, we're kinda stuck with seeing just this, very nice looking, upwards arrow 😛

Best,

Dan

Hello there,

I think there isn't an easy way to achieve your desired results regarding how the cards scroll to the left or right. However, the arrows are more easily fixed. 

.sqs-gallery-design-carousel .sqs-gallery-controls .next, .sqs-gallery-design-carousel .sqs-gallery-controls .previous {
margin: 0 15px 15px 0 !important;
}

If you want a more robust slider/carousel, I'd look into using Swiper.JS or similar Javascript library. You can target the above selectors for further customization as well.

Best,

Dan

When you put the block into your section, under the place-holder you should see italicized, "insert caption here" or something to that effect.

Hey!

Fullpage.js Commercial Developer here:

Fullpage will not work with Squarespace without a complete overhaul to the directory.