[Resolved] Logo CSS on Mobile

[James]

Hello,

I have used the CSS code for placing the logo on the left side of the title and slogan, but on mobile the logo is pushed under the title and slogan and it pushes them up into the header image.

I’d like the logo on top and everything centered on mobile, but the code examples on here aren’t working.

This is my css:

.site-header {
    background-color: #222222;
	background-size: 100% auto;
}
.site-branding {
      display: inline-block;
}
.site-logo {
      float: left;
      margin-right: 10px;
}
#mobile-header .site-logo {
    position: absolute;
    left: calc( 50% - 90px); /* 50% from the left - half your image width */
}
#mobile-header button.menu-toggle {
    position: absolute;
    left: 0;
}

This is how it look on a Desktop:

And this is the broken mobile view:

Any help or suggestions are appreciated

Thanks,
James

[Tom]

Hi there,

Instead of using custom CSS, try the “Place logo next to title” option in Customize > Site Identity.

Let me know if that fixes it or not 🙂

[James]

Hi Tom,

No that didn’t fix it but it is better on mobile and unchanged on desktops.

https://www.rkcampf.com

If the logo was top/centered on mobile there would be enough room for the text to display under it without wrapping.

[Tom]

Hi there,

Try this:

@media (max-width: 768px) {
    .site-branding-container {
        flex-direction: column;
    }

    .site-logo {
        margin-bottom: 10px;
    }
}

[James]

Thanks Tom! That did the trick

[Tom]

Glad I could help 🙂

[Author]

Posts