Full width header image

  • Hello,

    I want to have my header image go across the whole width which I have done successfully – though now I want to have no padding either side so it lines up with the navigation bar and no padding beneath it.

    I have created a child theme and added the code below but no matter how many times I refresh, it’s just now changing on screen..

    .site-branding {
    padding: 0px;
    }
    .display-header-text .site-image {
    margin-bottom: 0px;
    }

Viewing 7 replies - 1 through 7 (of 7 total)

  • Hi there!

    I tested on my own installation of Motif and the following CSS worked to remove the padding around the header image:

    .site-branding {
    padding: 0;
}

    Did you add the above to the style.css file of your child theme? If you can provide a link to your site, I’ll be happy to take a look into why the CSS isn’t working on your setup.

    Thread Starter daydreamer87

    (@daydreamer87)

    Ahh, it’s now working – the only issue I now have is when the page is set to full width, the padding either side of the content area is uneven..

    Here’s a link to the website:
    https://www.medwaybeekeepers.co.uk/

    Hi there,

    I’m glad that that CSS is working for you now!

    The padding between the main content on full width pages should be even.

    I took a look over your site and the only full width page that I’m currently seeing is the home page, which only has one image. The image itself isn’t centred, which is why the padding around the content may look uneven to you. You could centre the image by going to the editor for that page, clicking on the image, and using the “Justify” tool from the editor’s toolbar. (You will need to click on “Toolbar Toggle” in order to see the icon for the “Justify” tool.)

    Let me know how you get on with that or if you’re still seeing an issue.

    Thread Starter daydreamer87

    (@daydreamer87)

    Oh, sorry I didn’t explain properly. I have linked to a screen shot and highlighted where the padding issue is…

    https://www.medwaybeekeepers.co.uk/wp-content/uploads/2016/06/example.jpg

    If you notice, there is too much padding on the right hand side compared to the left. When the widgets are in use this issue isn’t there but for the main page, I don’t want to use widgets.

    Ah, I see what you mean! The theme is adding a little bit of extra margin there. You could override that with the following custom CSS:

    @media screen and (min-width: 1200px)
.content-area.full-width {
    margin-right: 24px;
}
    Thread Starter daydreamer87

    (@daydreamer87)

    That hasn’t worked at all I’m afraid! Sorry

    There were some missing curly braces in the custom CSS I provided that will have caused it to not work. I’m sorry about that!

    Please could you try again with the following:

    @media screen and (min-width: 1200px) {
.content-area.full-width {
    margin-right: 24px;
}
}

    Thanks!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Full width header image’ is closed to new replies.