Making slideshow images shorter on desktop view - Canopy Theme

[PP_World]

Hello - Q1: My images take up too much vertical space on the desktop version (it bother me less on the mobile version), and I want to see if there's a way to make the image shorter without distorting the image. Essentially, I don't want my users to have to scroll down so far to get to the next section. Q2: I'd like to be able to change the newsletter heading on my passwords page to a different color without impacting the header text on my main website, which I'm still building. Is there code you can help me with that I can insert for the password page specifically? Many thanks!

[oscprofessional]

Hello PP_World,
Please share your site url.
So that i can check and provide you exact solution here.

[Qualitycheck]

Please Share a store url to better assist

[PP_World]

https://petit-porter-co.myshopify.com/

[PP_World]

petit-porter-co.myshopify.com

[oscprofessional]

@PP_World,

Can you please share password

[Qualitycheck]

@PP_World,

your website is password protected

please share a password

[bredowmax]

Hey @PP_World, seems like you removed the password, so I'll assume that Q2 is obsolete.

On Q1: I've had the same problem myself. Fo fix this, I'd recommend you uploading two different images: One for desktop with a very wide aspect ratio (something like 2:1) and one optimised for mobile (can be 1:1 or even 9:16). If you use only 1 image for both platforms, one of them will look weird.

For my store, I loaded the same image into Figma and then cropped it to two different versions which I then uploaded. You can also use this technique if you add more photos to the slideshow to ensure that they are always identical in size and the page doesn't jump when you click through the slide show.

For a demo, check out my store here: https://www.tylkozdroweprodukty.pl/