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;
}
}

On 7/7/2020 at 11:25 PM, tuanphan said:

@media screen and (max-width:767px) {
#page section:first-child {
    min-height: 30vh !important;
    height: 50vh !important;
    margin-top: 90px;
}
}

Hi, I was able to use some of the code in this thread to resize my banner for mobile, but after much trial and error with viewport height, I still can't quite get the full image to display properly. Still cropping more than I'd like. Also, now when viewing the home page on mobile there is quite a bit of extra padding on mobile in between the index banner and the next section down. Thanks in advance!
www.regijacob.com

11 hours ago, Protoregimoto said:

Hi, I was able to use some of the code in this thread to resize my banner for mobile, but after much trial and error with viewport height, I still can't quite get the full image to display properly. Still cropping more than I'd like. Also, now when viewing the home page on mobile there is quite a bit of extra padding on mobile in between the index banner and the next section down. Thanks in advance!
www.regijacob.com

I checked that there is an element with no content so it creates space on mobile.

You can try the following custom CSS to set the banner image and the space

@media only screen and (max-width: 767px) {
  #block-667cdb514368e700a678359d {
    display: none;
  }
  #collection-667357e2434d0c43bdaf3040  .Parallax-item .Index-page-image img{
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
  }
}

The final result I tested on my side

Hope it can help

Perfecto. Thank you!

Hi @tuanphan

my website is home.org.sg and the image banner on mobile and desktop doesn't fit to page. Can you help? I'm using 7.0 brine template

2 hours ago, onionscraps said:

Hi @tuanphan

my website is home.org.sg and the image banner on mobile and desktop doesn't fit to page. Can you help? I'm using 7.0 brine template

You mean this banner?