Jump to content

HOW TO RESIZE BACKGROUND IMAGE IN SECTIONS FOR MOBILE VIEW?

Recommended Posts

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. 

Link to comment
  • Replies 15
  • Views 2k
  • Created
  • Last Reply

Top Posters In This Topic

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 year later...
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! 

Link to comment
  • 5 months later...
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.

 

Link to comment
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;
    }
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 weeks later...
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?

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

@tuanphan This is the menu options I get?

Screen Shot 2022-08-31 at 2.27.46 pm.png

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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?

Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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?

Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.