Header should adjust its size to window frame, it's too big!

• 

  danielarehfeldt · Member · Dec 13, 2013 at 11:52 am

  • Copy link
  • Add topic to favorites

  Hi,

  on my new website http://www.rehdesign.net I customized the “Book Lite” Theme for my purposes. Unfortunately the header has a certain size, and whenever I open a smaller window frame on a smaller computer for example, it gets cut off on the sides.

  Is there a way to add a CSS rule, so it will adjust the size of the site to the window? (Whatever size that may be?)

  Thank you in advance for your help!

  Best regards,

  Daniela

  The blog I need help with is: (visible only to logged in users)

• 

  staff-totoro · Staff · Dec 13, 2013 at 10:03 pm

  • Copy link

  Hi there,

  You can try the following line of code.

  #masthead { background-size: 95% !important; }

  To use it, go to Appearance > Custom Design and click on the “Edit” button under the CSS section, and paste it in.

  Be sure to save your changes when you are done. If you like you can tweak that percent value to find what works for you. Feel free to experiment. :)

• 

  danielarehfeldt · Member · Dec 13, 2013 at 10:43 pm

  • Copy link

  Hi jerrysarcastic,

  thank you for your help. Unfortunately it is not what I’m looking for, as I chose this particular design just because of the header (because I wanted one that touched the sides left and right). I would need a code that helped with the size adjusting, so for example if somebody else viewed the site and made the window smaller and then bigger, the content should increase or decrease size as you change the size of the window. At the same moment.

  I’m sorry, it’s a bit difficult to explain what I want.

  Thanks again for the effort, maybe there is another solution?

  Best wishes, Danni

• 

  staff-totoro · Staff · Dec 13, 2013 at 11:56 pm

  • Copy link

  so for example if somebody else viewed the site and made the window smaller and then bigger, the content should increase or decrease size as you change the size of the window.

  That is what the code I gave you does; it scales the artwork to be 95% of the width of the screen, whatever size that is. It looks pretty tiny at very small sizes (like iphones) but that is unavoidable, as the text in your graphic is not meant to be read at that scale.

  If you want the graphic to go edge to edge, you can adjust the value to be 100% instead.

• 

  danielarehfeldt · Member · Dec 14, 2013 at 8:11 am

  • Copy link

  Oh, this is my fault, for not even trying. I have to apologize.

  This works fantastic! Just what I was looking for.

  Thank you very much! :)

  – Danni

• 

  staff-totoro · Staff · Dec 14, 2013 at 7:09 pm

  • Copy link

  Great, glad I could help!

  Happy Blogging :)