Kate_B

@tuanphan that worked perfectly. thank you so much for your help! 🙂

@tuanphan no worries! thank you so much for your help! Do you know if there's a way to increase the space between the arrows and titles  so the arrows don't overlap? (rather than manually adjusting each one individually?) All of the related posts summary blocks at the end of all blog posts are appearing like this (see screenshot)

@tuanphan this worked great - thank you so much!  Do you know how to adjust so only 1 item is showing instead of 2? 

@tuanphan does my comment above make sense? If you need more details please let me know. thank you!

@tuanphan sorry, that example was taken from the Learn page  https://gemini-alcott.squarespace.com/learn

There are multiple sections using summary blocks in the same way on the Learn and Meet the Stars pages. So I'm looking for code to update all summary blocks across both of these pages if that makes sense?

@tuanphan yes I still need help. I added some code to make the summary blocks stack on mobile, but have removed that now and kept the original code (as pasted in my original comment). I am still needing some help with moving the arrows below and center for the summary blocks on mobile. Possibly also just having 1 item rather than 2 as well. See screenshot example attached. Any help would be greatly appreciated as I am a struggling with this one! Thank you 🙂

@tuanphan do you think you'll be able to help with this?

@tuanphan yes that's correct. Either move the arrows center underneath (as per your image above) or move them in a bit so they are not cut off the edges of the screen. See attached screenshot. Does that make sense?

Hi, @tuanphan I am also looking for some help with the positioning of carousel summary block arrows on mobile - I am hoping to either move the arrows below and center, (or just bring them in slightly so they're not cut off) on mobile view only (keeping their current position for all other screen sizes).

Here is the code I have:

 

//SUMMARY BLOCK ARROW STYLING + POSITION//

//arrow position outside//
.summary-carousel-pager .previous {
  position: absolute !important;
  left: -60px !important;
  right: inherit !important;
  top: 39% !important;
    color:black !important;
}

  .summary-carousel-pager .next {
  position: absolute !important;
  left: inherit !important;
  right: -40px !important;
  top: 39% !important;
    color:black !important;
}

.sqs-block-summary-v2 .summary-block-wrapper.sqs-gallery-design-carousel .summary-carousel-pager {
  display:flex;
  flex-direction:row;
  justify-content:space-between;
}

//arrow size//
.sqs-gallery-controls .next:before {
font-size: 30px !important;
width: 32px !important;
height: 32px !important;
line-height: 32px !important;
}

 .sqs-gallery-controls .previous:before {
font-size: 30px !important;
width: 32px !important;
height: 32px !important;
line-height: 32px !important;
}

//arrow circles//

.summary-carousel-pager .previous {
  border-radius:50%;
  border:2px solid #241479;
  background:#FF91BF !important;
  padding:9px 10px !important;
  overflow:hidden;

}
  
  .summary-carousel-pager .next {
  border-radius:50%;
  border:2px solid #241479;
    background:#FF91BF !important;
  padding:9px 10px !important;
  overflow:hidden;
}

//summary block blog titles//
.summary-title {
margin-top:25%;
margin-bottom:15px;
font-family:'Brice Bold SemiCondensed' !important;

}

/* Increase space between carousel summary block image and title */
.sqs-gallery-design-carousel .summary-title{
  margin-top: 30px; /* Adjust the margin value as needed */
}

//SUMMARY BLOCK THUMBNAIL STYLING //

 .summary-thumbnail-container {
   border:1px solid #241479;
   border-radius:10px;
   overflow:hidden;
  }

Website url:  gemini-alcott.squarespace.com/meet-the-stars
Password: astroland

Screenshot attached for how it looks on mobile currently.

Any help would be amazing thank you! 🙂

@tuanphan yep, sure here's the page:

https://www.alyssamatesic.com/inquire

thanks!

Site URL: https://alyssa-matesic.squarespace.com/free-writing-resources

Does anyone know if it's possible to make blog post category links scroll down to the posts on the main blog page, rather than right to the top of the blog page?

As an example, I have added a blog post category menu via text links at the top of a client's blog page -

alyssa-matesic.squarespace.com/free-writing-resources
password: yourstorystronger

There are a few sections at the top of the main blog page before the blog post section appears lower down. If you click one of the categories, the page re-loads at the top and you have to scroll down to see the posts. Is there a way to add some kind of anchor link somehow so it scrolls down the page to the blog post section?

Any tips on how to achieve this?
 

Hey there @Jia, I am also running into an issue with the contact form submit button size on mobile - it's currently extending out of the form box - see screenshot attached. I've tried a few different codes but can't figure it out.

Is anyone able to help with any code to fix this please? 

alyssa-matesic.squarespace.com
password: yourstorystronger

Thank you!

Hey, thank you for this - I'm doing the same thing and was stuck with the same issue, then I found this post which helped me figure it out.

I'm also trying to figure out if there is a way to automate the mailing list sign up (using Mailchimp as email provider) if someone ticks that checkbox in a standard Squarespace contact form? Or would it have to be a manual add to the mailing list?

Does anyone know if there's a way to do this?

Thanks

That's worked perfectly, thank you so much for your help @bangank36 🙂

Hi there, thanks for all the help on this @tuanphan @bangank36!

I've added the following code to my site which has worked great:

 

* Tiktok icon - Footer */
.sqs-svg-icon--wrapper[href*=tiktok] .sqs-svg-icon--social {
  display: none;
}
.sqs-svg-icon--list:hover .sqs-svg-icon--wrapper[href*=tiktok] {
  background: #777;
}
.sqs-svg-icon--wrapper[href*=tiktok] {
  background: #ffffff;
}
.sqs-svg-icon--wrapper[href*=tiktok]:hover {
  background: #ffffff !important;;
}
.sqs-svg-icon--wrapper[href*=tiktok] > div {
  display: inline-block;
  background: url(https://www.designbust.com/download/1019/png/tiktok_logo_png_transparent256.png) no-repeat;
  background-size: cover;
  width: 50%;
   height: 50% ;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

/* Tiktok icon - Header */
a.icon.icon--fill[href*=tiktok] svg {
  opacity: 0;
}
a.icon.icon--fill[href*=tiktok] {
  position: relative;
}
a.icon.icon--fill[href*=tiktok]:after {
      content: '';
    position: absolute;
    background: url(https://uxwing.com/wp-content/themes/uxwing/download/10-brands-and-social-media/tiktok.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 90%;
    height: 90%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: invert()
}


Just wondering if there is a way to change the color of the Tiktok icon on hover? 

Here's my site url: 
https://alyssa-matesic.squarespace.com/
Password: yourstorystronger

You'll see in the header nav, all social icons change to this color on hover: #BD8047
so I wanted to see if I could apply that the the Tiktok icon as well.


Any tips would be so appreciated.
Thanks so much!