Header Image Doesn't fit mobile phone or tablet

Illdy
1

selltenniscamps.com

on the laptop or desktop the header image looks perfectly centered. However, on a tablet or phone, the image looks crunched. I have tried a few of the steps listed in previous tickets but none fixed it. I am leaving it with the custom code listed below, but all that did was sort of make it fit inside the header, but there is a ton of blank unused space. Can you make the current image fit in both a desktop/laptop as well a tablet and phone? Also is there a way to simply hide the header image altogether on a mobile device such as a tablet or phone?

@media (max-width: 768px) {
#header {
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
background-repeat: no-repeat;
}
}

2

hi @bababoey,

Your solution above works just fine if you will reduce the padding:

@media (max-width: 500px) {
#header {
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
background-repeat: no-repeat;
padding:40px
}
}

thanks,

Cristian

3

I just installed this theme tonight and am having similar issues with my Jumbotron image, although mine is not “crunched” as the user above reported.

On my laptop the image looks absolutely perfect, but when I proof checked the design on both my mobile phone and my tablet I have found this image is not fluid-grid, as it appears stretched out, giving a completely different appearance.

How do I go about fixing this? Is this a responsive theme?

searchingforsol.com

4

Think I found the fix(es) via reply 79924

Seems to work.

5

Hi @lezlie,

Glad to hear that you found the solution.

Thank you,

Cristian

6

OK thanks but it still looks rather odd. Please see at URL. Is there a way to simply hide the header image on mobile? There looks to be a ton of purple space that makes it look unbalanced

Also possibly how to limit the amount of empty purple space

7

Hi,

The only way to hide the image is:

@media (max-width: 500px){
#header {
background-size:0 0 ;
}
}

Regarding the purple space, put the background to another color and remove the padding to reduce the size
thanks,

cristian

8

Cristian, thank you for the responses. Interestingly enough, the image on my android mobile phone disappeared, but on my android 8" tablet, the image still persists.

I actually like the image on tablets, iPads etc, but if you view it, the female on the left is cut off entirely. Any ideas why she is partially cut off on tablets?

9

Hi @bababooey,

Could you remove the website maintenance today so I could see what is happnening?

Thanks,

Cristian