background image resize for mobile

Site URL: http://www.medabright.com

hi there,

im trying to find a way for my background picture on the home page of my website to not get cropped on the mobile version. its perfect on a desktop but im struggling to fix the size on modile. is there a code i can use?

my website is http://www.medabright.com

the image below is the desktop view

and the one below is what it looks like on mobile

please help!

Add to Home > Design > Custom CSS

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

On 4/21/2020 at 9:01 AM, tuanphan said:

Add to Home > Design > Custom CSS

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

 

Hi Tuan, 

I've seen several of your posts on here about full-bleed mobile responsiveness and none of the codes you provide are working for me. Can you help me out? 

https://gazelle-mushroom-n6z7.squarespace.com/

pw: mannequins

What We Do>Mannequins>Click on one of the collection images to take to page. 

Hi @tuanphan. I am working on https://www.flygeorge.com/about-us (PW: FlyGeorge20!) and am attempting to resize the background (the one with 3 hand-drawn illustrations) for mobile viewing. Can you please help?

Here is the desktop view:

And the mobile view:

5 hours ago, JNols said:

Hi Tuan, 

I've seen several of your posts on here about full-bleed mobile responsiveness and none of the codes you provide are working for me. Can you help me out? 

https://gazelle-mushroom-n6z7.squarespace.com/

pw: mannequins

What We Do>Mannequins>Click on one of the collection images to take to page.

 

Add to Page Settings > Advanced > Header

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

Hi Tuan,

I tried your coding to fit my issue:

Quote

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

However, I would still like my image to fit the container it is in. It seems it is extending beyond the screen which does not look on brand. Any advice?

@tuanphan  would you be able to take a look at my website.  Both the desktop AND mobile background image are now off.  This happened after I added the 2 buttons above that background image.

Any css to help with this?  Thanks!

www.joeystephensmusic.com 

On 10/19/2021 at 9:24 AM, joeystephensmusic said:

@tuanphan  would you be able to take a look at my website.  Both the desktop AND mobile background image are now off.  This happened after I added the 2 buttons above that background image.

Any css to help with this?  Thanks!

www.joeystephensmusic.com 

Hi,

Can you explain in detail?

@tuanphan I managed to fix the spacing on the desktop version.  Mobile version has too much blue above the Joey Stephens Music signature.  Ideas?

On 10/22/2021 at 12:58 AM, joeystephensmusic said:

@tuanphan I managed to fix the spacing on the desktop version.  Mobile version has too much blue above the Joey Stephens Music signature.  Ideas?

Add to Design > Custom CSS

/* Mobile-Blue space above signature */
@media screen and (max-width:767px) {
[data-section-id="5fa9c472066f8a0264cd50a2"] {
    min-height: 25vh !important;
}
}

Hi @tuanphan. I am working on https://j123.squarespace.com/config/ and am attempting to resize the background for mobile viewing. Can you please help?

On 1/29/2023 at 5:00 PM, jkt said:

Hi @tuanphan. I am working on https://j123.squarespace.com/config/ and am attempting to resize the background for mobile viewing. Can you please help?

You can add this to Design > Custom CSS

@media screen and (max-width:767px) {
[data-section-id="62a96949ad3fbe34e1dacadd"] .section-border img {
    object-fit: contain !important;
}
}