Logo misaligned in mobile view

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;
    }
}

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!

Can you link me to the site possibly? :)

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

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 :)

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

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;
    }
}

Tom,

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

Calvin

You're welcome :)