[Resolved] Logo misaligned in mobile view

[Calvin]

Hi,

I purchased the premium package and am struggling with getting the alignment of my logo right in the header. The desktop version looks fine:
http://i.imgur.com/ytgvfNs.png

However, when I resize the browser to a mobile width, the logo is misaligned, like so:
http://i.imgur.com/fpKy6ri.png

I would like the logo to align centre, above the title. How can I do that?

Thanks!
Calvin

[Tom]

Hi there,

Give this CSS a try:

@media (max-width: 768px) {
    .inside-header {
        display: table;
    }
    .site-logo {
        display: table-header-group;
    }
    .site-branding {
        display: table-footer-group;
    }
}

[Calvin]

Hi Tom,

thanks, that helped a bit. However, now the logo is always beneath the title, see here:
http://i.imgur.com/XIHyonN.png (desktop view)
and here:
http://i.imgur.com/GcBixRl.png (mobile view)

I would like the logo to be centre above the title. And, ideally, if possible, I’d like the logo to be left of the Title in desktop view, and above and centre of the Title in mobile view. Is that possible?

Thanks much!

[Tom]

Can you link me to the site possibly? 🙂

[Calvin]

Sure thing, here it is:
http://www.bartel-beratung.de
Thanks!

[Tom]

It looks like you added the CSS to the parent style.css file.

Can you add it using these instructions?: https://generatepress.com/knowledgebase/adding-css/

Also, to display the logo next to your site title and tagline, this will help: https://generatepress.com/forums/topic/logo-next-to-site-title/#post-118692

Let me know 🙂

[Calvin]

Thanks for all your help so far, Tom, much appreciated. I’ve followed your instructions, deleted the code from the parent theme, installed the child theme and added the code there; and now 2 things happen:

1. If I add just the first script your recommended here, the logo remains at the bottom first (desktop view), and then moves to the top in mobile view. I would like to always have the logo on top- this script is currently activated on the website.

2. If I add the other piece of code (float left), then it looks fine in desktop view, but in mobile view it should move to the top and centre. I am not sure if this is possible, please advise.

If a combination (desktop left, mobile top and centre) is not possible, I would prefer to have the logo always on top and centre (resolution to point 1. in this post).

Again, thanks so much!
Calvin

[Tom]

Try this – should do it all 🙂

@media (min-width:769px) {
    .site-branding {
        display: inline-block;
    }
    .site-logo {
        float: left;
        margin-right: 20px;
    }
}
@media (max-width: 768px) {
    .inside-header {
        display: table;
    }
    .site-logo {
        display: table-header-group;
    }
    .site-branding {
        display: table-footer-group;
    }
}

[Calvin]

Tom,

brilliant, that worked a charm! Really awesome, thanks so much!!!

Calvin

[Tom]

You’re welcome 🙂

[Author]

Posts