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

Change background image size on mobile


jlgargan
Go to solution Solved by tuanphan,

Question

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!

Link to post
  • Answers 8
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Add to Home > design > Custom CSS @media screen and (max-width:767px) { .homepage section:first-child { height: 30vh !important; min-height: unset !important; } }  

8 answers to this question

Recommended Posts

  • 0
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?
Link to post
  • 0
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>

 

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

-- I'm seriously sick. Off some time.

Link to post
  • 0
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?

Link to post
  • 0
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?

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

-- I'm seriously sick. Off some time.

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