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, 1 month ago.

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

    Doug
    Participant
    Post count: 80

    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

    Anita
    Participant
    Post count: 7568

    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.


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

    #49964

    Doug
    Participant
    Post count: 80

    Hi, Anitac

    Is there anyway to upload screenshots?

    Doug

    #49965

    Doug
    Participant
    Post count: 80

    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

    Anita
    Participant
    Post count: 7568

    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.


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

    #49968

    Doug
    Participant
    Post count: 80

    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: 80

    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: 80

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

    Thank you, Anitac.

    Doug

    #49973

    Anita
    Participant
    Post count: 7568

    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.


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

    #50579

    Doug
    Participant
    Post count: 80

    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.