Jumobtron and Headers on Mobile

Illdy
1

I’m having trouble getting Jumbotron and other blog headers to work properly on mobile. The top just gets pushed to the side. I have attached a photo to show an example on my iPhone 6. My website is www.killaudio.net and that is how the full image should look like. The same thing goes for other pages that I have with blog headers. I don’t know if it’s also important to note that my Jumbotron image quite huge (over 1000px - but I figured that would be normal for a feature like Jumbotron…?) but my blog header image is around the required size it asks for.

If someone could please provide a code or a step-by-step instruction on where to place the code, or whatever it is I need to do etc. that would be amazing.

~Much appreicated

2

Hello @claireluna,

Please have a look here:
https://colorlibsupport.com/t/header-image-5/

Let me know if you got it alright.

Regards

3

Yes thank you that does work. However I do notice that Jumbotron or the blog header changes depending on how big of a computer monitor I am using or when I minimize or stretch out my browser. Hope this makes sense and you could please direct me to where in coding I’m suppose to be making changes so that it stays the same throughout any laptop or large computer screen monitors.

Thank you!

4

Hello,

Like you can see in the other thread, you can force the images to have contain or cover attribute:

#header {
    -webkit-background-size: contain !important;
    -moz-background-size: contain !important;
    -o-background-size: contain !important;
    background-size: contain !important;
}

or

#header {
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    -o-background-size: cover !important;
    background-size: cover !important;
}

Check both of them and see which one better suits your website.

Regards