Center header image and remove black boxes from the left and right of the site wide banner

  • Einstein Web Design

    (@einstein-web-design)


    10 years ago

    Hi I am trying to center the header image and site wide banner as on a larger screen it is not showing up as intended. On a smaller screen it is perfect.

    So currently when viewed through a larger screen the header image floats to the left and the site wide banner has two black boxes on either side of it.

    How can I fix this so it looks the same on the larger screen as it does on the smaller one?

    https://www.charityadventuretv.com.au

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

  • Try this code using a custom CSS plugin:

    .headerclass .container .row {
    text-align: center;
}
    hannah

    (@hannahritner)

    Hey Einstein Web Design, I’m not seeing your issue? Everything seems to be aligned and I don’t see black boxes? What browser are you using?

    Hannah

    Thread Starter Einstein Web Design

    (@einstein-web-design)

    Hi Hannah, I’m using Safari 9but have checked in Chrome/ Mozilla and IE too).. The browser is supposedly not the issue it is the screen size. I have a Macbook air and a toshiba and it looks fine on both. However someone with a much larger screen can see these issues. Do you mind if I ask what screen size you are viewing the site on?

    hannah

    (@hannahritner)

    I’m using a relatively small laptop. You have this in your css:

    .container {
width: 95%;
}

    I think that’s your issue. Try setting that to 100%.

    Hannah

    Theme Author Ben Ritner – Kadence WP

    (@britner)

    Just add this css:

    #center-banner {
background: #fff;
}

    Kadence Themes

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Center header image and remove black boxes from the left and right of the site wide banner’ is closed to new replies.