Right header widget area not responsive

Community Forums Forums Design Tips and Tricks Right header widget area not responsive

This topic is: not resolved

This topic contains 4 replies, has 2 voices, and was last updated by  Fitness Blogger 4 months, 4 weeks ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #103423

    Fitness Blogger
    Member
    Post count: 9

    I am using the responsive Magazine Pro theme for my site http://www.thefitblog.com. However, the right header widget area doesn’t seem to be mobile responsive. I have tried with adsense ads and pictures but they all look wrong on small screens.

    Have I messed something up or am I missing something obvious? Any help will be greatly appreciated.

    Thanks!

    http://www.thefitblog.com
    #103526

    nutsandbolts
    Moderator
    Post count: 3131

    In your 1023px media query, you have an empty CSS rule:

    .content, .content-sidebar-sidebar .content, .content-sidebar-sidebar .content-sidebar-wrap, .footer-widgets-1, .footer-widgets-2, .footer-widgets-3, .home-middle .featured-content .entry, .sidebar-content-sidebar .content, .sidebar-content-sidebar .content-sidebar-wrap, .sidebar-primary, .sidebar-secondary, .sidebar-sidebar-content .content, .sidebar-sidebar-content .content-sidebar-wrap, .site-header .widget-area, .title-area {
    }

    If you change that back to the original, your image should resize correctly:

    .content, .content-sidebar-sidebar .content, .content-sidebar-sidebar .content-sidebar-wrap, .footer-widgets-1, .footer-widgets-2, .footer-widgets-3, .home-middle .featured-content .entry, .sidebar-content-sidebar .content, .sidebar-content-sidebar .content-sidebar-wrap, .sidebar-primary, .sidebar-secondary, .sidebar-sidebar-content .content, .sidebar-sidebar-content .content-sidebar-wrap, .site-header .widget-area, .title-area {
    width: 100%;
    }

    However, it won’t resize with AdSense in the header right area – the Javascript used by AdSense isn’t mobile responsive, unfortunately (unless they’ve recently added a mobile ad code option that I’m not aware of).


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #103532

    Fitness Blogger
    Member
    Post count: 9

    Hi Andrea,

    Thanks a lot!

    I think that technically fixed the issue. However, the Magazine Pro theme handles responsiveness on any size smaller than iPad horizontal so badly (in my opinion) that it still looks quite bad (it moves the header into 2 lines – 1 for logo and 1 for right widget – instead of re-sizing the image in the widget). It also moves the right sidebar under the main content instead of re-sizing.

    Do you know how difficult it is to fix the responsiveness issues? I would be willing to pay for the service through Nuts and Bolts if it’s just a small fix.

    #103533

    nutsandbolts
    Moderator
    Post count: 3131

    That is actually a web standard for mobile responsiveness (re: the sidebar dropping below the content and the header right widget dropping below the logo).

    If you want to remove mobile responsiveness and simply display a smaller version of the desktop site, that can be done. However, this will require mobile users to zoom and scroll to read your content, which may or may not be your desired outcome.


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #103534

    Fitness Blogger
    Member
    Post count: 9

    Wow really?

    I am ok with the sidebar moving down I guess, to make the main content easier to read, but I would prefer the header widget to re-size. Think I will just solve it by changing the entire header to one picture with the Genesis Responsive Slider so it can re-size :-)

    Thanks a lot for the help.

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

You must be logged in to reply to this topic.