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!

amazing, thats worked perfectly. thank you! 🙂

Hi Creedon, thanks for getting back to me. Yep, sure URL is: erinsummer.squarespace.com/services password: rainbow Screenshot attached for reference too.

Hi, I was wondering if anyone knew the codes for removing text hyperlink lines on all image stack block titles on 7.1? I have used the following codes for all other hyperlink lines, but can't figure out how to remove the image stack block title hyperlinks? //Remove underlines from footer links// footer a { background-image: none !important; } Any help would be appreciated, thanks.

Amazing, thank you!

Thank you so sooo much! 😄 😄 I know this is completely unrelated - but do you know what the code name for a Squarespace code block is in 7.1? I'm trying to reduce the padding of code blocks across a 7.1 site, I've tried this code but it isn't working: //decrease code block padding// .sqs-block.code-block { padding: -5px -5px -5px -5px; } Thanks again for you help!

ah yes please!

oh fabulous, that's worked perfectly, thank you so much!

Site URL: https://bold-and-badass.squarespace.com/ Hi, I'm trying to centre all text & buttons on mobile for this website: https://bold-and-badass.squarespace.com/ Here is the code I've used: //centre all text on mobile// @media only screen and (max-width: 480px) { monospace, monospace, p, H1, H2, H3 { text-align: center !important; }} //centre buttons on mobile// @media(max-width: 1220px) { .sqs-block-button .sqs-block-button-container--left { text-align: center; } } However, when I use this code, all monospace text that's left aligned on desktop/laptop, doesn't appear centered on mobile. This issue occurs on all website pages. Is there a workaround/fix for this? Screenshot examples attached. I've also tried adding '*' for all text in the css above, but that caused issues with the placement of some images blocks and shifted some images over to the center of the page with the right side of some images cutting off.

oh amazing thank you so much!

Amazing thank you so much! The summary blocks I use the code for appear on multiple blog posts and pages so I think I'll just have to remove the summary block that's having issues (as in the screenshots I shared) and add that content in a different way. Thanks for your help!