maya_m

@jpeter You're the best!! It worked perfectly, thank you so much!!

Hello everyone! I'm encountering an issue with customizing the filter (archive block). Specifically, I'm looking to give active links a distinct style, such as underlining or making them bold when selected. For instance, if I choose "documentaries" and it filters content accordingly, I'd like the link to be visibly active. Despite trying various codes, I haven't found a solution. A friend knowledgeable in coding, although not specifically with Squarespace, suggested that using JavaScript might be the way to go.

Has anyone else faced a similar challenge? I'd greatly appreciate any advice or suggestions. Thank you!

Link to the page: https://www.sandranam.me/work

Pass: 7u5PY6B6C

@tuanphan Many thanks !!

Seems like I've already figured this out. Thank you so much for responding!

Hi @tuanphan! Yes, correct!

I modified some of the fonts using CSS on my website, but fonts in certain sections aren't appearing correctly in Safari, specifically within the summary block and blog section. Has anyone ever faced a similar issue?

Fonts in Editor Mode:

Fonts in Safari:

Link: https://www.sandranam.me/work/squarespace-dream-it-idris-elba

Pass: 7u5PY6B6C

Also, is there a way to create a cloud of tags like this on mobile?

Hi @tuanphan

I'm sorry for asking for help again, but I made a new archive list instead of the one you had helped me with. For some, reason I can't adjust the spacing. I've tried this code (with a new section ID) but still not working:

[data-section-id="65b0397a20c5aa7b2a8e2fa3"] .content-wrapper {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }
 

Could you please help me figure out what the problem is? Many thanks in advance!

Hi friends! I'm having trouble with the pagination items in the mobile view of the blog section. Specifically, one title spans two rows instead of one ("Watch More" - link here, pass 7u5PY6B6C), and on another page, two pagination titles are too close together. Is there any way to fix this problem? Thanks a bunch.

@tuanphan It worked perfectly! Thank you so much!!!

@tuanphan Thank you so much for your answer! I'd better hide it from mobile then. I used this code but it didn't work well (still see some parts of the text - screenshot attached):

//REMOVE SUMMARY BLOCK FROM MOBILE//
@media only screen and (max-width:767px) {.sqs-block-summary-v2 .summary-thumbnail-container.sqs-gallery-image-container {display: none;}
}

@media only screen and (max-width:767px)
{.sqs-block-summary-v2 .summary-header-text {display: none;}
}

@media only screen and (max-width:767px)
{.sqs-gallery-design-carousel .sqs-gallery-controls .next, .sqs-gallery-design-carousel .sqs-gallery-controls .previous {display: none;}
  }

Also, is there a chance to reduce the spacing in the place where it was supposed to be the summary block?

Many thanks!

Hi friends! I'm trying to tweak a summary block for both desktop and mobile (check the link - "Watch More" carousel, password: 7u5PY6B6C). For the desktop, I want a seamless carousel without borders, similar to the one at the bottom of the page (see the reference/attached screenshot).

Now, on mobile, the thumbnails are tiny, and the text is all over the place (screenshot is attached). Any way to show just one thumbnail instead of two?

If you've got any tips on how to make this happen, I'd really appreciate your help! Thanks a bunch! 🙌

@tuanphan Terrific! I'm so grateful for all your help! 

@tuanphan This worked perfectly! Thank you so much!!

@tuanphan Thank you so much for your help!!

Is there a way to reduce the spacing between the filter and other blocks?

Adding a screen recording

Yes! The issue with the summary block is that when you hover over a thumbnail, the darken/blur filter appears without the title. On the other hand, the title only appears without a filter when hovering specifically on the middle area of the thumbnail. This mismatch makes it seem like the filter and the title aren't synchronized properly.

@tuanphan I'd like the title to show up simultaneously with the blurred/darkened filter like here: https://www.sandranam.me/work

Here's the code I've been using:

// HOVER ON SUMMARY BLOG //
.sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-title, .sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-price .product-price, .sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-excerpt p, .sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-read-more-link, .sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-content {
  font-size: 24px!important;
  color: white!important;
  font-weight: regular!important;
  font-family:'orpheus pro'!important;
}

.sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-title, .sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-price .product-price, .sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-excerpt p, .sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-read-more-link, .sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-content {
  position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translate(-50%,-50%);
    opacity: 0!important;
    transition: all 1s!important;
}

.sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-title, .sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-price .product-price, .sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-excerpt p, .sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-read-more-link, .sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-content:hover {
    opacity: 1!important;
    transition: all 0.1s;
}
  
.summary-thumbnail-outer-container > a:after {
  content: "";
  background: inherit;
  background-color: rgba(0, 0, 0, .3); 
  backdrop-filter: blur(5px);
  transition:2s; 
  height: 80%; 
  width: 80%; 
  margin:auto!important;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all 0.1s;
}

.summary-thumbnail-outer-container:hover a:after {
  opacity: 1;
  transition: all 0.1s;
}

.sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-item:not(.positioned) {
  position: relative !important;
  transform: unset !important;
}

Hi friends! I've been struggling for almost a week with adding a proper hover to my summary block. I'd like it to look like on this page: https://www.sandranam.me/work 

Password: 7u5PY6B6C

But now the hover on my summary block is really buggy (see at the bottom of the page):  https://www.sandranam.me/work/squarespace-launch-it

Here's the code I've been using:

.sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-title, .sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-price .product-price, .sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-excerpt p, .sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-read-more-link, .sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-content {
  font-size: 24px!important;
  color: white!important;
  font-weight: regular!important;
  font-family:'orpheus pro'!important;
}

.sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-title, .sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-price .product-price, .sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-excerpt p, .sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-read-more-link, .sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-content {
  position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translate(-50%,-50%);
    opacity: 0!important;
    transition: all 1s!important;
}

.sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-title, .sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-price .product-price, .sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-excerpt p, .sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-read-more-link, .sqs-block-summary-v2 .summary-block-setting-text-align-center .summary-content:hover {
    opacity: 1!important;
    transition: all 0.1s;
}

.summary-thumbnail-outer-container > a:after {
  content: "";
  background: inherit;
  background-color: rgba(0, 0, 0, .3); 
  backdrop-filter: blur(5px);
  transition:2s; 
  height: 80%; 
  width: 80%; 
  margin:auto!important;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all 0.1s;
}

.summary-thumbnail-outer-container:hover a:after {
  opacity: 1;
  transition: all 0.1s;
}

.sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-item:not(.positioned) {
  position: relative !important;
  transform: unset !important;
}

I'll be extremely grateful if you can help me identify where the problem is. 

Hi @CassAggett! Thank you for responding! Sorry, I deleted the archive block by mistake. Here's the link: https://www.sandranam.me/work It's on the top above the video thumbnails. 

Hi friends! I'd like to filter posts in a blog section (in my case, work projects) by the company names. Is there a chance to make an archive block look like a horizontal list instead of columns? (see the reference attached). Many thanks!

Link & pass to the website: 

https://www.sandranam.me

7u5PY6B6C

@tuanphan Could you possibly take a moment to take a look at the code? We've been trying to figure out why it's not working. 

Didn't work, so weird! 

@AlexSan  Thank you so much for the code, Alex! I'd love the title to show up in the center. Attached is the screen recording of how it worked: the titles stuck on the thumbnail. Is there a chance we could fix it?

Thank you so much for trying to help! This one hasn't worked, but I've managed to create a blur/darken effect on hover with the code below: 

.summary-thumbnail-outer-container > a:after {
    content: "";
    background: inherit;
  background-color: rgba(0, 0, 0, .3); 
  backdrop-filter: blur(5px); transition:2s; 
  height: 80%; 
  width: 80%; 
  margin:auto!important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.1s;
}

.summary-thumbnail-outer-container:hover a:after {
  opacity: 1;
  transition: all 0.2s;
}

The only thing left is to make the titles reveal on hover. Trying different codes, but all failed 😞

Link & pass to the website: 

https://www.sandranam.me

7u5PY6B6C