Slogan position and coloring on mobile devices

[Andrea]

Hi Tom
I am re-designing my Blog and I want to use a background picture in the header. It works fine for Desktop PC, but on mobile devices I want to change the position and coloring of the slogan. Is there any easy possibility to do? And how can I define a part of the whole picture to center on mobile? My testing URL is http://www.testumgebung.hoffnungsschein.de

Andrea 🙂

GeneratePress 1.3.46

GP Premium 1.2.96

[Leo]

Hi Andrea,

Can you try the following steps:

– Add your current header/logo image using the Before Header Content hook:
http://demo.generatepress.com/hook-locations/
https://docs.generatepress.com/article/hooks-overview/

– Remove your current header/logo image from Customizer > Site Identity and upload the one you want to show on mobile

– Then add this CSS to hide the mobile header/logo image on desktop:

@media (min-width:769px) {
    .site-logo {
        display: none;
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know if this works.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Andrea]

Hi Leo,
I changed my procedure a little bit. First I wanted to add the picture as background with the slogan as overlay. But there were so many problems on different screens. It didn’t look very well. So I decided to prepare the picture before with my logo and set it as “blog logo” – well the font is a little bit pixelated but I don’t mind 🙂
It’s just my hobby, not work!

I am a programming noob!

[Leo]

Sorry not quite sure what you meant? The method I provided above is assuming that you’ve photo shopped the texts in the image.

We can also use some conditional tags in the hook to make sure that logo only shows up on blog page if that’s what you wanted 🙂

Let me know.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts