Comment on WordPress Theme Development by SEO Dave.

Stallion Responsive WordPress Theme Converting the Stallion theme to mobile responsive code, for those not familiar with what Mobile Responsive means it’s changing the layout on the fly to match the screen size.

Currently Stallion 7.* lacks responsive code, it’s best viewed in a device with 1000px and above screen sizes (Desktop). When viewed in smaller windows like a tablet or mobile phone you have to zoom in and scroll to the right to view everything. When Stallion goes responsive everything will fit in the screen no matter what the devices screen size (within reason).

What will happen is if you have a mobile phone with a screen size of 480px for example the header area of a Stallion driven site will reduce in size to 480px (the header images will be 480px in size: for the older Stallion header image it will crop (you’ll see the 480px in the middle), for the Stallion 2011 header images they’ll scale down (you’ll see the entire image, but it will be smaller)). Below this will be the content at 480px width (large images will scale to fit), followed by the comments area (480px width), the right sidebar (480px width), the left sidebar (480px width), footer widget areas 1 to 5 (480px width), the Footer area (480px width), below this the entire header navigation window (480px width) will be just the menu links (so no drop down feature).

Currently planning to add responsive settings for these device screen sizes:


These are the most commonly used screen sizes for various devices, other sizes include 800, 640, 600, 400, 360 so it might increase in number of device sizes supported.

The basic concept is quite easy to code, but Stallion has so many features and layouts I’m hitting problems with the dropdown navigation menu, Featured slideshow and the Photonavigation menu. Currently going to drop the navigation window to below the footer for screen sizes below 1000px, not sure what to do with the featured slideshow and photonavigation features, might have to hide them on smaller screens.