Archived topic
mobile header image too large
3 replies · Started by Philipp on April 10, 2019
Hello,
on my site (http://digitale-welten.berlin/newbie/) I'm pretty happy with the desktop version.
But if I change or view the site on my phone or a tablet, there are some problems.
So I can't see the title of the page. So how do I get the container same size like s´the site like in desktop version and getting the title back again. There seems to be an offset.
I hope you can help me.
Philipp
Hi there,
in the Header Element you can adjust the padding separately for mobile ( by clicking the little mobile icon ) increase the bottom padding to greater than 75px ( which is the distance you have the content moved up ) and reduce the top padding to compensate for its size.
Okay, thank you.
Now I can read the title. Perfect. But the image is still too large in my opinion. How do I get the header image on mobile not that high? And I don't want to have in mobile such offset between the content an the header? IS that possible?
Thank you for your reply. That really helps me.
Philipp
So the Site you imported added some CSS in the Additional CSS which is overriding some of the page hero settings. Go to Customizer > Additional CSS and look for this Rule at the very bottom of code:
.page-hero {
padding-top: calc(15% + 130px);
}Remove that, then you can adjust the header elemts top padding for mobile and on the Header Element > Site Header tab under merged header you can reduce the offset.
Just above that piece of CSS you will see this:
@media (max-width: 768px) {
#page {
margin: -75px 15px 0 15px;
}
}The -75px is what pushes the page content up and over the header element. Make this smaller to decrease the overlap.
