Banner Image Won't Resize for Mobile View

Hey, 

Had a look through here as having the same issue with desktop to mobile image re-sizing. tried a few things with no luck. Any advice. 

website - www.tech-design.co.uk 

Thanks

Nick 

7 hours ago, tech-design said:

Hey, 

Had a look through here as having the same issue with desktop to mobile image re-sizing. tried a few things with no luck. Any advice. 

website - www.tech-design.co.uk 

Thanks

 

Nick 

You mean Slideshow in top of homepage on mobile?

1 hour ago, tuanphan said:

You mean Slideshow in top of homepage on mobile?

Hi, that’s correct. 
 

thanks

nick 

On 7/7/2023 at 11:30 AM, tech-design said:

Hi, that’s correct. 
 

thanks

 

nick 

Add to Design > Custom CSS

/* Mobile resize slideshow */
@media screen and (max-width:991px) {
.gallery-fullscreen-slideshow {
    height: 35vh !important;
}
}

On 7/9/2023 at 8:55 AM, tuanphan said:

Add to Design > Custom CSS

/* Mobile resize slideshow */
@media screen and (max-width:991px) {
.gallery-fullscreen-slideshow {
    height: 35vh !important;
}
}

 

Brilliant, Tried it and it now works perfectly. Now to get back to adding more content and finishing up a few bit. 

Many thanks for your help on this. 

Hi @Tuanphan,

I have a very similar issue. I have a slideshow banner on my homepage.

When I check my website on a mobile phone, the banner does not get re-sized correctly. Instead, the images on the banner get cut-off!

I have tried the various code suggestions throughout this thread, but none of them seem to work. I'd really appreciate any help.

I'm wondering if you could kindly take a look please?

21 hours ago, nickelus said:

Hi @Tuanphan,

 

I have a very similar issue. I have a slideshow banner on my homepage.

When I check my website on a mobile phone, the banner does not get re-sized correctly. Instead, the images on the banner get cut-off!

I have tried the various code suggestions throughout this thread, but none of them seem to work. I'd really appreciate any help.

I'm wondering if you could kindly take a look please?

www.avoryx.com Password: password14

Sent code via message. You can check

Hi I am also having issues with getting my hero image to be responsive for mobile: can anyone help, I am new to squarespace.

https://www.cohesioncollective.com/

Hi @tuanphan,

Would you mind taking a look at the image banner on this page? I am hoping to optimize the size for a mobile format. I am using the 7.0 version of Squarespace. Right now it cuts off the entire banner when swapping to mobile view.

https://www.acrylux.com/roof-ad-landing-page-lucas-work

Thanks!

On 3/15/2024 at 8:50 PM, Naven said:

Hi I am also having issues with getting my hero image to be responsive for mobile: can anyone help, I am new to squarespace.

https://www.cohesioncollective.com/

You can use this code to Website > Website Tools > Custom CSS

@media screen and (max-width:767px) {
section#home-banner figure {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
section#home-banner {
    min-height: unset !important;
    height: 30vh !important;
}
}

12 hours ago, LucasAcrylux said:

Hi @tuanphan,

 

Would you mind taking a look at the image banner on this page? I am hoping to optimize the size for a mobile format. I am using the 7.0 version of Squarespace. Right now it cuts off the entire banner when swapping to mobile view.

https://www.acrylux.com/roof-ad-landing-page-lucas-work

 

Thanks!

Don't remove any code in your current code. Use this code to Custom CSS then save & reload the site

@media screen and (max-width:767px) {
section#new-page-35 {
    height: 30vh !important;
	min-height: unset !important;
}
}