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

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 418
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

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

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

Posted Images

Recommended Posts

  • 0
On 4/8/2021 at 2:47 AM, BAA said:

Hi @tuanphan I'm having the same issue. Text on my banners is cutoff and won't resize on mobile. Tried using your code above and doesn't seem to be working. Using 7.1. Website is edgecatering.ca. 

Add to Design > Custom CSS > Then save & reload your site

/* resize mobile slideshow */
@media screen and (max-width:767px) {
.gallery-fullscreen-slideshow {
    height: 30vh !important;
}
}

 

Link to post
  • 0
15 hours ago, Nipper said:

Having the same issue, codes above don't seem to be aligning with me. @tuanphan do you have any suggestions? Thanks

 

https://raspberry-coyote-6gss.squarespace.com/config/design

 

Screenshot 2021-04-08 at 12.10.27.png

Screenshot 2021-04-08 at 12.10.16.png

I see mobile fine here. It looks like you solved the problem?

Link to post
  • 0
36 minutes ago, Emily88 said:

Any suggestions for how the banner could resize for mobile.

Thank you so much!

https://www.makingcentsofsaving.com/

Screen Shot 2021-04-09 at 2.13.00 pm.png

Screen Shot 2021-04-09 at 2.13.15 pm.png

Just answered in another post. You can check.

Link to post
  • 0
Posted (edited)

@tuanphan I am having the same problem with the Brine template (version 7.0). I have tried the different solutions but they aren't working for me. i have parallax scrolling enabled. 

The banner on my homepage cuts off on the mobile version. I am in the process of changing my site so the new version isn't live yet. I only want to change the banner on the homepage as other banners on other pages work fine. 

Can you help me with the custom CSS that I need to fix it?

Thanks!

Desktop view screenshot.png

Mobile screenshot .png

Edited by SashK
added a thank you
Link to post
  • 0
20 hours ago, SashK said:

@tuanphan I am having the same problem with the Brine template (version 7.0). I have tried the different solutions but they aren't working for me. i have parallax scrolling enabled. 

The banner on my homepage cuts off on the mobile version. I am in the process of changing my site so the new version isn't live yet. I only want to change the banner on the homepage as other banners on other pages work fine. 

Can you help me with the custom CSS that I need to fix it?

Thanks!

Can you share site url?

Link to post
  • 0
17 minutes ago, tuanphan said:

Can you share site url?

I am changing my site template (from Flatiron to Brine) so the new version isn't  live yet. Do I need to make it live so you can look at it? Or is there another way?

Thanks so much!

Link to post
  • 0
On 5/4/2021 at 2:57 PM, SashK said:

I am changing my site template (from Flatiron to Brine) so the new version isn't  live yet. Do I need to make it live so you can look at it? Or is there another way?

Thanks so much!

No. Just setup password & share url. You can see the guide in my signature.

Link to post
  • 0

@tuanphan I am having the same issue where the face of the person in the photo is cut out on mobile because of the cropping of the banner image. In Bedford Template. None of the codes have worked for me thus far. The site is https://www.hardenforcongress.com/

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

No. Just setup password & share url. You can see the guide in my signature.

Hi @tuanphan I have done it

Url: www.moganddogtravels.com

Password: test12345

Thanks so much for your help 🙂

Link to post
  • 0
22 hours ago, lmnicoll99 said:

@tuanphan I am having the same issue where the face of the person in the photo is cut out on mobile because of the cropping of the banner image. In Bedford Template. None of the codes have worked for me thus far. The site is https://www.hardenforcongress.com/

Hi. Which image? I don't see person in top home banner

22 hours ago, SashK said:

Hi @tuanphan I have done it

Url: www.moganddogtravels.com

Password: test12345

Thanks so much for your help 🙂

Add to Design > Custom CSS > Then save & reload your site

/* resize mobile home top banner */
@media screen and (max-width:767px) {
body.homepage .Parallax-item:first-child img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
}

 

Link to post
  • 0
On 5/7/2021 at 4:05 PM, tuanphan said:

 

Add to Design > Custom CSS > Then save & reload your site


/* resize mobile home top banner */
@media screen and (max-width:767px) {
body.homepage .Parallax-item:first-child img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
}

Hi @tuanphan Thanks so much! I just realised something - this works but the homepage banner on my site is the only one that resizes horizontally and I've just realised that this makes the banner image really small on mobile. Is there a way to make it resize vertically like it does on other pages and keep the focus on the two people in the image. I will attach screenshots of what I mean. 

Here is an example of another page of the site and how it resizes for mobile view. I'd like the image on the homepage to resize like this if possible otherwise it looks too small. 

Thanks so much for your help! 

 

 

Australia desktop banner view.png

Australia screenshot mobile banner view.png

Link to post
  • 0
20 hours ago, SashK said:

Use this code

@media screen and (max-width: 767px) {
    body.homepage .Parallax-item:first-child img {
        top: -100px !important;
    }
}

 

Link to post
  • 0
1 hour ago, tuanphan said:

Use this code




@media screen and (max-width: 767px) {
    body.homepage .Parallax-item:first-child img {
        top: -100px !important;
    }
}

 

Hi @tuanphan, it still seems to resize it horizontally instead of vertically like on the other banner pages (I've attached a screenshot). Is there a way to change it so it appears the same way as the Australia banner/my other page banners on mobile? This is the only page on my site that seems to resize the banner image to mobile in a strange way...is it because it is an index page? Screenshot 2021-05-09 at 18.12.12.png2108381021_Australiascreenshotmobilebannerview.thumb.png.252db4d13174fa463d96a6a080635a07.png

Thanks again for all your help! 

Edited by SashK
Link to post
  • 0
On 5/11/2021 at 12:22 PM, PixieDuster said:

Hi @tuanphan Can you help me with my mobile banner as well? http://www.danipatrey.com/ 

I just don't want the top cut off. I'm ok with the cropping on the sides.

Answered your email

Link to post
  • 0
On 5/9/2021 at 10:13 PM, SashK said:

Hi @tuanphan, it still seems to resize it horizontally instead of vertically like on the other banner pages (I've attached a screenshot). Is there a way to change it so it appears the same way as the Australia banner/my other page banners on mobile? This is the only page on my site that seems to resize the banner image to mobile in a strange way...is it because it is an index page? Screenshot 2021-05-09 at 18.12.12.png2108381021_Australiascreenshotmobilebannerview.thumb.png.252db4d13174fa463d96a6a080635a07.png

Thanks again for all your help! 

Hi. Remove code I sent & I will check it again

https://www.moganddogtravels.com/

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