travisandrew

That works, thank you!

Hey team - I'm attempting to code a background image replacement for the first section when the following page is viewed on mobile: https://www.peterzizzo.com/dare-to-suck I've attempted the following code but I'm afraid I'm not targeting the right section id as I can't get the background image to adjust when viewed in mobile. Could someone please assist? Thanks! // mobile background replace section[data-section-id="662817ff05ecb2537fa28cbd"] { @media only screen and (max-width:640px){ .section-background img { opacity:0; } .section-background { background-image:url('https://static1.squarespace.com/static/601982cee0432c611d54064e/t/665280a48c8f5d0e8086219c/1716682918770/pete-zizzo-demons-graphic-mobile-animated-2304x4096.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; } } }

Yes! I have a custom SVG I'd like to use as a scroll icon.

Hey team! I'm attempting to add a custom scroll indicator icon. Currently on the Burke template there are two options: Line or Arrow. I'd like to input a custom SVG file as the scroll indicator which I'm hosting here: https://www.dropbox.com/s/u3k05nggr0qoj5l/girl boat.svg?dl=0. Appreciate any help! https://ellipsoid-bellflower-dm4x.squarespace.com/ PW: dreamrut

Hey guys - I'm on the Burke template and am having issues with font on mobile for text over index sections. Font style should be Brandon Grotesque on desktop and mobile. Any help would be appreciated! Mock: https://ellipsoid-bellflower-dm4x.squarespace.com/ PW: dreamrut @font-face { font-family: 'Persephone'; src: url('https://static1.squarespace.com/static/63b392b9ae92f31b032bee1d/t/63b39d3a6350f4104142f3bf/1672715580928/Persephone.otf'); } .has-site-title .Header-branding {font-family: 'Persephone' !important; text-transform: capitalize;} h1 {font-family: 'Brandon Grotesque'; font-size: 32px;} h2 {font-family: 'Brandon Grotesque';} h3 {font-family: 'Brandon Grotesque';} body {font-family: 'Brandon Grotesque';} @media only screen and (max-width: 840px) { .has-site-title .Mobile-bar-branding {font-family: 'Persephone' !important; text-transform: capitalize;} h1 {font-family: 'Brandon Grotesque' !important; font-size: 32px;} h2 {font-family: 'Brandon Grotesque' !important;} h3 {font-family: 'Brandon Grotesque' !important;} body {font-family: 'Brandon Grotesque' !important;} }

Hey guys! Trying to do something similar here, keying in on hover-over animation for only the images with the numbers 1, 2, and 3 listed on them. Here's the link and the code thus far. Appreciate any help! https://hexaflexagon-gopher-sffb.squarespace.com/ PW: dreamrut .sqs-block .fluid-image-container::after { content: 'click'; font-size: 20px; font-type: Brandon Grotesque, helvetica; font-style: bold; position: absolute; top: 0; left: 0; background: #fdebd3; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 0 52px; border-radius: 100%; box-sizing: border-box; text-align: center; opacity: 0; transition: opacity 1s; } .sqs-block:hover .fluid-image-container::after { opacity: 0.5; }

Hey this is great! I can't figure out how to adapt to my site at the moment. Are you able to take a look? I'd like to vertically align the code block to the photo. Link and pw below. Thanks! Site mock: https://pigeon-maracas-9ccm.squarespace.com/ Password: happy2021

Hey there! Having trouble applying this to my site. I'd like the homepage menu to have a 0.2 or so transparent black background, and the other pages to have the solid blue that they have currently. Can you take a look please? Thanks! Site mock: https://pigeon-maracas-9ccm.squarespace.com/ Password: happy2021

Hey Wolfsilon! Great question. The issue is the dynamic movement of the card covers the subjects face when viewed on mobile. I'd like to use a different image when viewed on mobile that excludes the subjects profile image – the image that is hosted in dropbox and linked in the above code. Does that make sense? And yes, you're correct, this is the first slide in a carousel block which makes things a bit trickier. I don't want to impact the other slides in the carousel, only the first. Other solutions are welcome. haha Thank you!

Hey Dan - this is really helpful! But I'm having trouble adapting to the first slideshow image on my site. Can you take a look and let me know what I'm missing? Right now the background image is disappearing but not replacing with the new image. See below. Site: https://pigeon-maracas-9ccm.squarespace.com/ PW: happy2021 section[data-section-id="615df008e325c12851ac481a"] { @media only screen and (max-width: 640px) { .slideshow-holder .slide-media-container img { display: none; } .slideshow-holder .slide-media-container img img::before { content: ""; position: absolute; width: 100%; height: 100vh; background-image: url("https://www.dropbox.com/s/jp2j24i874qveg2/cassie-holmes-hero-banner_mobile-no-headshot.jpg?raw=1"); background-size: cover; background-position: center, center; background-repeat: no-repeat; z-index: 1; } } }

I think that works! Thank you!

Hey @tuanphan were you able to view the site above? Appreciate any insight you may have!

Of course! Here you go: https://pigeon-maracas-9ccm.squarespace.com/ pw: happy2021 Let me know that you are able to view.

Hey there! I'm having the same issue as the OP but this code isn't fixing the image size. Could you take a look? You'll see the background image on the banner is responsive so when the window is reduced the card covers the subject's face. Thanks!