Making Header-Right widget area Responsive

[Doug]

Hello,

Does anyone know how to make the StudioPress Header-Right widget area responsive? I am using the Magazine theme. The site is under construction. If I could include a screen shot, I would. 🙂

Thank you!
Doug Arnold
Pro Plus Member

[AnitaC]

It's difficult to assist you when we cannot see what you have. Have you added a header... possibly a full width header? If so, that could be why it's not responding, but that area is responsive.

---

Need help with customization or troubleshooting? Reach out to me.

[Doug]

Hi, Anitac

Is there anyway to upload screenshots?

Doug

[Doug]

Anitac,

Here's the css:

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

#header {
min-height: 180px;
margin: 0 auto;
overflow: hidden;
width: 1152px; /* Changed from 960px to 1152px on 2.13.13 */
background: url("http://wp.loavesfishespantry.org/wp-content/uploads/cropped-Logo_301.png") no-repeat transparent 14px 20px !important;
}
#title-area {
float: left;
overflow: hidden;
padding: 20px 0 0;
width: 490px;
}
#title {
font-size: 48px;
font-weight: bold;
line-height: 48px;
margin: 0;
text-shadow: 2px 2px #000;
text-transform: uppercase;
}
#title a, #title a:hover {
color: #fff;
text-decoration: none;
}
#description {
color: #999;
font-size: 13px;
text-shadow: 1px 1px #000;
text-transform: uppercase;
}
#header .widget-area {
float: right;
padding: 25px 0 0;
width: 468px;
position: relative;
}
/* Image Header - Partial Width
------------------------------------------------------------ */

.header-image #title-area, .header-image #title, .header-image #title a {
display: block;
float: left;
height: 180px;
overflow: hidden;
padding: 0;
text-indent: -9999px;
width: 490px;
}
.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: 1152px; /* Changed from 960px to 1152px on 2.13.13 */
}

Doug

[AnitaC]

That's not going to help me. You can use Dropbox or Dropplr and post the link to the picture in here. But I need a visual and also to be able to test the responsiveness.

---

Need help with customization or troubleshooting? Reach out to me.

[Doug]

The logo is here:

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

[Doug]

When I look at it again, the logo is taking up the full width:

#header {
background: url("http://wp.loavesfishespantry.org/wp-content/uploads/cropped-Logo_301.png") no-repeat scroll 14px 20px transparent !important;
margin: 0 auto;
min-height: 180px;
overflow: hidden;
width: 1152px;
}

[Doug]

Can I make you an admin? The site is under construction.

Thank you, Anitac.

Doug

[AnitaC]

Go to my website and send me a note in the contact box. I can email you some instructions so I can see your computer from here.

---

Need help with customization or troubleshooting? Reach out to me.

[Doug]

Hi, Anita

Here's another one I'd like to ask your help with:

http://health-safetysolutions.com

It looks good in http://studiopress/responsive at 1024 but nothing else. Can you help me figure out why?

Thanks, Anita (if you have the time)!

Peace, Doug

[Author]

Posts