[Support request] mobile header image too large

[Philipp]

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

[David]

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.

[Philipp]

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

[David]

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.

[Author]

Posts