Horizontal Positioning Issues

[Michael]

Greetings Folks!

I am working on a website and could use a bit of assistance please. Thank you in advance for any insights you can assist with!

Here is the URL - http://www.babylonburning.org/

I've pretty much finished up all the styling here with one exception. I am having a difficult time getting everything horizontally centered up under the header and I am not quite sure how to remedy. Here is what I THINK I need to do, please advise if you see differently.

I am pretty sure everything is lined up horizontally like it should be except the main slider, which appears to me needs to shift way to the right.

I am using the Outreach Pro theme with SlideDeck2 plugin in the Home Top widget area. I've tried to identify the issue with firebug and just can't seem to find the right area of code to alter for this shift right.

Your help is truly appreciated!

http://www.babylonburning.org/

[Tony @ AlphaBlossom]

Hello,

You can add this to your theme's style.css file and it should take care of the issue with the slider:

.content .slidedeck_frame {
    margin: 0 auto;
}

It works for me as is, but you may have to add "!important" (or play with the specificity, but that's a longer explanation), so it would be "margin: 0 auto !important;"

Also your .home-bottom widget under the slider is left aligned, you probably want that centered also. Around line 1376, add "text-align: center" to the rule for .home-bottom:

.home-bottom {
    background-color: #EAEAEA;
    padding-top: 6rem;
    text-align: center;
}

Have a great day!

Tony

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[Michael]

Tony, Thank you so much! That got me 90% where I need to be. A couple of questions if you please-

I did implement both changes you suggested which took care of most of the issue. However, the header is still not centered properly. Would you advise re-sizing it? I believe it's set at 1200 px wide, which as far as I know, should work. I tried moving everything in the header to the left using "margin-right: 100px;" under .site-header - see code below

.site-header {
background-color: #060401;
color: #eaeaea;
min-height: 267px;
width: 1200;
margin-right: 100px;
}

This is probably a mediocre fix, as when I resized the window to see how everything acted in responsive mode, the header is not acting responsive like it ought.

Do you think I need to re-size the header or can you recommend a css fix?

Thank you again Tony!

[Tony @ AlphaBlossom]

Hi...glad that helped.

It's tough getting your full width-header to be responsive, especially when you can't set the background color to blend in...but it's definitely doable.

I would remove the right margin from your .site-header, and set the background image position to center. That will center it, but it causes other issues and you'll have to make some height adjustments for your normal display as well as your media queries.

Depending on which browsers you want to support, using "background-size: contain;" will keep the background image inside of its container, then you'll just have to set varying heights at different media queries. It's not supported in ie8 though, if that's a concern. There are some jquery plugins that will help with ie8.

Another thing worth considering that may simplify things...since you're not using any content in your header, consider using an inline image instead of a background image. You can use your header widget to add the image and any links, etc...make the header widget full width (max size to match your theme), and then your image will scale automatically both height and width.

Maybe a small trade off in performance, but might be easier and scale better. Here's a article I found which might help (just scanned it but looks like it will help if you want to use an actual image) http://blackhillswebworks.com/2013/05/10/how-to-replace-the-studiopress-background-header-image-with-a-real-image-logo/

It's arguable which way is better, but if it was my site or my client's with only a logo image in the header, I would use the inline image route.

Anyways, sorry to be so verbose...but hope it helps!

Tony

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[Michael]

Tony, THANK YOU for your time and help. I took your latter suggestion and used the link to re-set the header as an inline image. Worked great. Now I have to go back and use this on some other sites. Thank you for the great learning experience. I will take this one with me everywhere I go!

[Tony @ AlphaBlossom]

My pleasure...really happy I could help! Have a great night...

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[John]

🙂

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[Tony @ AlphaBlossom]

@John great tutorial...thanks for that!

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[Michael]

I agree Tony, Thank you John!

[John]

You're welcome, guys!

---

John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

[Author]

Posts