Support » Themes and Templates » Issues with the size of my header in Fruit Shake

  • Hi! Hopefully someone might be able to help me. I recently transferred my blog to self hosted a couple of weeks ago and I had my Fruit Shake theme transferred over. I’ve been making some layout adjustments with the help of WordPress so I now have it wider and I myself made the colours different.

    However since the blog is now wider, I need to fix my header. Currently I have some coding in the CSS editor which hides my current header and replaces it with a bigger header image which is uploaded to my media library and put in the CSS editor. But when you make your browser window smaller, the blog gets smaller but the header stays the same. This is really awkward.

    I was told I need to create a child theme and adjust the coding that way so that my blog actually allows a wider header, but I am really not sure on what I am doing. My new header size is 1140 by 285 and I don’t know how to sort this out. Any help would be greatly appreciated! You can see my blog here if that helps 🙂 http://raindropsofsapphire.com/ Thanks in advance 🙂

Viewing 3 replies - 1 through 3 (of 3 total)
  • The issue is a bit complicated — and yes, before you do anything you really should create a child theme.

    Right now, what is visible is a background image (set in the CSS code. Background images CANNOT resize with the browser.

    But you do also have a regular image — however it’s currently set to “display: none;” in the CSS code so it’s not visible anyway. It’s also not as wide as the site — so there is a gap when it’s made visible. This image also has a width set to 1140px in the CSS — so it won’t resize – so you will need to just remove that width — and then it works.

    So what you need to do is create a child theme, get the regular image that is wide enough and then adjust the CSS code per the above.

    See child themes for help on the first thing to do.

    Thread Starter lornaraindrops

    (@lornaraindrops)

    Hi! Thank you for that. I removed the width in the coding and that seems to have stopped it from sticking at that size, however when you minimize the browser window the image just sort of starts to vanish as it gets smaller so to speak.

    With the child themes (I’ve never created one before) is it just a case of making one and then copying the header coding into it and adjusting that? Or is it not that simple? I had a look at the page that explains setting them up, but it is hard to understand since the very first part saying create a directory, I can’t even see anywhere in my editor to create one? Or am I looking in the wrong place?

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Issues with the size of my header in Fruit Shake’ is closed to new replies.