HOW TO RESIZE BACKGROUND IMAGE IN SECTIONS FOR MOBILE VIEW?

Site URL: http://bostongreenhealth.com

Hi guys,

We are redesigning our website and upgraded to 7.1, but we are having a hard time adjusting the images for mobile viewing. Our backgrouund images on each section are being cut off by the mobile viewing. Is there a way to code the size for mobile viewing? 

If you go to bostongreenhealth.com you will notice the image under the banner is cut off and not a great look. 

Best,

Kevin H. 

For future members, add to Home > Design > Custom CSS

@media screen and (max-width: 767px) {
    [data-section-id="5fcc3ef9cded405bb8cbecdc"] {
        min-height:30vh !important
    }
}

Find data section id with this tool. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

On 12/8/2020 at 9:36 AM, tuanphan said:

For future members, add to Home > Design > Custom CSS

@media screen and (max-width: 767px) {
    [data-section-id="5fcc3ef9cded405bb8cbecdc"] {
        min-height:30vh !important
    }
}

Find data section id with this tool. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

Hi @tuanphan!

I've been struggling with the same thing. Been looking through several forum posts and tried different codes, but still don't manage to fit the background picture to mobile phones. 

The webpage is www.rentmeloslo.no. The block ID is #block-e4e7e2ecc6bc7ac94c4a (first picture). 

Would really really appreciate any help on this. 

Thanks! 

It sorted out. Thanks! 

On 12/8/2020 at 7:36 PM, tuanphan said:

For future members, add to Home > Design > Custom CSS

@media screen and (max-width: 767px) {
    [data-section-id="5fcc3ef9cded405bb8cbecdc"] {
        min-height:30vh !important
    }
}

Find data section id with this tool. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en

Hi @tuanphan I'm wondering if there is a solution to resize all background images across a site that has a heavy load of background images and choosing each data section ID might be tedious.

10 hours ago, kellicox90 said:

Hi @tuanphan I'm wondering if there is a solution to resize all background images across a site that has a heavy load of background images and choosing each data section ID might be tedious.

 

You can change width of section to 99%, then use this code to target all

@media screen and (max-width: 767px) {
    [data-current-styles*='"customContentWidth": 99'] {
        min-height:30vh !important;
    }
}

On 7/28/2022 at 8:11 PM, tuanphan said:

You can change width of section to 99%, then use this code to target all

@media screen and (max-width: 767px) {
    [data-current-styles*='"customContentWidth": 99'] {
        min-height:30vh !important;
    }
}

 

Hi @tuanphan I pasted this code in and it didnt work... do I need to add a selector for the background images?

On 8/23/2022 at 9:39 AM, kellicox90 said:

Hi @tuanphan I pasted this code in and it didnt work... do I need to add a selector for the background images?

You need to change section width to 99%

On 8/25/2022 at 5:51 PM, tuanphan said:

You need to change section width to 99%

@tuanphanHow do I do this?

13 hours ago, kellicox90 said:

@tuanphanHow do I do this?

Hover Section > Click Edit Section on top right of section > Then you can edit section width

13 hours ago, tuanphan said:

Hover Section > Click Edit Section on top right of section > Then you can edit section width

@tuanphan This is the menu options I get?

On 8/31/2022 at 11:28 AM, kellicox90 said:

@tuanphan This is the menu options I get?

You are using new editor, there is no option in new editor. What is your site url? We will try checking & give some code to adjust this

On 9/3/2022 at 6:39 PM, tuanphan said:

You are using new editor, there is no option in new editor. What is your site url? We will try checking & give some code to adjust this

https://keatings.squarespace.com/68-honeysuckle-lane-woodend

There's a background image on most pages - I'd love for them all just to be optimised for mobile without editing each one or adding a code block for each one?

On 9/5/2022 at 3:47 AM, kellicox90 said:

https://keatings.squarespace.com/68-honeysuckle-lane-woodend

There's a background image on most pages - I'd love for them all just to be optimised for mobile without editing each one or adding a code block for each one?

Try adding this to Design > Custom CSS. If it works, I will find a way to apply for other images

@media screen and (max-width:767px) {
[data-section-id="62f463f43b8552286efb1fce"] {
    min-height: unset !important;
    height: 40vh;
}
}

On 9/6/2022 at 6:53 PM, tuanphan said:

Try adding this to Design > Custom CSS. If it works, I will find a way to apply for other images

@media screen and (max-width:767px) {
[data-section-id="62f463f43b8552286efb1fce"] {
    min-height: unset !important;
    height: 40vh;
}
}

 

Hi Tuanphan yes this worked for this section id - how will we get it to work site-wide? I need the business owner to be able to add pages and not have to ad css for each new page, somehow?

9 hours ago, kellicox90 said:

Hi Tuanphan yes this worked for this section id - how will we get it to work site-wide? I need the business owner to be able to add pages and not have to ad css for each new page, somehow?

Change section width to 99% then use this code

@media screen and (max-width:767px) {
[data-current-styles*='"customContentWidth": 99'] {
     min-height: unset !important;
    height: 40vh;
}
[data-current-styles*='"customContentWidth": 99'] .content-wrapper {
   width: 100% !important;
}
}