Wolfsilon

Which of the two installation methods described in the link you sent are you using?

Hi,

You could try adding this snippet into your custom CSS. Hope this helps!

Best,

Dan

.user-items-list-carousel__media-inner img {
  box-sizing: border-box;
}

Could you please share the preview link with us so that we can target the elements and provide the best solution for your problem?

Thanks,

Dan

I'm guessing that one of the configurations for one of your sections has a different height than the other. You could try adjusting this from the Editor. If not, you could try setting a maximum height property.

This is likely an issue with the widget having matching, fixed, or shared selectors with other elements on your page. Your best bet is to request or customize this widget with the provider. Editing iFrames can be difficult without seeing the issue in the live environment.

Best,

Dan

Center of where?

I'm guessing the previous response was so that they could reference a widget or code that had an appearance you'd prefer. 

Hi,

Normally, the base script will go into the header code injection, the widget script will go in the footer code injection, and the html goes within the code block on the page you want it to be displayed.

Hope this helps!

Hi,

I'm not seeing any example code or demo of the issue you're having. Could you attach a screenshot or live demo, please?

Thanks,

Dan

Hi,

still a no go for me, nothing happens when I click the magnifying glass or hit 'enter'

If memory serves me correct, since I can't find an image on your website using the "poster" style. It would be the following:

.design-layout-poster .image-title-wrapper {
    display: flex;
    align-items: flex-end;
	justify-content: flex-end;
  }

But again, it's hard to troubleshoot without having a sample in place on your website.

Hi,

It's possible to adjust the position of the text using Custom CSS. However, I'd like to point out that having it break lines the way you want it too, may be a bit more tricky than expected. If you would like to word to be positioned to the top-right.

Best,

Dan

Hi,

Taking a look at your website, I can't get the search bar to display any results. Therefore, making it a bit hard to see the search results page.

Best,

Dan

@JohnJohn Just be sure that you're targeting the text as specific as you can with your CSS

@DevonHarris I think the best solution is to separate the "ea" in all instances manually. You would use a code block to achieve this:

<h1>B<span class="glyph">ea</span>ch</h1>

CSS:

.glyph {
font-family: "FONT_HERE";
color: "COLOR_HERE";
}

That's how you would target the letters with CSS, as for actually inputting the glyphs? That's kind of a keyboard thing, maybe use ALT/Control + Shift? I might not be understanding exactly what you mean.

Hi Monk,

It's definitely possible. Though you'll need to tap into several functions to do so. I'd suggest looking to hire a developer to help you complete this.

Best,

Dan

Dan,

I might suggest that you add the colors as an image and apply the hover image change to that block. That's the easiest option.

If you must keep the code blocks as is, I would suggest using a third-party animation library like "Scroll Reveal" to achieve this. As a bonus, Scroll Reveal could add a little more versatility to your website too.

Best,

Dan

Hi Lina,

Do you have an inspiration websites or examples of this so that we can see what you're trying to accomplish?

Best,

Dan

Hi,

To clarify, I provided the code above under the assumption that there were many instances of "R" in the headings on the site. If you have not completely built out your site, the simplest method is to do this manually, using a code block.

<h1> This <span class="alt-is">is</span> my <span class="alt-glyph">new</span> website </h1>

You would then set the new font that you want for "new" using custom CSS.

.alt-glyph {
font-family: "BLAH_BLAH";
color: dodgerblue; // random display property //
font-size: 24px; // random display property //
font-weight: bold; // random display property //
}
.alt-is {
font-family: "BLAH_BLAH";
color: deeppink; // random display property //
font-size: 24px; // random display property //
font-weight: bold; // random display property //
}

However, if you don't want to manually do this for all instances AND If I'm understanding you correctly, you want all "e"'s and all "a"'s to receive a different color/font family treatment? The simplest method would likely cause all instances of "e" and "a" on the site to be updated, not necessarily in combination.

You could try to add and replace this line with a new string:

.replace(/ea/g, '<span class="devon-ea">ea</span>');

Custom CSS:

.devon-ea {
font-family: "BLAH_BLAH";
color: dodgerblue; // random display property //
font-size: 24px; // random display property //
font-weight: bold; // random display property //
}

Yeah definitely seems like overkill for their needs! Good to know about that option in the future though!

It is not possible with pure CSS. You'd need Javascript to accomplish this. Our friend @WillMyers did a great piece on something like this!

https://www.will-myers.com/articles/auto-scroll-for-carousel-banner-slideshows-for-auto-layout-sections-in-squarespace-71

If you're on 7.0 an option would be to use Landing Pages!

If you're on 7.1, you'll likely end up needing some custom CSS/Javascript installed to make a popup widget the way I think you're imagining it. A work around is to have each playlist link to a landing page style page (no header/footer) just links to the platform. You would make these pages hidden from the main navigation for each playlist.

Again, the simplest option in theory, having a user select which platform they use FIRST is actually likely the most complicated one. You'd need to identify all playlists and add all three links to each button, then install some script to remove the links the user did NOT select. The work around for this of course, is to make a landing page style home page, and duplicate the entire site, 3 times, or for each platform and have the buttons on that landing page direct them to the correct "copy" of the site.

If that makes any sense at all. Lol

Hey there!

Try using this link for your video and let me know if this fixes the issue.

https://player.vimeo.com/video/534452757?h=136dea43d4&autoplay=1&muted=1

No,

You'll need to contact the company who made the widget to get any sort of reliable control over the embed. Just looking at their blog, it looks like their might be some options available through them.

https://blog.spark.re/how-to-set-up-custom-registration-forms-with-social-media-ads-17973d06fa36

Are you referring to scaled text option from the text block itself? This option isn't what I would use to achieve large text in a specific area where you require better control. I'd suggest targeting the title and text elements independently and increasing the font size via CSS.

For your second issue -- Are these two separate images? Or is it a single image? My inclination is that if it's the ladder image type, you likely have set the a block in that section to have a background and it's acting like an overlay. If that makes sense.

Otherwise, I can't think of a reason why it's chopping your image into two separate images.

Are you embedding an iframe? You'll have very little control over how this iframe will effect your website unless you have full control of the source.