Change background image size on mobile

Site URL: https://www.onehandsanitizer.com/

I have a background image at the top of my website (www.onehandsanitizer.com). It has my logo and the company slogan. It looks great on desktop but on mobile, most of the image gets cut off. I want the image to shrink to fit in the screen on mobile instead of cutting the sides off.

I tried a few things in custom CSS. I was able to get the image to shrink by setting height: 50%; but that didn't shrink the parent container, leaving me with a bunch of white space where the picture used to be. I also tried finding the #yui_... ID for this section but couldn't find it. Not sure if that is cause this section only consists of a background image or not?

Is there a way for me to shrink the image on mobile without having a bunch of whitespace underneath it? And if not, how would I go about having one background image on desktop and replacing it with another on mobile? A solution to either question would solve my problem. Thank you very much for any help!

Thank you so much, worked perfectly!

Hello, I found your really useful code helped me make my home page shrink it's header image. 
@media screen and (max-width:767px) {
.homepage section:first-child {
    height: 30vh !important;
    min-height: unset !important;
}
}
My question is: Can I do this for other pages? For example, my wedding portfolio page has the same design as my home page 
(a background image bled behind the site navigation bar) 
I want to shrink this image down on mobile version too. Is this possible?

On 10/11/2020 at 1:12 AM, nickmnickm said:

Hello, I found your really useful code helped me make my home page shrink it's header image. 
@media screen and (max-width:767px) {
.homepage section:first-child {
    height: 30vh !important;
    min-height: unset !important;
}
}
My question is: Can I do this for other pages? For example, my wedding portfolio page has the same design as my home page 
(a background image bled behind the site navigation bar) 
I want to shrink this image down on mobile version too. Is this possible?

Edit page > Add Code Block > Add this code

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

@tuanphan hi there, can this be implemented for our page too?

Tried your code and it doesn't seem to be working.

the page in question is wearealive.co.uk/home

23 hours ago, eugenesoch said:

@tuanphan hi there, can this be implemented for our page too?

Tried your code and it doesn't seem to be working.

the page in question is wearealive.co.uk/home

Which image?

On 10/12/2020 at 2:13 AM, tuanphan said:

Edit page > Add Code Block > Add this code

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

 

I've found this code to work well on every page I've created except for this store page: takeflightspirits.com/store. It's putting all of the sections on top of the actual store items. Any thoughts?

On 10/19/2020 at 3:25 AM, AndrewTFS said:

I've found this code to work well on every page I've created except for this store page: takeflightspirits.com/store. It's putting all of the sections on top of the actual store items. Any thoughts?

Have you solved it yet?

On 10/12/2020 at 3:13 PM, tuanphan said:

Edit page > Add Code Block > Add this code

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

 

Hi @tuanphan, I tried applying this code for my other pages but it didnt work. 

I want to shrink my header background image to fit the intercept banner just like how it looks like on desktop. Apart from the home page, i need to apply this to the rest of the pages 

Can you help to take a look at my site? Thanks!

Site URL: https://www.marketingfordogmoms.com/programs

On 12/10/2020 at 3:42 PM, irock4849 said:

Hi @tuanphan, I tried applying this code for my other pages but it didnt work. 

I want to shrink my header background image to fit the intercept banner just like how it looks like on desktop. Apart from the home page, i need to apply this to the rest of the pages 

Can you help to take a look at my site? Thanks!

Site URL: https://www.marketingfordogmoms.com/programs

 

Hi. You mean remove space between image (dog & people) - header on mobile?

On 10/18/2020 at 1:25 PM, AndrewTFS said:

I've found this code to work well on every page I've created except for this store page: takeflightspirits.com/store. It's putting all of the sections on top of the actual store items. Any thoughts?

Hi @tuanphan... I have the exact same question as AndrewTFS.  I've used the following code on my store page and it works perfectly... the background image at the top is sized exactly as needed on mobile.  However, the footer and any other section section then seems to be moved up and is jumbled in with the store/products section.  I used the same code on other pages and am not having this problem, so I believe it may be an issue related to the store function.  Any advice on how to fix?  I can send my website url if needed.  Thank you!!

Code used:

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

15 hours ago, jk00723 said:

I can send my website url if needed.

Please post the URL to your store here. We can take a look at your issue.

4 hours ago, creedon said:

Please post the URL to your store here. We can take a look at your issue.

Thanks, @creedon!  Here is the link to the page in question:  www.vicesandgoodies.com/goodies (it's setup properly in desktop view, but on mobile, the footer is moved up and stacked beneath the store/product section.  Any tips are appreciated!  *By the way, subject matter on the website is for 21+ 🙂 

The following CSS is causing the issue you mention. You can remove it or modify it to more specifically target it.

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

19 hours ago, creedon said:

The following CSS is causing the issue you mention. You can remove it or modify it to more specifically target it.

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

 

Definitely moving in the right direction!  My first goal was to have the background image in the header fit properly on mobile, which this CSS accomplishes.  Do you know how I could modify it so that the rest of the page works properly?

On 12/28/2020 at 10:35 AM, jk00723 said:

Definitely moving in the right direction!  My first goal was to have the background image in the header fit properly on mobile, which this CSS accomplishes.  Do you know how I could modify it so that the rest of the page works properly?

Edit @creedon code to this, add to Goodies Page Header (I added > character into code)

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

On 1/3/2021 at 3:14 AM, tuanphan said:

Edit @creedon code to this, add to Goodies Page Header (I added > character into code)

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

 

Hi @tuanphan ... thank you for the reply!  I pasted your code directly into the Goodies page header, but unfortunately, I can't seem to get it to work.  For now, I've put the original code back in so that the header image is sized correctly.  Are there any additional edits you can suggest so that the footer does not move up the page and appear behind my other sections?

Thanks!

Remove creedon code & add code I edited above.

20 hours ago, tuanphan said:

Remove creedon code & add code I edited above.

Sorry @tuanphan, I'm stuck.  I've tried the steps that you suggested and used your exact code with the > added, but I still can't get it to work.  I've placed the original code back in (without the >) just so that the image looks ok on mobile for the time being (even though the products section is still stacked above the footer).  Any other edits you can suggest?  

Hi @tuanphan, I've tried the code provided above and it definitely helps with the sizing but is there any way to for the mobile image to look exactly like the web?

Here's my url where you can see the background image https://www.calebhetan.com/bose-sleepbuds

If you have a solution, can you explain how you do it so I can apply it on other pages as well?

Thank you!!!

On 1/8/2021 at 10:12 AM, jk00723 said:

Sorry @tuanphan, I'm stuck.  I've tried the steps that you suggested and used your exact code with the > added, but I still can't get it to work.  I've placed the original code back in (without the >) just so that the image looks ok on mobile for the time being (even though the products section is still stacked above the footer).  Any other edits you can suggest?  

Add to Page Header

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

On 1/10/2021 at 10:53 AM, ctan9 said:

Hi @tuanphan, I've tried the code provided above and it definitely helps with the sizing but is there any way to for the mobile image to look exactly like the web?

Here's my url where you can see the background image https://www.calebhetan.com/bose-sleepbuds

If you have a solution, can you explain how you do it so I can apply it on other pages as well?

Thank you!!!

Add to Bose Page Header

<style>
  @media screen and (max-width:767px) {
  #page section:first-child {
    min-height: 20vh;
    margin-top: 10vh;
}
  }
</style>

19 minutes ago, tuanphan said:

Add to Page Header

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

@tuanphan THANK YOU THANK YOU!!!  That worked!!  You're amazing 🙂

On 1/11/2021 at 10:43 PM, tuanphan said:

Add to Bose Page Header

<style>
  @media screen and (max-width:767px) {
  #page section:first-child {
    min-height: 20vh;
    margin-top: 10vh;
}
  }
</style>

 

@tuanphan Thank you! You the real MVP!