Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
TheIDBootCamp

Banner Image Won't Resize for Mobile View

Recommended Posts

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>

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post
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!

Share this post


Link to post
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. 

Share this post


Link to post
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?


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post
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;
}
}
}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post
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. 

Share this post


Link to post
Posted (edited)

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

 

Edited by Shaane
Problem Solved

Share this post


Link to post

 

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!!!! 

Share this post


Link to post
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. 

1293049957_ScreenShot2020-06-03at11_37_45PM.thumb.png.6fa371464a974c041e61059ffc3e5b05.png

 

1711657653_ScreenShot2020-06-03at11_37_59PM.thumb.png.dda66f4eb81e4701707d49ec47e9a94b.png

 

Thank you

 

 

 

Share this post


Link to post
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?

Share this post


Link to post
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?


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post
Posted (edited)

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!

Edited by DarrenCWGH

Share this post


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

 

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

 

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?


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post
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

Share this post


Link to post
Posted (edited)
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;
    }
}

 

Edited by tuanphan

You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...