I recieved an email recently alerting me to the fact my sites header wasn’t responsive on some mobile devices.
Before i changed to a mobile responsive theme, i used wptouch which is a plugin for displaying WordPress sites on mobile devices.
Technology changes fast and now most theme developers offer mobile responsive themes.
There’s many free online tools you can use to test what your website and blog looks like when viewed on different mobile devices and smartphones.
Here’s a few you may want to check out:
- howtogomo.com - This tool shows you how your current site looks on a smartphone, and provides a report on what’s working and what you can do better.
- responsiView – Google Chrome extension which offers 3 preset sizes for tablets and mobiles.You can also specify your own custom width and height
- ipadpeek.com – There’s no report however this test shows you exactly what your site looks like on an iPad.
- Responsinator.com – Great tool for checking responsiveness on iPad, iPhone, Tablet, Kindle and Android.
- ResizeMyBrowser.com – This free online tool offers 15 preset sizes and you can also add more.
Test Mobile Responsiveness of StudioPress Themes
After testing my site on the Genesis responsive tool, i discovered my header image wasn’t responsive and need to fix this.
I Placed the below CSS code in my child themes style sheet which seems to fix the problem depending on which online you test it with.
/* Mobile Responsive Header mods */
#header {
background-size: contain !important;
}
Looks fine now however i don’t think all widget content and images are mobile responsive.
What do you think? Did you test your site?
Brad Dalton
@wpsitesdotnet
Latest posts by Brad Dalton (see all)
- How To Make Your Nav Menu Sticky - May 21, 2013
- How To Change Author & Comment Box Gravatar/Avatar Image Size - May 21, 2013
- Create A Custom Meta Box For A Custom Field - May 18, 2013
