MariaFY

@ashleyrosebranding did you figure it out?

Does anyone have a solution to this? I am encountering the same problem, the record is not working for the host field.

@tuanphan this worked for me, however svg are still not showing up on mobile. Is there a specific fix to that? My site is upgraded to a plan and I'm using the full URL in the CSS box. www.studio-beni.com

Hey guys, I could use some help with a scroll animation. my site: https://studiobeni.squarespace.com/ pw: maria I'm trying to slightly spin the ball graphic on my site, below is the code I used, I see that the animation is applying but not on scroll. /**Initial State**/ .sqs-block-image:has([src*='ball']) { transition:3s; } /**Animate State**/ .animate.sqs-block-image:has([src*='ball']) { animation: spin 3s; } // keyframes @keyframes spin { 0% { transform: rotate(-0deg); } 50% { transform: rotate(90deg); } 100% { transform: rotate(180deg); } } https://regrocery.co/ is the inspiration (scroll down to the section with the egg graphic to see the slight spin). I appreciate some pointers as I'm new to scroll animations.

Thanks a lot @tuanphan

Thank you @tuanphan, this works but the background overlay color changes from dark brown to a light color. What could cause this? After inserting the code it looks like this: this is how it looked before:

Hi guys, I launched this site for a client last year and the code I used on most pages to create a transparent background to be able to see the video looping in the back doesn't seem to work anymore. Here's the code I used on the homepage. Basically, the first section contains the video background is is sticky, the next section has a transparent background and scrolls over. Website: https://www.adamtabura.com //homepage section[data-section-id="62831f28f35bd842f0d4b03f"] { position: sticky !important; top: 0px; } section[data-section-id="6282ec0605378468086aaf30"] { background-color: transparent !important; top: -75vh; .section-background { background-color: transparent !important; } } Not sure if FE updates interfere with the code. I haven't done any changes to the site, it just suddenly stopped working. Thank you for any pointers.

@tuanphan Thanks! It was selected for buttons and miscelleaneous before but at a different font weight. Adjusting the font weight to 400 did the job. Thanks a lot!

Hi @Ziggy, I set h4 to be Ubuntu Mono font. h1, h2, h3 are Orpheus Pro and I have that set to 500 font-weight in the site styles panel. My custom CSS for h4 is as follows: h4 { font-family:'Ubuntu Mono' !important; text-transform: uppercase; letter-spacing: 0.15em; line-height: 0em; margin-bottom: -12px!important; font-weight: 400!important; } It looks like everything applies except for the font-weight...

site: https://hmna.squarespace.com pw: macadamia Hi there, I adjusted my h4 font-weight to 400 using CSS (that's the small tagline above my headings). It does only apply when I go to the Site Styles panel, otherwise the code doesn't work and it appears bolder (font weight 500 instead of 400) . Any ideas of a work around are appreciated 🤙🏼

@tuanphan Do you know how I could get the first section to stick to the top (heading + graphic) and the blog below scrolling through while the heading stays? I tried the code in this thread but can't seem to identify the correct ID or class selector. Thanks for you help if you have a minute. site: https://hmna.squarespace.com/news pw: macadamia

Thank you @tuanphan, that worked!

@creedon URL is https://hmna.squarespace.com/news pw: macadamia Just trying to get the heading and graphic to stick when scrolling up and the summary block scrolling through below 🤙🏼 Jeez, does anybody actually like FE so far 😵‍💫

Hey guys, I think the position: sticky; changed with fluid engine. I'm trying to stick the headline (news+ong image) to the top and then let the summary blog below scroll up below it. Any pointers on how to accomplish this? Site PW: macadamia TIA!

Hi there, Site PW: macadamia I'm looking for a way to change the color of the email field description in the footer of my site that says "Email Address" to white (above the line, can hardly see it). Some code must overwrite this and I can't seem to find a way to target the element. Thanks for any pointers.

@tuanphan Yes! I just adjusted the margin: .header-layout-branding-center .header-title { margin-bottom:-10%; }

Hi there, I'm looking for the best way to accomplish an on scroll image / text reveal like it's done on this page: https://share.getcloudapp.com/4guNNLj7 (found on https://mattmorriswines.com all the way on the bottom of the page) This isn't SS but I assume this is a gallery / gallery description triggered to fade in on scroll. Any pointers of what could be the most straight forward way to accomplish this feature? TIA!

Hi there, II am trying to accomplish this header design and could use some pointers.The challenge is to have the logo overlap with the border, however if I use the header border in SS, the logo defines the height of the header (hence pushes down the border) and I haven't figured out how to make it overlap with the border. I also tried inserting the logo as a fixed image in the footer but that way, I can't get it to overlap with the border, no matter how high I set the z-index. What would be the best approach? Should the green border OR the logo be a pseudo element? Or is there a way to make the logo overlap the border? TIA! Site: https://hmna.squarespace.com/ password: macadamia

That worked perfectly once I saved & reloaded the site. Thank you @tuanphan, always appreciate the help 🤙🏼

Thank you @tuanphan, this worked! I am trying to do the same for the cart page and tried the following code, not sure if systems-page is the correct class selector? body[class*="system-page"] .header-background-gradient { background: unset !important; } Your help is appreciated!

@bangank36 I'm trying something similar, maybe you can help me (I tried the above code and it didn't work). I am trying to remove the gradient header background on product pages only. Site: https://bamboo-shark-gdla.squarespace.com/products/p/style-01-6ywld pw: lanai I appreciate any pointers!

Hi there @tuanphan, I've got a similar questions for my mobile menu. All nav items are set to a padding of 5 vw, but I want the distance to the header button ("Book Online") to be the same on all mobile devices so it looks like all of the other menu items. When I check the developer tool, the menu / space between nav items and nav button are different. How can I fix this? Any help is appreciated. URL: http://www.mauicustomcharters.com

Hi @tuanphan, thanks for this. I removed and added the suggested code but the line is still there. Any other idea what could cause it? https://grape-halibut-xsjk.squarespace.com/ PW: circle

@tuanphan Do you have an idea what could be the issue?

Site URL: https://grape-halibut-xsjk.squarespace.com/ Hi folks, I'm looking for some help locating an issue. Site: https://grape-halibut-xsjk.squarespace.com/ PW: circle I am customizing some sections on the homepage of a client's site by reducing the width of a section image background. There are some weird borders showing up between the section which I am trying to locate and get rid of. I can't find anything though that's causing it, so I assume it's the code. The code I've used for the 2 sections is: section[data-section-id="612b517f123966413388c1b9"] .section-background { width: 40%; left: 60%; top:10% } section[data-section-id="612b5351656dee1f45969604"] .section-background { width: 40%; right: 60%; top:10% } Thank you for any leads.