Banner Image Won't Resize for Mobile View

On 9/5/2020 at 1:16 PM, inairdaaksiram said:

Hi, my site is also having the same issue. I want my top banners on each page to resized on mobile instead of cropped. Tried some css from here but didn't work :(  Would really appreciate the help! 

https://disc-mustard-35hy.squarespace.com/
Password: ahawebsite123

Thank you so much!

Add to Home > Design > Custom CSS

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

Hi there,

Any help possible for my site?

Images looks nice on desktop but mobile is cropped to almost unusable, which force me to only use the centre portion.

Otomo - Car Rental in Indonesia

Thanks in advance!

On 9/7/2020 at 5:01 PM, Crenative said:

Hi there,

Any help possible for my site?

Images looks nice on desktop but mobile is cropped to almost unusable, which force me to only use the centre portion.

Otomo - Car Rental in Indonesia

Thanks in advance!

Hi. You mean homepage top banner?

On 8/29/2020 at 7:26 AM, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
.homepage .Parallax-item:first-child img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
section#welcome-1 {
    min-height: unset !important;
    height: 210px !Important;
}
.homepage .Parallax-item:first-child {
    height: 200px !important;
}
}

 

Thank you so much for your help, however, I'm still facing the same issue after placing the code...

I am having the same issue as some, I used a code to change the banner size on mobile, but now there is a big blank space below. My site is www.conchjeweler.com  could you please help me as well!? THANK YOU IN ADVANCE!

13 hours ago, tuanphan said:

Hi. You mean homepage top banner?

Yes, the homepage top banner.

Thanks in advance!

17 hours ago, DuvalStreetMedia said:

I am having the same issue as some, I used a code to change the banner size on mobile, but now there is a big blank space below. My site is www.conchjeweler.com  could you please help me as well!? THANK YOU IN ADVANCE!

Remove your code & use this code

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

11 hours ago, Crenative said:

Yes, the homepage top banner.

 

Thanks in advance!

This is a bit complex. I will check again tomorrow

On 9/7/2020 at 3:02 PM, tuanphan said:

Add to Home > Design > Custom CSS

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

 

Thank you so much, it works on the homepage!

I need another help on other pages. I have tried changing some of the code but didn't work. Really appreciate if you can help with these too.

1. https://disc-mustard-35hy.squarespace.com/karir
2. https://disc-mustard-35hy.squarespace.com/cerita-sukses
Password: ahawebsite123

The top banner on mobile is cropped too much. I want it to show more just like what you did for the homepage. 

Thank you so much!

5 hours ago, inairdaaksiram said:

Thank you so much, it works on the homepage!

I need another help on other pages. I have tried changing some of the code but didn't work. Really appreciate if you can help with these too.

1. https://disc-mustard-35hy.squarespace.com/karir
2. https://disc-mustard-35hy.squarespace.com/cerita-sukses
Password: ahawebsite123

The top banner on mobile is cropped too much. I want it to show more just like what you did for the homepage. 

Thank you so much!

Add to Karir, Cerita Pages Settings > Advanced > Header

<style>
  @media screen and (max-width:767px) {
#page section:first-child {
    min-height: unset;
    height: 30vh;
    margin-top: 10vh;
}
}
</style>

Hi everyone i'm new here with no experience of css. I'm having a similar issue with most people, I'm using the Kester template and I'm on trial for 14 days. My portfolio is currently in private mode

1) my header is overlapping my banner image. I used a headline block but the results are the same if i use an image block. I want my banner to sit flush under the header but nothing is helping me do that.



2) I'd like my banner to display the full image on mobile but it's resizing all weird.



Appreciate any help I can get thanks!

23 hours ago, tuanphan said:

<style> @media screen and (max-width:767px) { #page section:first-child { min-height: unset; height: 30vh; margin-top: 10vh; } } </style>

Thank you so much!!! Really appreciate your help @tuanphan

On 9/10/2020 at 11:30 PM, rosesntattoos said:

Hi everyone i'm new here with no experience of css. I'm having a similar issue with most people, I'm using the Kester template and I'm on trial for 14 days. My portfolio is currently in private mode

1) my header is overlapping my banner image. I used a headline block but the results are the same if i use an image block. I want my banner to sit flush under the header but nothing is helping me do that.
2) I'd like my banner to display the full image on mobile but it's resizing all weird.

Appreciate any help I can get thanks!

Can you share link to page in screenshot? We can check easier.

If your site is trial, you can setup password & share url

Hi, @tuanphan! My site is having the same issue with the homepage banner. If you can help me I'd greatly appreciate it. Website is staysnaz.com. Thanks in advance!

On 9/12/2020 at 3:19 PM, tuanphan said:

Can you share link to page in screenshot? We can check easier.

If your site is trial, you can setup password & share url

Ah thanks! @tuanphan didn't know that 

https://dog-lynx-5asp.squarespace.com/

password: thanks

7 minutes ago, rosesntattoos said:

Ah thanks! @tuanphan didn't know that 

https://dog-lynx-5asp.squarespace.com/

password: thanks

Add to Home > Design > Custom CSS

/* resize mobile home banner */
@media screen and (max-width:767px) {
.homepage #page section:first-child {
    min-height: unset;
    height: 20vh;
    margin-top: 10vh;
}
}

14 hours ago, Donzu said:

Hi, @tuanphan! My site is having the same issue with the homepage banner. If you can help me I'd greatly appreciate it. Website is staysnaz.com. Thanks in advance!

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
.homepage .Parallax-item:first-child img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
section#feature {
    height: 275px !important;
}
}

4 minutes ago, tuanphan said:

Add to Home > Design > Custom CSS

/* resize mobile home banner */
@media screen and (max-width:767px) {
.homepage #page section:first-child {
    min-height: unset;
    height: 20vh;
    margin-top: 10vh;
}
}

 

Thanks so much!! would you know how to push the banner down or add spacing so that the header is not overlapping or cropping my banner?

2 minutes ago, rosesntattoos said:

Thanks so much!! would you know how to push the banner down or add spacing so that the header is not overlapping or cropping my banner?

change number 10 & 20

5 minutes ago, tuanphan said:

change number 10

Thanks! it works on mobile! But it doesn't reflect in the full web browser, how could I edit the css to do reference the full browser? or only affect the browser version?

12 hours ago, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
.homepage .Parallax-item:first-child img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
section#feature {
    height: 275px !important;
}
}

 

This worked, thanks for the help!

On 9/13/2020 at 3:31 PM, rosesntattoos said:

Thanks! it works on mobile! But it doesn't reflect in the full web browser, how could I edit the css to do reference the full browser? or only affect the browser version?

Do you still need help on this?

@tuanphan I am having a similar issue with my banner getting cut off on mobile as well.   I'm not necessarily expecting to get the same ratios as on the desktop, but I'd at least like more of it showing.  I've tried inserting codes and putting the block id for the banner in there, but I must be doing something wrong because it has no effect on it.

https//:www.madeleinedeighanphotography.com/

 

On 9/20/2020 at 2:41 AM, maddei said:

@tuanphan I am having a similar issue with my banner getting cut off on mobile as well.   I'm not necessarily expecting to get the same ratios as on the desktop, but I'd at least like more of it showing.  I've tried inserting codes and putting the block id for the banner in there, but I must be doing something wrong because it has no effect on it.

https//:www.madeleinedeighanphotography.com/

I think you need new image on mobile only.

Add to Home > design > custom CSS

@media screen and (max-width:640px) {
section#new-page-2 figure img {
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
}
}

On 9/19/2020 at 9:00 PM, tuanphan said:

Do you still need help on this?

yes, if possible, thanks!

I'm having the same banner image cropping issue on mobile devices. I've gone through as many forums and blog posts that I could find in search of a fix and haven't been able to get any CSS to work (I am very much an amateur, so definitely still learning!). Here is the site on desktop, Squarespace mobile preview  (also how it looks on some mobile devices I've checked - very cropped), and on my own phone (not cropped at all). I'd like her full body to be in view on all mobile devices. Can anyone help? Thank you!