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

Banner Image Won't Resize for Mobile View


TheIDBootCamp
Go to solution Solved by tuanphan,

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 post
  • Answers 296
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

@media screen and (max-width:640px) { [data-section-id="5e5d461757cae6512002d1c0"] .section-background img { width: 100% !important; height: auto !important; } }  

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

Remove your code & use this code @media screen and (max-width: 767px) { .homepage #page section:first-child { min-height: unset; height: 30vh; } }   This is a

Posted Images

Recommended Posts

  • 0
On 7/25/2020 at 5:59 PM, tuanphan said:

Add to Home > Design > Custom CSS


@media screen and (max-width:640px) {
div#home-banner iframe {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
figure#thumbnail, #home-banner {
    height: 300px !important;
}
#home-banner .banner-thumbnail-wrapper {
    height: 300px !important;
}
}

 

Which banner?

 

On 7/25/2020 at 5:59 PM, tuanphan said:
On 7/20/2020 at 1:40 PM, TrojanMarketingGroup said:

@tuanphan just the top home banner video, where the TMG black image is currently.  A video should just play when you load the page now. I had told Squarespace using custom code to show mobile fallback image for mobile viewing, but when you load the page on mobile now (trojanmarketinggroup.org), you can see the video being cut off.

Add to Home > Design > Custom CSS


@media screen and (max-width:640px) {
div#home-banner iframe {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
figure#thumbnail, #home-banner {
    height: 300px !important;
}
#home-banner .banner-thumbnail-wrapper {
    height: 300px !important;
}
}

 

On 7/24/2020 at 3:30 PM, DanaFoletto said:

Hi everyone, 

I'm having the same trouble as most here. My banner image is experiencing significant cropping when in tablet and mobile view. How can I make it more responsive across all banner images in my site? 

Site: https://www.querydistribution.com/  

Which banner?

@tuanphan thanks for your help did not realize you responded. Is there actually a piece of code you can write to resize every single banner on the site for mobile at once, not just individual banners? My website is trojanmarketinggroup.org

Link to post
  • 0
8 hours ago, TrojanMarketingGroup said:

 

@tuanphan thanks for your help did not realize you responded. Is there actually a piece of code you can write to resize every single banner on the site for mobile at once, not just individual banners? My website is trojanmarketinggroup.org

Hi. No.

Each banner needs different code.

17 hours ago, tallytwo said:

@tuanphan can you help me too? Same issue. Banner images throughout site wont resize on mobile. I've tried some of the codes you provided throughout this thread, but they seem to be different for each site..?

piaggo.co

Thank you!!

I can't access your site. Can you check again?

 

17 hours ago, SamanthaFukui said:

Hi @tuanphan! Thank you for helping everyone. Could you please help me resize my banner so it fit's correctly on mobile.

website is www.samanthafukui.com

I'd like it to be spaced like this but it crops like this. Thanks in advance.

Add to Home > Design > Custom CSS

/* Resize mobile banner */
@media screen and (max-width:640px) {
div#content .page-banner-image-container img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
div#content .page-banner-wrapper {
    height: 100px;
}
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0

Hey Tuanphan,

We're having the exact same problem  - we've tried all the codes put on here and some slightly work but not 100%, we'll get a white block at the top, a black gap at the bottom or it's resized and it's in the site header. 

This is on our home page but we need it done to ALL our pages on the website. Can you help?

Website is: www.workout-wolf.co.uk

1033622390_Screenshot2020-08-08at10_56_15.thumb.png.a657d41174580a32c782a34a9624fd32.png697217228_Screenshot2020-08-08at10_56_07.png.af058edba80f6ad8110dbb7c032398e5.png
 

Link to post
  • 0
14 hours ago, phowlett said:

@tuanphan thanks for the help you've provided to everyone here.  I'm having a similar issue as the other users where my banner images are being cut off in mobile.  I've attached comparison desktop vs mobile images for my landing, boutique and about us pages.  My website is still private @ https://sunfish-alligator-jggp.squarespace.com/config/ pass $Square567.  Looking forward to your response.. 🙂

Add to Page Settings > Advanced > header

<style>
  @media screen and (max-width:767px) {
  #page section:first-child {
    min-height: 20vh;
    height: 50vh;
}
  }
</style>

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0
On 8/8/2020 at 4:57 PM, WORKOUTWOLF said:

Hey Tuanphan,

We're having the exact same problem  - we've tried all the codes put on here and some slightly work but not 100%, we'll get a white block at the top, a black gap at the bottom or it's resized and it's in the site header. 

This is on our home page but we need it done to ALL our pages on the website. Can you help?

Website is: www.workout-wolf.co.uk

 

Add to Home > Design > Custom CSS

/* Resize mobile home banner */
@media screen and (max-width:767px) {
.homepage #page section:first-child {
    min-height: 30vh !important;
    height: 50vh;
}
}
/* END Resize mobile home banner */

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0
On 8/7/2020 at 3:42 AM, jherron said:

Site URL: https://www.monstersmonthly.com/

Hi!

I'm trying to use a full bleed gallery on my homepage and it works well on desktop. On mobile though it does not resize though. What can I do to get it to resize? I'm using Brine Template 7.0

Thanks!

 

See fine here. Did you solve?

image.thumb.png.fc11d32e4540388fc8ed1ebcc9b4645e.png

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0
9 hours ago, tuanphan said:

Add to Page Settings > Advanced > header


<style>
  @media screen and (max-width:767px) {
  #page section:first-child {
    min-height: 20vh;
    height: 50vh;
}
  }
</style>

 

@tuanphan the code snippet helped with the optimization of the images from desktop to mobile.  However, they are still being cropped slightly.  In addition, I now have an issue with the text on the images not reducing proportionally in size with them.  Now the text on the pages look way too large.  Would you be able to assist me with fixing the issue I'm now having with the text?

Again website is still private @ https://sunfish-alligator-jggp.squarespace.com/config/ pass $Square567.  Thanks again for all the help!!  🙂 

desktop 8_11_20.jpg

mobile 8_11_20.jpg

Link to post
  • 0
23 hours ago, tuanphan said:

Add to Page Settings > Advanced > header


<style>
  @media screen and (max-width:767px) {
  #page section:first-child {
    min-height: 20vh;
    height: 50vh;
}
  }
</style>

 

Hi @tuanphan 

Thank you for your help. We've just tried this code on our website and as you can see it's still the same..

Can you help?

1467969519_Screenshot2020-08-12at10_29_09.png.d4bbb36d1ca96fe649b5ca36a5f52ab6.png1039681909_Screenshot2020-08-12at10_29_14.png.ecdf5816fad82a4b6d07df93e11989d7.png

Link to post
  • 0
On 8/12/2020 at 4:31 PM, WORKOUTWOLF said:

Hi @tuanphan 

Thank you for your help. We've just tried this code on our website and as you can see it's still the same..

Can you help?

 

Can you include site url in your comment? I don't see url to check.

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0
On 8/12/2020 at 2:45 AM, phowlett said:

@tuanphan the code snippet helped with the optimization of the images from desktop to mobile.  However, they are still being cropped slightly.  In addition, I now have an issue with the text on the images not reducing proportionally in size with them.  Now the text on the pages look way too large.  Would you be able to assist me with fixing the issue I'm now having with the text?

Again website is still private @ https://sunfish-alligator-jggp.squarespace.com/config/ pass $Square567.  Thanks again for all the help!!  🙂 

Add a section under current section and design layout for mobile. Then I will give the code to show this section on mobile only, also hide current banner on mobile

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0
On 8/13/2020 at 9:10 PM, WORKOUTWOLF said:

Yes, it's www.workout-wolf.co.uk

Thank you!

Use this code

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

 

On 8/13/2020 at 6:16 PM, Asiya said:

Vasavikumar.com/meetvasavi

the url doesn't exist

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0

Hi There,

I read through this thread and was trying to find a solution for this but with a video instead of an image. I have a youtube video embedded in the hero banner on our homepage. It works OK when on a computer but when in mobile view, it zooms in on the video. I used the maple template and did not use any spacer boxes on either side of the banner, only padding. Any help someone could provide would be extremely appreciated. I've gone nuts looking for a solution the last couple of weeks. 

https://www.geyerdevelopment.com/

Thank you for your time.

Erin

mobile view.PNG

desktop view.PNG

Edited by ErinLeah
Link to post
  • 0
12 hours ago, ErinLeah said:

Hi There,

I read through this thread and was trying to find a solution for this but with a video instead of an image. I have a youtube video embedded in the hero banner on our homepage. It works OK when on a computer but when in mobile view, it zooms in on the video. I used the maple template and did not use any spacer boxes on either side of the banner, only padding. Any help someone could provide would be extremely appreciated. I've gone nuts looking for a solution the last couple of weeks. 

https://www.geyerdevelopment.com/

Thank you for your time.

Erin

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
section#hero-banner figure img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
    top: 0 !important;
}
section#hero-banner {
    min-height: unset !important;
    height: 50vh;
}
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

Link to post
  • 0
On 6/3/2020 at 10:11 AM, tuanphan said:

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

 

Hi, @tuanphan  I need help with my mobile banner. its cropping on mobile. please help.

here's the url:

Patientorator.com

Thanks in advance! 

Link to post
  • 0
On 8/17/2020 at 8:26 AM, tuanphan said:

Use this code


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

 

the url doesn't exist

Hi @tuanphan thank you for doing that. That seems to do the trick. It's slightly higher than we want but if we play about with the height and that it'll make a white line. 

We also need it to happen on the other pages, can you do that at all?

The URL's:

www.workout-wolf.co.uk

www.workout-wolf.co.uk/athletes

www.workout-wolf.co.uk/about

317334831_Screenshot2020-08-20at09_38_49.png.8fa41b8a4207c7cbca8f3827e9745321.png670548286_Screenshot2020-08-20at09_38_42.thumb.png.a09e8db067207abc9b462594c1c8b951.png201353938_Screenshot2020-08-20at09_38_26.png.68c2cd424e8beeb5fe9e3ed5d06d9a08.png1421296586_Screenshot2020-08-20at09_38_17.thumb.png.6488661b25cb7310bc9eb630b848ff51.png1799221274_Screenshot2020-08-20at09_37_52.png.8b513dbcce9f8f1da48f69ee69a21f93.png

Link to post
  • 0
10 hours ago, MeToo said:

 

@tuanphan 

Hello, I'm having a similar problem. My Banners on my "Home" & "Price" Page won't resize for mobile viewing. 

https://megalodon-dove-5dga.squarespace.com/config/pages

PW: hairbraiding123

Thanks for all your help!

I see both fine here. Did you find the solution?

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

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