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

Banner Image Won't Resize for Mobile View


TheIDBootCamp

Question

Hello, 

Our banner artwork appears fine on our site when viewing on a computer screen, but the mobile view does not resize the banner and cuts off the bulk the image versus resizing for the mobil platform. Any tips on why this is happening, and how resolve it? We've found that the majority of site visitors use mobile, and don't want to reduce the impact of the image.

Thanks in advance.

IMG_5025.PNG

Screen Shot 2019-12-13 at 11.16.48 AM.png

Link to comment

Recommended Posts

  • 0
On 5/29/2020 at 10:39 PM, tuanphan said:

Which image? Can you take a screenshot?

 

7 hours ago, tuanphan said:

Add to Home > design > Custom CSS


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

 

Hi there,

 

Thank you so much for this! It only seems to work on my /home page, and not my initial cover page located at www.moderncourage.com

 

Any thoughts?

 

-Jessica

Link to comment
  • 0
On 5/31/2020 at 10:19 PM, JessicaRita said:

 

 

With cover page, use

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 6/1/2020 at 10:46 PM, Lsoper said:

Hi All,

Having the same issue with the mobile view.

 I have also placed the tool bar inside the mirror of the background image which I would like to keep static but it seems to move when on a different size screen - how do I stop this from happening ? pls help!

https://www.lellasoper.com

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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!

Link to comment
  • 0
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. 

Link to comment
  • 0
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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;
}
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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. 

Link to comment
  • 0

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
Link to comment
  • 0

 

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

Link to comment
  • 0
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

 

 

 

Link to comment
  • 0
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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
Link to comment
  • 0
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...