Support » Theme: Storefront » Resize the Header image

  • Resolved znork

    (@znork)


    Hello again! So now i wonder how to change the header image, the theme resize my image, no matter how big i make it. I assume somewhere is styles.css? But its so messy, i get lost.

    Thanks for help again 😀

Viewing 6 replies - 1 through 6 (of 6 total)
  • I have the same problem. After the update to storefront 2.3.5 the logo is smaller.

    In custom css I have the following code:

    @media screen and (min-width: 768px) {
    .site-header .custom-logo-link {
    width: 170%;

    }
    }

    Unfortunately this does only increase the logo link but not the logo image.

    I have add the following code:

    .site-header .custom-logo {
    width: 170%;
    }

    It doesn’t change anything.

    It think it has something to do with the following fix:

    Fix – Removed CSS rule that was incorrectly changing the width of image logos to 100%.

    A quick diff on the un-minified (use csstidy) style.css in storefront v2.3.4 and v2.3.5 shows the following was removed in v2.3.5:

    .woocommerce-active .site-header .site-branding img {
    max-width:100%;
    }

    Just add it to your child theme’s style.css to restore the previous behaviour (I haven’t checked for any side effects though).

    Job

    (@jobthomas)

    Automattic Happiness Engineer

    We haven’t heard back from you in a while, so I’m going to mark this as resolved – if you have any further questions, you can start a new thread.

    I had a ton of attempts in this too, failed. Somehow there’s a container that is left, I got the image to resize but another container in the back won’t resize. Here’s what I have tried.

    @media screen and (min-width: 800px) {
    .site-header .site-branding, .site-header .site-logo-anchor, .site-header .site-logo-link, .site-header .custom-logo-link .custom-logo {
    width: 75%;
    }
    }

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Resize the Header image’ is closed to new replies.