• Resolved Gunivortus

    (@gunivortus)


    How can I get my header picture fitting screenwide? Is there perhaps a piece of custom css for that?

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

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter Gunivortus

    (@gunivortus)

    Thanks Oliver.
    Changed it to a logo. It is indeed too small (see the site link now), So it is great, there will come an option to change the size of the logo!
    Looking for it. ??

    Yet, as you see, the logo and the main menu have the same height. It should below either one.

    • This reply was modified 3 years, 11 months ago by Gunivortus.

    Try going to “Customizer – Site Identity” and tick “Display Site Title and Tagline” then go to “Customizer – Header Options” and tick “Hide Site Title” and “Hide Site Description”.

    This will force the theme to show the logo above the menu rather than to the left ??

    Then to manually make the logo larger, try playing with the max height and width …

    .site-logo .custom-logo {
    max-width: 96px;
    max-height: 96px;
    }
    @media only screen and (min-width: 482px) {
    .site-logo .custom-logo {
    max-width: 100px;
    max-height: 300px;
    }
    }

    The default values are shown above and the first set are for smaller screens.

    Oliver

    Thread Starter Gunivortus

    (@gunivortus)

    Thanks! Now, it looks much better.
    Perhaps is it possible to reduce the space above and below the logo?
    In the Customizer it is already set to minimum.

    The logo also appears in the footer below the line. Actually, it looks nice… ?? .. but then it should moved to the center.

    • This reply was modified 3 years, 11 months ago by Gunivortus.

    Looks like you need to add a …

    .site-logo .custom-logo {
    width: 100%;
    }

    … to prevent the logo expanding over the edge of smaller screens.

    There are a few CSS items that manage the space around the logo …

    .site-header > .site-logo {
    padding-bottom: 45px;
    }
    .site-logo {
    margin-top: 15px;
    }
    .site-header {
    padding-top: 22.5px;
    }
    @media only screen and (min-width: 482px) {
    style.css:3846.site-header {
    padding-top: 40px;
    }
    }
    @media only screen and (min-width: 822px) {
    .site-header {
    padding-top: 72px;
    }
    }

    As for centring the footer logo …

    .site-footer > .site-info .site-name {
    width: 100%;
    }
    .site-footer > .site-info .site-logo .custom-logo {
    display: block;
    }

    … should do the trick.

    Thread Starter Gunivortus

    (@gunivortus)

    Thank you. Great help!
    It all works.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Size header picture’ is closed to new replies.