Banner Image Won't Resize for Mobile View

tuanphan · April 9, 2021

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

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

tuanphan · April 9, 2021

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

tuanphan · April 9, 2021

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

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

Emily88 · April 9, 2021

Any suggestions for how the banner could resize for mobile.

Thank you so much!

https://www.makingcentsofsaving.com/

tuanphan · April 9, 2021

36 minutes ago, Emily88 said:

Any suggestions for how the banner could resize for mobile.

Thank you so much!

https://www.makingcentsofsaving.com/

Just answered in another post. You can check.

SashK · May 3, 2021

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

Edited May 3, 2021 by SashK
added a thank you

tuanphan · May 4, 2021

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?

SashK · May 4, 2021

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!

tuanphan · May 6, 2021

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.

lmnicoll99 · May 6, 2021

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

SashK · May 6, 2021

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 🙂

tuanphan · May 7, 2021

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

SashK · May 8, 2021

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!

tuanphan · May 9, 2021

20 hours ago, SashK said:

Use this code

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

SashK · May 9, 2021

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?

Thanks again for all your help!

Edited May 9, 2021 by SashK

PixieDuster · May 11, 2021

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.

Edited May 11, 2021 by PixieDuster

tuanphan · May 12, 2021

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

tuanphan · May 12, 2021

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?

Thanks again for all your help!

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

https://www.moganddogtravels.com/

SashK · May 12, 2021

1 hour ago, tuanphan said:

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

https://www.moganddogtravels.com/

Okay, thanks I have done this 🙂

Mr-WOODLVING · June 21, 2021

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

tuanphan · June 21, 2021

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

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

Mr-WOODLVING · June 21, 2021

It looks ok on my mobile, but on a mobile with a different screen resolution it looks different.

I would like to have the image centered, so I can make is look better on different screen resolutions.

Mr-WOODLVING · June 21, 2021

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

SouthernSunEvents · June 29, 2021

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!

tuanphan · July 1, 2021

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!

What is site url?

Banner Image Won't Resize for Mobile View

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

tuanphan

tuanphan

tuanphan

Posted Images

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources