Banner Image Won't Resize for Mobile View

1 hour ago, junaaaa said:

@tuanphan

I am having the same issue with the banner not resizing on my mobile screen. For me its each of the different pages all across the site, not just one particular page. 

My website is: https://www.junadesign.co/

 

Add to Portfolio Page Settings > Advanced > Header

<style>
@media screen and (max-width:767px) {
section:first-child {
    min-height: 30vh !important;
}
}
</style>

Hi there. I am new here. Interesting thread. Thanks for the information.

10 hours ago, tuanphan said:

@media screen and (max-width:767px) { body#collection-5eada79435a4926fb71d5741 section.Intro.Intro--has-image figure img { width: 100% !important; left: 0 !important; height: auto !important; } body#collection-5eada79435a4926fb71d5741 section.Intro.Intro--has-image { min-height: 30vh !important; } }

Thank you so much, this worked!

15 hours ago, tuanphan said:

Add to Portfolio Page Settings > Advanced > Header

<style>
@media screen and (max-width:767px) {
section:first-child {
    min-height: 30vh !important;
}
}
</style>

 

Hello @tuanphan 

Thank you for this code! Is there something I can input to the Design -> Custom CSS section? I only have the personal account on Squarespace so I cannot customize the Header section. I would need to upgrade to a business account. Please advise. Thank you. 

1 hour ago, junaaaa said:

Hello @tuanphan 

Thank you for this code! Is there something I can input to the Design -> Custom CSS section? I only have the personal account on Squarespace so I cannot customize the Header section. I would need to upgrade to a business account. Please advise. Thank you. 

If you use Personal Plan, it needs different code. Can you share link to portfolio page?

2 minutes ago, tuanphan said:

If you use Personal Plan, it needs different code. Can you share link to portfolio page?

https://www.junadesign.co/

This is my website. 

5 minutes ago, junaaaa said:

https://www.junadesign.co/

This is my website. 

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.collection-5e7bf7239781b7677cef6ee4 section:first-child {
    min-height: 30vh !important;
}
}
}

18 minutes ago, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.collection-5e7bf7239781b7677cef6ee4 section:first-child {
    min-height: 30vh !important;
}
}
}

 

This code isn't working, my mobile view still doesn't show my full banner. 

The banner image on my website would not resize for mobile. I followed a thread you responded to last year and used the following code in my Custom CSS section:

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

This worked to resize the banner but it created a large white space between the banner and the content under it. So I found another person with this issue and you gave this the following code:

@media screen and (max-width:767px) {
[data-section-id="5e5c9aff118337590dcf052e"] {
    min-height: 40vh !important;
}
}

This brought my mobile version back to how it looked originally: the white space disappeared but now the banner does not fit. Can you please take a look?

Thank you!

-----

UPDATED

I followed your thread and this worked for me. Thank you!

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

2 hours ago, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.collection-5e7bf7239781b7677cef6ee4 section:first-child {
    min-height: 30vh !important;
}
}
}

 

@tuanphan Actually, this code worked!! Thank you so much for your help!!!! 

5 hours ago, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.collection-5e7bf7239781b7677cef6ee4 section:first-child {
    min-height: 30vh !important;
}
}
}

 

I tried to this code and it still did not work 

I have the Squarespace 7.1

my site has not launched yet so I do not have a url. 

Thank you

39 minutes ago, d21peters said:

I tried to this code and it still did not work 

I have the Squarespace 7.1

my site has not launched yet so I do not have a url. 

 

Each site needs different code. You can setup password & share url

14 hours ago, tuanphan said:

Each site needs different code. You can setup password & share url

Where would I share the password and url to?

Trying to do the same...would like the banner/page images to reduce and resize for mobile but I've tried and have been unsuccessful. And could this be side wide? Thank you.

www.clixwithsam.com

.

5 hours ago, d21peters said:

Where would I share the password and url to?

You can share here

15 minutes ago, Time24go said:

Trying to do the same...would like the banner/page images to reduce and resize for mobile but I've tried and have been unsuccessful. And could this be side wide? Thank you.

www.clixwithsam.com

.

Can you share link to exact page in screenshot?

Surely:

https://www.clixwithsam.com/weddings

2 hours ago, tuanphan said:

You can share here

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

password: 1234567890

Same issue with our site can i please get code to fix.  Would like to apply to all images background images.

alapaforoha.com

Question: 
- Is it true that every site needs their own individualized code to fix?
- Is Squarespace going to address this issue or do we just have to live with it in 7.1?

Thank you!

On 6/5/2020 at 9:19 AM, Time24go said:

Surely:

https://www.clixwithsam.com/weddings

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

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

password: 1234567890

On 6/6/2020 at 2:29 AM, DarrenCWGH said:

Same issue with our site can i please get code to fix.  Would like to apply to all images background images.

alapaforoha.com

Question: 
- Is it true that every site needs their own individualized code to fix?
- Is Squarespace going to address this issue or do we just have to live with it in 7.1?

Thank you!

Sorry for the delay. Just had a few days off in hometown. 

Have you solved it yet?

Hi I'm having similar troubles.

I've set up a banner slideshow and the images wont resize to fit properly when viewed on mobile. Do you know how I could change that?

Thank you!!

my site-https://rhombus-fiddle-yn69.squarespace.com/

On 6/10/2020 at 10:31 AM, tuanphan said:

 

 

Sorry for the delay. Just had a few days off in hometown. 

Have you solved it yet?

Not yet

I need help with my banner images as well site : https://www.intlschooloftheprophets.com

Haven’t solved mine as of yet.

On 6/12/2020 at 9:28 PM, jeady013 said:

I need help with my banner images as well site : https://www.intlschooloftheprophets.com

Add to Home > Design > Custom CSS

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

On 6/12/2020 at 10:18 PM, Time24go said:

Haven’t solved mine as of yet.

 

Can you share link to your site?

On 6/11/2020 at 5:05 AM, dmurphy00000 said:

Hi I'm having similar troubles.

 

I've set up a banner slideshow and the images wont resize to fit properly when viewed on mobile. Do you know how I could change that?

Thank you!!

 

my site-https://rhombus-fiddle-yn69.squarespace.com/

 

Add to Home > Design > Custom CSS

@media screen and (max-width: 767px) {
[data-section-id="5eda548d491eb942da7365f7"] .gallery-fullscreen-slideshow[data-width="full-bleed"] {
        height:40vh !important;
    }
}