WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] [closed] Changing header size in Coraline (3 posts)

  1. philopolis
    Member
    Posted 1 year ago #

    Hi,

    I've made my site wider to accommodate more navigation buttons, but I've got a problem with my header. Firstly, I want to make the border lines wider to fit the new site size, and secondly I want to centre my header image. I've been looking through these forums but can't find how to do this (although I have found that I should probably be using a child theme, urgh).

    Any help would be really appreciated! My site's at http://www.writerightnow.co.uk if you want to see what I mean.

  2. Arthur Broeders
    Member
    Posted 1 year ago #

    Hi philopolis,

    That is a very nice site!

    These border lines are part of the header image styling (3px at the top, 1px at the bottom, 0px left and right):

    #branding img {
    	border: 1px solid #000;
    	border-width: 3px 0 1px;
    	max-width: 100%;
    	height: auto;
    }

    You have made the site wider, but the header image width still is 720px.
    So you should resize the image according to the page width.

    Or a fast method: give the header image a width="100%" (and height=""). So it stretches to fill the header. And thus the borders are fitting as well.

    <img src="./../writerightnow.png" align="center" width="100%" height="" alt="">

    But better resize the image.
    And as you can see the image is defined max-width: 100%, so if you match the width (if you are not exactly sure, just make the image a bit wider than the page!!!), and add/upload the header image again, that is the only thing there is to it. No child theme needed :-)

    Hope this helps.

    Kind regards,

    Arthur

  3. philopolis
    Member
    Posted 1 year ago #

    Thanks for such a quick reply, and for the compliment! That's excellent, I did just adjust the header image size in the functions to do it, which doesn't really skew the image so it's a fine solution without having to resize the actual image.

Topic Closed

This topic has been closed to new replies.

About this Topic