Community Forums › Forums › Archived Forums › Design Tips and Tricks › Making Header-Right widget area Responsive
Tagged: header right, responsive, widget area
- This topic has 9 replies, 2 voices, and was last updated 10 years, 9 months ago by Doug.
-
AuthorPosts
-
July 9, 2013 at 10:18 am #49960DougMember
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 MemberJuly 9, 2013 at 10:32 am #49962AnitaKeymasterIt'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.
Love coffee, chocolate and my Bella!
July 9, 2013 at 10:49 am #49964DougMemberHi, Anitac
Is there anyway to upload screenshots?
Doug
July 9, 2013 at 10:51 am #49965DougMemberAnitac,
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
July 9, 2013 at 10:54 am #49967AnitaKeymasterThat'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.
Love coffee, chocolate and my Bella!
July 9, 2013 at 10:54 am #49968DougMemberThe 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;
}July 9, 2013 at 10:55 am #49969DougMemberWhen 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;
}July 9, 2013 at 10:59 am #49971DougMemberCan I make you an admin? The site is under construction.
Thank you, Anitac.
Doug
July 9, 2013 at 11:06 am #49973AnitaKeymasterGo 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.
Love coffee, chocolate and my Bella!
July 13, 2013 at 6:06 pm #50579DougMemberHi, 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
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.