twenty thirteen – making header image scalable

  • I’ve replaced the header image in a twenty thirteen site with my own header that includes my logo, and have removed the default text from the header. As a result, when the theme scales down for phone or pad, the header image doesn’t scale, and the logo is not viewable as it shifts left out of sight.

    Can anyone provide potential solutions to at least keep the logo visible, if not the whole image? I’ve considered breaking up the image into smaller pieces to allow it to follow the flow when resized. Any insights appreciated. Thank you!

Viewing 3 replies - 16 through 18 (of 18 total)

  • “background-size: 100%” definitely works… BUT…
    the rest of the header/masthead then ends up with a crapload of excess white space because the .home-link demands a min-height… i spent hours last night trying to make the entire header scale nicely. not happening.

    i tried adding an extra div & using relative positioning, adding media queries to change the min-height, for whatever reason, the parent theme styles will NOT overwrite with the child – which confuses the heck out of me, even with !important…

    time to change themes. 2013 was definitely designed for floating text over a background image. convincing clients that’s the best thing to do is not always successful…. and they don’t want to pay for this fix. Even if i could figure it out ONCE i’d be happy with code to copy… but.. jeeeez.

    somethingelse,

    I’m struggling with the same issue. I think what I want is for the header image to scale to 100% of the header, but want the header to scale depending on the browser window size.

    If the header scaled, and the header image was 100% of the header, that would probably work. Unfortunately, I’m not savvy enough to know how to do that with my child theme.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You can create a new thread here: https://www.ads-software.com/support/theme/twentythirteen#postform

Viewing 3 replies - 16 through 18 (of 18 total)
  • The topic ‘twenty thirteen – making header image scalable’ is closed to new replies.