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 4/7/2021 at 4:47 PM, hello2021 said:

Site URL: https://www.garryrichardstud.com/hillstar-1

Hi there, 

@tuanphan I see you have been very helpful to all other comments in this thread and was wondering if you could help me. The banner image on my website looks great on desktop view, but it gets majorly cropped when I view it on mobile (see below). Any tips on why this is happening, and how resolve it? As the majority of our users will be coming to the site on mobile, it is important to have this image displaying correctly?

Thanks 

processed.jpeg

Remove your code in Custom CSS, add this new code

/* Hillstar 1 page */
@media screen and (max-width:767px) {
[data-section-id="6065ab66929e10210ae97d44"] {
    min-height: 20vh !important;
    height: 25vh;
}
}

 

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

 

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

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

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
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 comment
  • 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?

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

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

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

 

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 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 comment
  • 0
Posted (edited)
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 comment
  • 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

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

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

HI @tuanphan 
I'm having some trouble adjusting the banner images on my website for mobile viewing. I have come a good way, but I'm not there.

WOODLIVING.DK

My goal is to have a better scaled banner image for mobile view. a) If the scrolling can be intact its good, b) if the result is a static image its ok.

I can scale the image and make it static, goal b), but I have not get it to center.

The code I'm using:

/* CSS FOR TABLET AND MOBILE */
@mobile:  ~"only screen and (max-width: 640px)";
@tablet:  ~"only screen and (min-width: 641px) and (max-width: 949px)";

/* CSS FOR TABLET */
@media @tablet {
/* Insert Code for Tablet Below This Line*/

/* Insert Code for Tablet Above This Line */
}

/* CSS FOR MOBILE */
@media @mobile {
/* Insert Code for Mobile Below This Line*/
div#block-yui_3_17_2_1_1600111915062_4197 {
   display: none;
}
  .sqs-block-image {
  width: 80%;
  margin: 0 auto;
}
  
 .homepage section:first-child {
    height: 30vh !important;
    margin: 0 auto;
   min-height: unset !important; 
 }
 
  .homepage .Parallax-item:first-child figure {
    transform: unset !important;
  	top: 0px !important;
    width: 100vw !important;
    margin: auto auto !important;
}

.homepage .Parallax-item:first-child img {
    width: 450px imortant;
    height: auto important;
    margin: Auto auto;
    left: unset !important;
}

  
/* Insert Code for Mobile Above This Line */
}

image.thumb.png.9145c343224750db74186a27f86745d7.png

 

Link to comment
  • 0
1 hour ago, Mr-WOODLVING said:

HI @tuanphan 
I'm having some trouble adjusting the banner images on my website for mobile viewing. I have come a good way, but I'm not there.

WOODLIVING.DK

My goal is to have a better scaled banner image for mobile view. a) If the scrolling can be intact its good, b) if the result is a static image its ok.

I can scale the image and make it static, goal b), but I have not get it to center.

The code I'm using:


/* CSS FOR TABLET AND MOBILE */
@mobile:  ~"only screen and (max-width: 640px)";
@tablet:  ~"only screen and (min-width: 641px) and (max-width: 949px)";

/* CSS FOR TABLET */
@media @tablet {
/* Insert Code for Tablet Below This Line*/

/* Insert Code for Tablet Above This Line */
}

/* CSS FOR MOBILE */
@media @mobile {
/* Insert Code for Mobile Below This Line*/
div#block-yui_3_17_2_1_1600111915062_4197 {
   display: none;
}
  .sqs-block-image {
  width: 80%;
  margin: 0 auto;
}
  
 .homepage section:first-child {
    height: 30vh !important;
    margin: 0 auto;
   min-height: unset !important; 
 }
 
  .homepage .Parallax-item:first-child figure {
    transform: unset !important;
  	top: 0px !important;
    width: 100vw !important;
    margin: auto auto !important;
}

.homepage .Parallax-item:first-child img {
    width: 450px imortant;
    height: auto important;
    margin: Auto auto;
    left: unset !important;
}

  
/* Insert Code for Mobile Above This Line */
}

image.thumb.png.9145c343224750db74186a27f86745d7.png

 

Hi. I see the image looks fine on mobile now. Did you solve? If no, can you explain clearly?

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
2 hours ago, tuanphan said:

Hi. I see the image looks fine on mobile now. Did you solve? If no, can you explain clearly?

I solved it.

 transform: unset !important; in the img section made is center.

 

/* CSS FOR TABLET AND MOBILE */
@mobile:  ~"only screen and (max-width: 640px)";
@tablet:  ~"only screen and (min-width: 641px) and (max-width: 949px)";

/* CSS FOR TABLET */
@media @tablet {
/* Insert Code for Tablet Below This Line*/

/* Insert Code for Tablet Above This Line */
}

/* CSS FOR MOBILE */
@media @mobile {
/* Insert Code for Mobile Below This Line*/
div#block-yui_3_17_2_1_1600111915062_4197 {
   display: none;
}
  .sqs-block-image {
  width: 80%;
  margin: 0 auto;
}  
 .homepage section:first-child {
    height: 300px !important;
    margin: 0 auto important;
   min-height: unset !important; 
 } 
  .homepage .Parallax-item:first-child figure {
    transform: unset !important;
  	top: 0px !important;
    width: 100vw !important;
    margin: auto auto !important;
}
.homepage .Parallax-item:first-child img {
    transform: unset !important;
   	width: auto imortant;
    height: auto important;
    margin: Auto auto important;
}  
/* Insert Code for Mobile Above This Line */
}

 

Link to comment
  • 0

popping on this thread because I'm having a similar problem. Looking to bump the focus of this image up a little bit to have more sky included. I've messed with the position coding for a while now and can't seem to get things to shift up a bit. Any ideas? Also looking to make the nav bar transparent for mobile if possible. Thanks!106097602_ScreenShot2021-06-29at11_52_33AM.thumb.png.a3ea1920a5dfd650562097d7a7436098.png

Link to comment
  • 0
On 6/29/2021 at 10:55 PM, SouthernSunEvents said:

popping on this thread because I'm having a similar problem. Looking to bump the focus of this image up a little bit to have more sky included. I've messed with the position coding for a while now and can't seem to get things to shift up a bit. Any ideas? Also looking to make the nav bar transparent for mobile if possible. Thanks!106097602_ScreenShot2021-06-29at11_52_33AM.thumb.png.a3ea1920a5dfd650562097d7a7436098.png

What is site 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

Create an account or sign in to comment

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

×
×
  • Create New...