Jump to content

background image resize for mobile

Recommended Posts

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

182820561_ScreenShot2020-04-20at11_45_33pm.thumb.png.e638505bb3b1506b766f0bf19a9df97e.png

and the one below is what it looks like on mobile

2024454181_ScreenShot2020-04-20at11_45_25pm.thumb.png.5f145e700b2b39d683ccd954664a8bd2.png

 

please help!

Link to comment

Add to Home > Design > Custom CSS

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

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

Screen Shot 2020-06-15 at 5.22.03 PM.png

Screen Shot 2020-06-15 at 5.21.41 PM.png

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

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 4 months later...

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?

Screenshot 2020-10-28 at 12.31.05.png

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

image.thumb.png.3687dd1ba82b6deeb7094a9dfd898a3d.png

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 year later...

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.