Need help with Scribble header and image border css

[djw2]

I have modified Scribble a bit and am now having trouble making the header work.

http://darlingchampagne.com/

I had a nice graphical header designed, but it won't work with the responsive design, it just disappears when screen is reduced. So I just made the header area to be a darker red and the header text font white. (after trying to use Nick the Geek's responsive header plugin which I couldn't get to work properly for some reason).

Still the header won't work. I have done every conceivable thing I can think of with the css and I just need someone with more css skill and fresh eyes to look at it for me.

With a cell phone you can see how strange it appears.

Here is the css I have for the header.

 

/* Header
------------------------------------------------------------ */

#header {
background-color: #7f0707 repeat x;
min-height: 105px;
margin: 0 352px 10px;
overflow: hidden;
}

#header .wrap {
margin: 0 auto;
width: 1260px;
}

#title-area {
background-color: #7f0707;
float: left;
height: 90px;
overflow: hidden;
padding: 20px 0 0 20px;
text-align: left;
width: 260px;
}

#title {
font-family: 'Great Vibes', cursive, Arial, sans-serif;
font-size: 66px;
text-shadow: #938d84 2px 2px
line-height: 42px;
margin: 15px 0 0;
}

#title a,
#title a:hover {
color: #fff;
text-decoration: none;
}

#description {
color: #999;
font-size: 12px;
text-transform: uppercase;
}

#header .widget-area {
float: right;
width: 700px;
}

/* Image Header - Partial Width
------------------------------------------------------------ */

.header-image #title-area,
.header-image #title,
.header-image #title a {
display: block;
float: left;
height: 105px;
overflow: hidden;
padding: 0;
text-indent: -9999px;
width: 250px;
}

.header-image #description {
display: block;
overflow: hidden;
}

/* Image Header - Full Width
------------------------------------------------------------ */

.header-full-width #title-area,
.header-full-width #title,
.header-full-width #title a {
width: 1960px;
}

~~~ END of CSS ~~~

Ideally I would like to use a graphic image and have it respond to re-sizing properly.

AND ...

If you can tell me how to remove the white border around the social icons images too, I would be ecstatic! (Or I will start a new thread for that questions ...)

Any help is appreciated.

Thanks

DJ

[SoZo]

Set the margin of #header to "0 auto" and adjust your width in #header .wrap or move it to #header

---

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

[djw2]

Hey that worked!  Thanks so much, SoZo.

Could I post the image css here too for some help with the social icons border, or do I need to start a new thread for that?

 

 

[SoZo]

Ya, probably best to create a new topic

---

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

[djw2]

Will do right now then.

Thank you.

[SoZo]

You're welcome

---

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

[Author]

Posts