I’ve tested a couple of my sites in the Genesis Mobile Responsive tool as well as some live testing on devices and by resizing my browser. In each case I have unexpected non-responsive elements or “dead spaces” where at a given size range the header goes blank etc.
Instead of trying to trouble shoot this one element at a time, I need to understand how the general framework for mobile responsiveness works within the CSS. I like the idea of having individual control over elements with CSS for given sizes vs just shrinking everything but need to get my brain around the overall framework.
Can anyone point me to a good article on how this is configured in a Genesis Theme and how I can tweak the different responsive “thresholds”?
Can you provide the links to your sites so we can assist you better. Most times there are things that are site specific.
Well, here is my wife’s blog . I just realized however that yesterdays work of converting it to HTML5 blew away the header responsiveness so I’ll have to try to roll that back before I can make my point. Let me update this when I’ve accomplished that task. sorry.
OK, All good now. I had a pre-HTML5 version of my style.css so I restored that and removed HTML5 support form the functions.php. Here is the Blog again.
That said, this site has some of what I called “dead spaces” where the responsive header disappears. It’s in the 800px range but I can’t give an exact number without more investigation. It self-corrects around 1024px or so. Since the responsive header plugin is working I was asking my question about the general design framework so I could learn how to tweak my CSS to accommodate any areas that are not quite up to snuff. Any pointers to articles on responsive design for css would be helpful.
You must be logged in to reply to this topic.
Are you a blogger, web designer, developer, or website owner looking to generate more income?
Promote products for the largest and fastest growing online website platform as part of our affiliate program.