[Resolved] Logo CSS on Mobile

Home Forums Support Logo CSS on Mobile

This topic contains 5 replies, has 2 voices, and was last updated by  Tom 2 months, 1 week ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1199830

    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:

    Desktop View

    And this is the broken mobile view:

    Mobile View

    Any help or suggestions are appreciated

    Thanks,
    James

    #1200054

    Tom Lead Developer

    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 🙂

    #1201008

    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.

    #1201112

    Tom Lead Developer

    Hi there,

    Try this:

    @media (max-width: 768px) {
        .site-branding-container {
            flex-direction: column;
        }
    
        .site-logo {
            margin-bottom: 10px;
        }
    }
    #1201168

    James

    Thanks Tom! That did the trick

    #1201906

    Tom Lead Developer
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.