Gigi-C

Hey @tuanphan I understand it is not possible with the Will myers code, but I found a website (linked above) that does allow it  to work on mobile. Wondering if you know how I can make it work on mobile?

Thanks!

@Shadmon Yes of course, 

www.coucoustudiony.com

pw: CCS24

Thanks! 

Hey @Shadmon thanks so much! However, it doesn't work on iOS devices (ipad & mobile) - sorry, I should've been more specific! 

Do you have any workaround for this? 

Many thanks! 

URL: coucoustudiony.com

pw: CCS24

Hello, I was wondering if anyone has a work around for the mobile version of this @WillMyers code for a parallax effect.

https://www.will-myers.com/adding-parallax-effect-to-a-background-image-in-squarespace-71

I've seen it's possible on mobile as this website have it on mobile(maybe it's a testimonial thing?) https://thesocialagency.dk/

Thank you in advance!

Thanks so much for this!

URL: https://coucoustudio.squarespace.com/

PW: CCS24

Hey all! I have a dilemma that I can't seem to solve. 

 I have a testimonial block with simple list - however I can't get the the title to customise the font - I want the font to be the same but I want to change the weight to regular/light and I want to change the size. 

Is there a code for this? I've looked and added some but somehow nothing works. Not sure if it might be my browser?

Also - if anyone knows of a neater, minimalist way of doing this without the faff,  please let me know. 

Thanks so much!

Hello, 

I have this code 

.list-item .list-image { border-radius: 12px;
 filter: grayscale(100%);} 
div:hover .list-item .list-image:hover { border-radius: 12px !important;
  filter: none;
  transform: scale(1.1);
  transition: .5s ease all;
} 

which gives this following effect (video)

But for some reason the border-radius disappears one hover. Ideally I would like to make sure that the transition includes the radius-border. 

Thank you in advance! 

Hey community!

https://www.youbynatseleen.com/services

My website is public! 

I have an issue with the videos being played on that page. They work well on mobile but when they're viewed on desktop the sizing of the video gets messy and the fallback image does too. I either want to:

Be able to solve this issue so both image and video are the same size (square)

or

Be able to hide videos on desktop ONLY and display just the image, while being able to show both video and fallback image on mobile.

 Thank you!!

Thank you so much!! This worked a treat!!

Hey @Kalie

I came across this forum and I'd really love to implement it onto my website, did you put all the codepen code into a code block? 

What was the format to get this to work? Thanks! 

So I added this line of code: 

padding-top: 10vmax !important;

 to the original code I had and it worked!

section[data-section-id="64ca4120ff73c555d9acab5d"] .content-wrapper
{
  width:100%!important;
  padding-top: 10vmax !important;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 60%, rgba(20, 20, 20, 1) 90%, rgba(28,28,27,1.000) 100%);
  z-index: 1;
  max-width: inherit;
}

It's taking the whole effect off completely, I also tried to adjust the rgb/rgba's as is coded for my other page and that hasn't worked either 

Thank you @Ziggy! However it hasn't worked and removed the gradient all together unfortunately 😞 see code in the custom css box on the left! 

sure! 

https://www.youbynatseleen.com/education

I always add it when it asks me to before I post a discussion.. I thought it shows up! 

Thanks @Ziggy 🙂

Hey all! 

I have an issue with the gradient overlay that I've used between the sections on my website for a client. I don't think it was doing this previously, and it's not an issue on mobile version, but what to know if there's something I can do to stop this from happening. As you can see in the screen recording, I've used the same code for another page (about us) and it's not doing the same thing.

Thanks!

Hey all!

I have this codepen that I think is really cool to show previous projects on my website https://codepen.io/thomassaulay/pen/XWJdORa

(currently I have a similar layout on my home page with a portfolio section but the images are static).

However when I use this codepen and refresh the website it doesn't create that parallax effect I'm looking for. 

Could someone help me achieve it? I have also put the css code in <style></style> and JS in <script> </script>

https://khaki-bumblebee-rgm8.squarespace.com/&nbsp;

website is live - no pass 

Thanks! 

Thanks so much! 

Hey @paul2009

https://fox-porcupine-3ldj.squarespace.com/

pass: ybn123

thanks!

Hey all!

I have a slightly annoying problem. On my mobile version of the site, the links in my accordion have this weird spacing that I can't seem to get rid of. The accordion isn't coded, it's just the normal squarespace block, and the text looks fine in desktop mode. The words 'here' and 'Instagram' are the linked words (and they just link to a page on the website and social media) 

Any solves?

Pass: ybn123

Thank you!

Amazing!! That worked! Thank you so much for your help 🙂

Incredible!! This worked perfectly! 

Thanks so much! 

Hey, thank you for this! Unfortunately it doesn't give me the desired effect. 

It makes the whole header become a little translucent, even from the top, when I want it to be solid and then on scroll have like a 50% opacity. 

Also another issue i'm having is that when I change the colour code to the darkest colour on my site 

it just turns into a solid header and the code seems to stop working (so the blur doesn't work etc)

I want to create a seamless gradient transition from one section of my page to the next, so far I have done this by editing the image and adding a gradient, then uploading it, but is there another way through css?

sure https://fox-porcupine-3ldj.squarespace.com/

pass: ybn123

Hey all! 

I have a fixed scroll header in place, with the solid style. 

I would like to basically change that solid opacity on scroll, so once we've scrolled on the page the header stays fixed but the opacity of it changes as to not disrupt the content in the background. 

Thanks in advance!