how to reduce banner image sizes to fit mobile device?

Site URL: https://bonnieandgarcia.squarespace.com/

Hi 

I'm using the sonny template and I can't work out how to reduce the banner sizes on my home page to suit mobile view. The banner images are fine when viewed from a computer, but are significantly cropped in mobile view. How do I reduce the size of the banner images so that their entire width is visible in mobile view? 

I've read through other forum posts with the same issue but can't work out how to get the custom css codes to work for my website - thank you! 

My URL is https://bonnieandgarcia.squarespace.com/

password: pablo304

I don't see banner. Which banner?

Hi 

All the images on the home page are banner images, not image blocks. Originally I wanted the images to span the full width of the website so I used banners, but the images were a bit overwhelming at that size, which is why they're shown smaller. 

2 minutes ago, yanyanyan said:

Hi 

All the images on the home page are banner images, not image blocks. Originally I wanted the images to span the full width of the website so I used banners, but the images were a bit overwhelming at that size, which is why they're shown smaller. 

Add to Home > Design > Custom CSS

This code for first banner. If it works, I will send other banners.

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

Yes that worked perfectly!! 

I just changed the details of the code so that it would work for the other banners - thanks so much for your help! 

@tuanphan

I'm having similar issues with the following pages: https://www.prakritikumar.com/work/nyt-cooking

The image is getting cropped on mobile, I want the entire banner to show up on mobile instead. 

2 minutes ago, pkfiyaa said:

@tuanphan

I'm having similar issues with the following pages: https://www.prakritikumar.com/work/nyt-cooking

The image is getting cropped on mobile, I want the entire banner to show up on mobile instead. 

add to home. > design > Custom CSS

@media screen and (max-width:767px) {
body#item-5e6ec14fea160c0c82cbd6fe #page section:first-child {
    min-height: 30vh;
    height: 40vh;
}
}

31 minutes ago, tuanphan said:

add to home. > design > Custom CSS

@media screen and (max-width:767px) {
body#item-5e6ec14fea160c0c82cbd6fe #page section:first-child {
    min-height: 30vh;
    height: 40vh;
}
}

 

@tuanphan Thank you! Will this work for other pages as well, as long as I change the body #item? Such as this page: https://www.prakritikumar.com/work/marketing-virtual-summit

@tuanphan 

Thank you for your help! I'm trying to change the banner on this webpage as well so it fits mobile, but it's not working. I used your same code and changed the ID number.  https://www.prakritikumar.com/work/marketing-virtual-summit

14 hours ago, pkfiyaa said:

@tuanphan 

 

Thank you for your help! I'm trying to change the banner on this webpage as well so it fits mobile, but it's not working. I used your same code and changed the ID number.  https://www.prakritikumar.com/work/marketing-virtual-summit

this id

Quote

body#item-5e6ec14fea160c0c82cbd737

Hi Tuan,

I am having a similar issue, I've tried all the codes that you have posted on other threads and it doesn't seem to work.

How do I get the banner to resize for mobile? Thank you so much

https://www.makingcentsofsaving.com/

42 minutes ago, Emily88 said:

Hi Tuan,

I am having a similar issue, I've tried all the codes that you have posted on other threads and it doesn't seem to work.

How do I get the banner to resize for mobile? Thank you so much

https://www.makingcentsofsaving.com/

Add to Design > Custom CSS

/* resize mobile slide */
@media screen and (max-width:640px) {
section#new-page-24 figure img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
}
section#new-page-24 {
    min-height: unset !important;
    height: 130px;
}
}

Absolute legend! thank you so much, if you are ever in Australia I'd buy you a coffee hahah 🙂

On 4/9/2021 at 12:38 PM, Emily88 said:

Absolute legend! thank you so much, if you are ever in Australia I'd buy you a coffee hahah 🙂

Hi. I see some small problems. Do you need to fix these?

Site URL – https://www.makingcentsofsaving.com/

1. (All devices-Header) Logo looks small. Want to increase size?

2. (Tablet-Blog posts) Want to increase width?

3. (Mobile-Blog posts) Want to reduce blog title?

4. (Tablet-Home banner) Want to resize img?

Hi Tuan, you picked up quite a few problems I hadn't even noticed. Especially point 4 looks really problematic, any suggestions?

Thanks!

On 4/29/2021 at 12:38 PM, Emily88 said:

Hi Tuan, you picked up quite a few problems I hadn't even noticed. Especially point 4 looks really problematic, any suggestions?

Thanks!

Q4. Add to Design > Custom CSS

/* tablet */
@media screen and (max-width:900px) and (min-width:641px) {
/* resize banner */
section#welcome img {
    width: 100% !important;
    height: auto !important;
    left: 0 !important;
    top: 0 !important;
}
section#welcome {
    min-height: unset !important;
    height: 240px;
}
}

Other questions. It looks like you solved?

On 7/24/2020 at 7:46 AM, tuanphan said:

add to home. > design > Custom CSS

@media screen and (max-width:767px) {
body#item-5e6ec14fea160c0c82cbd6fe #page section:first-child {
    min-height: 30vh;
    height: 40vh;
}
}

Hey TUAN. i have tried everything it seems and im having the same problem. I've tried the code and my collection id and nothing seems to be working. Here is my webisite. I want all banners from all pages to be full display on mobile. Thank you

https://www.coldclockpro.com

https://coldclockpro.com/about

https://coldclockpro.com/projects

https://coldclockpro.com/new-blog

https://coldclockpro.com/social-feeds

https://coldclockpro.com/contact

On 7/24/2020 at 7:46 AM, tuanphan said:

 

On 8/17/2021 at 4:56 AM, Kyje said:

 

 

Hi,

You mean smaller banner under header on these pages?

On 7/15/2020 at 12:56 AM, tuanphan said:

Add to Home > Design > Custom CSS

This code for first banner. If it works, I will send other banners.

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

 

Hello! Thank you thank you, you have helped me solve a major issue with one of my largest clients!

However, I'm curious if anyone else is having the issue of a disappearing text box on the banner section? Any ideas of where it has disappeared to?  

@LyndaBoss

Three possibilities come to mind. Hidden by CSS, by HTML/CSS combo, missing from the source. We really need to see an example of the problem to be able to attempt to diagnose the issue.

Hi im having the exact same issue and was hoping you could help! 

https://www.nyahnetwork.co.uk/

39 minutes ago, ashleezzyy said:

Hi im having the exact same issue and was hoping you could help! 

https://www.nyahnetwork.co.uk/

Add to Design > Custom CSS

/* mobile - resize home top banner */
@media screen and (max-width:767px) {
[data-section-id="61218d37f14fb81fb5400291"] {
    min-height: unset !important;
    height: 20vh;
    margin-top: 10vh;
}
}

Hello! Also having the same problem of the mobile homepage banner not re-sizing - www.overlandingsophia.com

Tried to find the section ID and do it myself but nothing seems to be working. Any help would be hugely appreciated. Thank you in advance! 


 

On 4/25/2022 at 1:38 AM, Chescitt said:

Hello! Also having the same problem of the mobile homepage banner not re-sizing - www.overlandingsophia.com

Tried to find the section ID and do it myself but nothing seems to be working. Any help would be hugely appreciated. Thank you in advance! 


 

Add to Design > Custom CSS

@media screen and (max-width:640px) {
body.homepage .js-page-banner-image {
    width: 100% !important;
    height: auto !important;
    top: 0 !important;
    left: 0 !important;
}
body.homepage .page-banner-wrapper.page-banner-has-image {
    height: 200px !important;
}}