Community Forums › Forums › Archived Forums › Design Tips and Tricks › Right header widget area not responsive
Tagged: Header widget responsive
- This topic has 4 replies, 2 voices, and was last updated 10 years ago by Fitness Blogger.
-
AuthorPosts
-
May 3, 2014 at 2:02 am #103423Fitness BloggerMember
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.comMay 3, 2014 at 6:32 pm #103526nutsandboltsMemberIn 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+May 3, 2014 at 7:10 pm #103532Fitness BloggerMemberHi 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.
May 3, 2014 at 7:23 pm #103533nutsandboltsMemberThat 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+May 3, 2014 at 7:44 pm #103534Fitness BloggerMemberWow 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.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.