Banner Image Won't Resize for Mobile View

On 6/5/2020 at 11:46 AM, d21peters said:

https://cricket-pineapple-ldg8.squarespace.com/config/pages

password: 1234567890

Hi. Where is image? I don't see it in homepage

https://www.clixwithsam.com/weddings

7 hours ago, Time24go said:

https://www.clixwithsam.com/weddings

Try adding to Home > Design > Custom CSS

@media screen and (max-width:640px) {
body#collection-5c05149d575d1f312eb16a23 {
section.Intro.Intro--has-image p, section.Intro.Intro--has-image h3:nth-last-child(3) {
    display: none;
}
}
}

Thank you, tuanphan for your reply and help. I've added in the code but it did not make a difference. I've also tried adding !important to the end of the code but there was no change.

Hello tuanphan, 

I'm dealing with a similar issue. I have banner images on most pages on my website (www.menefeeforhc.com), but on mobile the images are improperly cropped. I've tried inserting the code mentioned earlier in this thread, but none worked. 

Preview attachment image0.png

 

 

image0.png

2.4 MB

 

Hello Taunphan, Maybe you can help me with my issue.

I have the same issue where ALL my images do not resize to mobile mode. When I tried one of the codes in this thread, it helped but created a big gap in between the rest of the content on my home page, etc. Also on my about and projects section. Every spacing does not scale properly with the images.

I also have a problem with the gallery images on my projects. They are not responsive to the mobile mode either. 

I tried everything. Hopefully you can help 🤞

my website www.hkid.ca

@tuanphan

I'm having the same problem. The banner on this page — https://thehenleygroup.com/covid-news — looks fine in desktop, but on mobile it is too long, and doesn't keep to the same size on this page: https://www.thehenleygroup.com/solutions

Can you help? What CSS should I use to keep the banner short on https://thehenleygroup.com/covid-news like it is on https://www.thehenleygroup.com/solutions. Thank you!

I'm trying to maintain the banner width for the image at the top of this page so when it is viewed on mobile, you can see everyone in the photo.... https://www.aliyachisti.org/issues. Any help would be greatly appreciated!! I've attached screenshots of what it looks like on desktop vs mobile 🙂

I've got the exact same issue with the gallery slideshow reel i set up on my page. any help would be appreciated!

https://ebce.ca/casa

I tried the code you gave me but the banner images still aren't equally proportioned during my mobile view. Is there a different code I could try? 

url: https://www.intlschooloftheprophets.com

19 hours ago, jeady013 said:

I tried the code you gave me but the banner images still aren't equally proportioned during my mobile view. Is there a different code I could try? 

url: https://www.intlschooloftheprophets.com

I see you solved with this code?

@media screen and (max-width: 780px) {
    .homepage section:first-child {
        min-height:unset !important;
        height: 80vh
    }
}

I think 767 is better

Hi! I need help getting the mobile banner to appear wider as it's cutting off some of the lettering. 

Any help would be appreciated!

rolearybooks.com

Thanks!

hi @tuanphan  I can't seem to get my mobile banner to resize.  The banner on desktop fits fine but the letters get chopped off. 

https://www.corinnetouseyphotography.com/

thank you!

On 6/24/2020 at 5:53 AM, ROleary said:

Hi! I need help getting the mobile banner to appear wider as it's cutting off some of the lettering. 

Any help would be appreciated!

rolearybooks.com

Thanks!

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
body#collection-5ea9f04b8645947705e66c45 {
.Parallax-item:first-child img {
    width: 100% !important;
    left: 0 !important;
    height: 35vh !important;
}
.Parallax-item:first-child {
    height: 35vh !important;
}
.Parallax-item:first-child figure {
    bottom: 0 !important;
    transform: unset !important;
}
section#home {
    height: 35vh !important;
    min-height: auto !important;
}
}
}

9 hours ago, crtphoto728 said:

hi @tuanphan  I can't seem to get my mobile banner to resize.  The banner on desktop fits fine but the letters get chopped off. 

https://www.corinnetouseyphotography.com/

thank you!

 

 

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
.homepage div#page-thumb img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
.homepage div#banner-area-wrapper {
    height: 25vh;
}
}

5 hours ago, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
.homepage div#page-thumb img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
.homepage div#banner-area-wrapper {
    height: 25vh;
}
}

 

You are wonderful! Thank you so much, that worked!

18 hours ago, tuanphan said:

@media screen and (max-width:640px) { body#collection-5ea9f04b8645947705e66c45 { .Parallax-item:first-child img { width: 100% !important; left: 0 !important; height: 35vh !important; } .Parallax-item:first-child { height: 35vh !important; } .Parallax-item:first-child figure { bottom: 0 !important; transform: unset !important; } section#home { height: 35vh !important; min-height: auto !important; } } }

It worked perfectly! Thank you so much 🙂

On 6/22/2020 at 1:03 PM, EBCE said:

I've got the exact same issue with the gallery slideshow reel i set up on my page. any help would be appreciated!

 

 

https://ebce.ca/casa

@tuanphan hey sorry to bother you but do you think you could help me out with the code? site is ebce.ca

16 hours ago, EBCE said:

@tuanphan hey sorry to bother you but do you think you could help me out with the code? site is ebce.ca

The link doesn't exist

Hi I am also having trouble resizing my banner image for a mobile. 
I have used some of the CSS here and is does make the image fit, but then I am left with a big white space underneath it!

any help would be great. Thanks

my site https://www.rocstudio.co.uk

@tuanphan I am having the same issue with my banner not resizing for mobile, website is drfloydrx.com banner at the top (tea) is not resizing but most importantly, at the very bottom on the newsletter sign up banner is not resizing. ive tried this code, not working

@media screen and (max-width:640px) {
.homepage .section-background img {
    width: 100% !important;
    height: auto !important;
}
}

5 hours ago, caz100 said:

Hi I am also having trouble resizing my banner image for a mobile. 
I have used some of the CSS here and is does make the image fit, but then I am left with a big white space underneath it!

any help would be great. Thanks

my site https://www.rocstudio.co.uk

 

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
.homepage {
.Parallax-item:first-child img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
.Parallax-item:first-child {
    height: 35vh !important;
}
.Parallax-item:first-child figure {
    bottom: 0 !important;
    transform: unset !important;
    height: 35vh;
}
section#new-page {
    height: 35vh !important;
    min-height: auto !important;
} 
 section#new-page .spacer-block {
    display: none;
} 
}
}

hello @tuanphan - apologies but I'm having the same issue as all the people above. I would really appreciate it if you could help me out. I just want to force the banner video on the homepage to appear at 100% width on mobile (no cropping). 

Link and password below:

https://endive-swordfish-kjf7.squarespace.com

password: temppassword2020

Thank you in advance!!

On 6/29/2020 at 4:24 PM, samasplen said:

hello @tuanphan - apologies but I'm having the same issue as all the people above. I would really appreciate it if you could help me out. I just want to force the banner video on the homepage to appear at 100% width on mobile (no cropping). 

Link and password below:

https://endive-swordfish-kjf7.squarespace.com

password: temppassword2020

Thank you in advance!!

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.homepage #page section:first-child {
	min-height: 40vh !important;
}
}

Hello! 

I too am having this issue where the banner looks great on desktop but then is cut off on mobile.

I have tried all of the above Custom CSS. This website has a banner that is image/video on every page.

1. About

2. Team

3. Press & Partners

4. Screenings

5. Contact

https://collie-khaki-smzb.squarespace.com/