Making Header-Right widget area Responsive

Community Forums Forums Design Tips and Tricks Making Header-Right widget area Responsive

This topic is: resolved

This topic contains 9 replies, has 2 voices, and was last updated by  Doug 1 year ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #49960

    Doug
    Participant
    Post count: 78

    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

    #49962

    anitac
    Participant
    Post count: 7037

    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.


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #49964

    Doug
    Participant
    Post count: 78

    Hi, Anitac

    Is there anyway to upload screenshots?

    Doug

    #49965

    Doug
    Participant
    Post count: 78

    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

    #49967

    anitac
    Participant
    Post count: 7037

    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.


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #49968

    Doug
    Participant
    Post count: 78

    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;
    }

    #49969

    Doug
    Participant
    Post count: 78

    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;
    }

    #49971

    Doug
    Participant
    Post count: 78

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

    Thank you, Anitac.

    Doug

    #49973

    anitac
    Participant
    Post count: 7037

    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.


    Let me help you customize your theme, responsive header, Buddypress, Agentpress or technical issue!
    Visit me here: Cre8tiveDiva.com | Tweet Me! | Plus Me!
    When asking for help, please provide a link or screen shot showing your problem!

    #50579

    Doug
    Participant
    Post count: 78

    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

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.