Jumbotron image doens't show correct on mobile

Good day!
The jumbotron image on my desktop looks really nice, however, on mobile, it is not resized and simply shows a small part of the image. How can I get this right? www.zaampjes.nl
Many thanks!
Fleur

Hi,

Go to Appearance -> Customize -> Additional CSS and add this CSS Snippet in it,

@media only screen 
  and (max-width: 480px) {
    #header {
    background-position: right center;
}
}

PS: As of the image is so wide and the height of the jumbotron, it is difficult to align the image correctly in the mobile devices, but you can try the above.

Let us know,

Thanks,
laranz.

Hi

I have the same issue. My website is maverickparadox.com Can you please advise?

Before the upgrade I was given
front-page-section .section-header h3 {
line-height: 1.5;
}

@media (max-width: 1600px) {
#header .bottom-header {
padding-top: 100px;
padding-bottom: 100px;
}
}

@media (max-width: 1024px) {
#header .bottom-header h2 {
font-size: 40px;
}
}

@media (max-width: 767px) {
.top-header .col-sm-2 {
display: inline;
}

#header .bottom-header .header-button-two {
padding: 0 10px;
}

#footer .copyright span:first-child { display: none; }

.top-header .col-sm-10 {
display: inline;
float: right;
clear: both;
}

#header .bottom-header .header-button-two {
font-size: 16px;
}

.custom-logo {
width: 200px;
height: auto;
}
}

@media (max-width: 320px) {
.custom-logo {
width: 100px;
height: auto;
}

#header .bottom-header .header-button-two {
font-size: 12px;
}
}

which fixed the problem. Now it doesn’t work.

Thanks

Judith

Hi Laranz

Unfortunately this still doesn’t solve the issue.
Any other suggestions?
Thanks! Fleur

Hi,

Can you try this,

@media only screen 
  and (max-width: 480px) {
    #header {
    background-position: right center !important;
}
}

Let us know,

Thanks,
laranz.

Hi Laranz

Unfortunately this did not work, it made it worse so I deleted the extra code you posted above. Does the long css script that I posted above (which fixed the issue prior to the upgrade) need to be tweaked a little to make the difference.

Sorry if my question is naive - just getting desperate for a fix now!

Thanks

Regards

Judith

Hi Laranz

With me also still same issues - see image attached of a screenshot…

Thanks for helping out!
regards, Fleur

Hi Judith,

The above CSS will make the header like this, http://ovo.li/9pMH6k you want something like that or not? If not, can you please share a screenshot how you want?

Let us know,

Thanks,
laranz.

HI Laranz

Yes, I definitely want it to look like your example, but mine looks like the attached with this code:

@media only screen
and (max-width: 480px) {
#header {
background-position: right center !important;
}
}

Regards, Fleur

Hi Laranz

My mobile site is rendering properly now - I used the previous css script that you gave me the other day.

Thanks

Jude

Hi,

Glad it works :slight_smile:

Let us know if you have any other questions. If you’re happy with our service, don’t forget to review & rate us in WordPress [Illdy] Reviews | WordPress.org. :wink:

Thanks,
laranz.

Hi Laranz

For me it still doesn’t work - how do you see my version on a mobile?
www.zaampjes.nl

How can I get this fixed??? thanks, Fleur

Hi Fleur,

For now, the mobiles display like this, http://take.ms/jT7XW

This is how you want right? you can play with the background-position I gave in this CSS, https://colorlibsupport.com/t/jumbotron-image-doenst-show-correct-on-mobile/#post-91595

More about background-position: background-position - CSS: Cascading Style Sheets | MDN

Let us know,

Thanks,
laranz.