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