Resize header

  • momar165 · Member ·

    Hi there,

    I´m using the Stay Theme for my blog and the size of the header ist only 300 x 100 px which looks kind of odd.

    Is it possible to change the size of the header using CSS?

    Unfortunately I have no experience with CSS so a foolproof explanation would be highly appreciated ;-)

    Thank you in advance!

    Cheers
    Simone

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

  • hallluke · Member ·

    Try uploading a larger image to your media gallery and setting it as your header image using the customiser. When it asks you to crop the image just drag the selection handles so it covers the entire image. Then add this to your custom CSS under Appearance > Customize > CSS, you can delete all the example text in that box too:

    #masthead hgroup {
  width:100%;
}

    I tested it out with a 1200 by 300px image (1200px is your maximum content area width so there’s no point uploading an image larger than this). The theme will then reduce the image size butkeeping the correct aspect ration so it fits on all different types of devices. You’ll probably want to test your image at different screen widths – if you have text in your image at really small sizes it will get hard to read.

    Let me know if you get stuck!

  • momar165 · Member ·

    Yeah, it works, thank you so much!
    Can I also center the title?

  • momar165 · Member ·

    I withdraw the question, already got it ;-)

    Thanks again

  • The topic ‘Resize header’ is closed to new replies.