Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

background image resize for mobile


medaquest

Question

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 post
  • Answers 5
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

Posted Images

5 answers to this question

Recommended Posts

  • 0
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 post
  • 0
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>

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • 0

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 post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...