• Hi
    I am very happy with the layout in mobile/tablet view, but the desktop view could do with a bit of css trickery to improve alignment and eliminate unnecessary white space. I have attached a link to an example of what I would like to do. Top image is how it currently is, bottom image is desired layout.
    Hoping you can help with some/all of this. I don’t want to touch the mobile/tablet view at all.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • This should get you somewhere close I believe, you can add it to Appearance->Customize->Additional CSS

    @media only screen and (min-width: 960px) {
         #header-wrap #header {
             padding-top: .5em;
             padding-bottom: .5em;
         }
    }
    @media only screen and (min-width: 960px) {
        #header #logo .site-description {
            float: none;
            margin-left: 97px;
            margin-top: -47px;
            padding-bottom: 15px;
        }
    }
    
    @media only screen and (min-width: 960px) {
         #header #header-content {
             margin-top: 22px;
             float: right;
             display: inline-block;
        }
    }

    Should only apply to anything above 960px browser width so shouldn’t touch the mobile settings from my limited testing.

    Thread Starter mpbaweb

    (@mpbaweb)

    Thanks, that’s close, but it removes the tagline

    Hmm, do you have a screenshot of what it looked like? I had tested out that code on the domain in your profile

    https://www.mpba.org.uk/

    It appeared to work correctly but I was using Chrome, were you using a different browser? Some browsers display a bit differently so it may need a bit of tweaking to get just right across them all.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Header layout’ is closed to new replies.