Header/Jumbotron image not resizing

Illdy
1

https://backhomeatsupplementstation.com/

my header/jumbotron image is not resizing on a tablet/phone screen.

This is the additional css I have on my website.

#header.header-front-page {
background-image: url(https://backhomeatsupplementstation.com/wp-content/uploads/2020/06/Asset-2.jpg) !important;

height:100%;
width: 100%;

};

#about .section-header {
margin-bottom: 10px;
};

/Team section fonts/
.front-page-section .section-header h3 {
color: #ffff;

}

#team .section-content .person .person-content h6 {
color: #fff;
}

#team .section-content .person .person-content p {
color: #fff;

}
#full-width .section-content h5 {
color: #fff;
} ;
/* 11. Footer */
#footer {
width: 100%;
background-color: #292825;
padding: 40px 0;
color: white;
};

2

Hey there

Again and again, you cant make work it properly unless you use an image with the text and another image element, it will be not resized properly when you do that.
Try to use different image for mobile screens:

@media only screen and (max-width: 992px){
#header.header-front-page {
background-image: url(https://backhomeatsupplementstation.com/wp-content/uploads/2020/06/Asset-2.jpg) !important;
background-size: cover !important;
}
}

3

I’m sorry, can you explain more about the " image with the text and another image element"? What size image would you recommend for the mobile screens? I copy/pasted the code as you typed it and it is still too large (i’m not sure if the code you typed was meant to resize the current too big image or be an example for me to replace with a smaller image)

4

Nevermind, I figured out the dimensions. Thank you so much!

5

Nice to hear you found the solution :slight_smile: