Pretty Pictures | Adjust Text alignment in header image

[davidthayer]

I'm putting a site together for our wedding and have a great picture for the header, but want to adjust the title and widget alignment. Does anyone know where I can add padding (or something) to move the video off my fiance's face? 😉

*ps - I haven't loaded the actual video. I'm not really going to use the surfing vid that's there now.

http://www.kayceeanddave.com/

Thanks!!

[SoZo]

That is currently set here

.author-box div,
.hentry,
.navigation,
#comments,
#footer .wrap,
#header .wrap,
#nav,
#respond {
	padding: 8% 20%;
	overflow: hidden;
	width: 60%;
}

But editing that will effect all of those divs so you can add a new rule targeting only the #header .wrap, e.g.

#header .wrap { padding: 8% 25%; }

Or you could add a left margin/padding to #header .widget-area if you only wanted to effect the video and not the title.

It's still going to move around in different sized browsers though so you can't always guarantee you won't be covering something up. YOu can see what happens by reducing the width of your browser.

You could keep it centered by adding a fixed width and auto left/right margins to #header .widget-area

---

John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

[davidthayer]

Thanks John! I went with the #header .wrap padding and it did the trick. It certainly breaks on mobile devices, but it'll look good for 90% of visits.

If anyone else is looking to do the same: in style.css,

#header .wrap {
padding: 4% 25%;
}

That will set the padding to 4% for top and bottom and 25% for left and right.

[SoZo]

You're welcome 🙂

---

John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

[Author]

Posts