Parallax Pro – Modify header and body width

[mercurialist]

I'm using the Parallax Pro theme for my site and would like to make some changes.

I would like to ensure that the header width aligns with the width of the main content area. At present, the header text stretches far beyond where the body content begins and ends in each direction, at least when viewed on a widescreen desktop monitor.

How can I make both the body content and header content stretch to a maximum of exactly 800px in width (for large screens)? My main issue is that they're not aligned with one another. Ultimately, I see the header being a little narrower and the main content area a little wider until they're the same width.

http://www.greenad.am

[marybaum]

You sure about that 800px? That's only slightly wider than a tablet in the portrait/vertical orientation. For wide screens, I usually use 1140 or 1280 - but that's not what you asked.

The simplest way to get all your content to line up is with the wrap class.

In style.css, there's a rule called .wrap:

.site-inner,
.wrap {
	margin: 0 auto;
	max-width: 1140px;
}

It's the first rule under Site Containers, line 462 or thereabouts, depending what other edits you've made already.

Change that max-width to whatever you like, and you'll be good to go.

I also recommend adding this:

width: 100%;

to the end of the rule.

That should help your content not get cropped off if someone visits from a mobile device before you've had a chance to work with your other device widths.

Cheers!

Oh. Almost forgot: to get the header narrower than the content, add this rule to the section of style.css that deals with headers - just to keep things organized -

.site-header .wrap  {
    width: 80%;
}

The max-width will still be whatever value you set in the global .wrap class, but the header wrap will be 20% narrower. It will also still be centered, because the margin of 0 auto still applies. Those inherited values are what we mean by cascading style sheets.

Hope this helps.

Mary Baum

---

Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀

[marybaum]

BTW - based on your home page, you write very well.

Lotta folks on the web need decent writing.

MB

---

Sharing the good news about the wonders of modern CSS and the split-step. Either one should get you moving fast. 😀

[mercurialist]

Thanks, Mary, for the compliment.

Many apologies as it appears you spent lots of time on your reply. Unfortunately, those suggestions aren't helping me do what I'd like to do.

Let's forget the 800px bit. I just want the width of the header content (title + navigation) to align with the width of the body content (i.e. so that the place where the words begin and end is the same on each side – I want the header content to be flush with the body content on both sides).

Let's say – and this actually is true – I really like the current width of the body content. I'd like the header content to be the same width. How do I achieve this?

[Author]

Posts