Right header widget area not responsive

[Fitness Blogger]

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

[nutsandbolts]

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/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[Fitness Blogger]

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.

[nutsandbolts]

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/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[Fitness Blogger]

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.

[Author]

Posts