<p>All JoomlaShine templates are responsive. They work normally on all modern mobile devices such as iPhone, Android and Windows mobile-based.</p>
<h3>Mobile layout overview on iPhone</h3>
<div class="grid-layout">
<div>
<p class="content-center"><img src="http://demo.joomlashine.com/joomla-templates/jsn_boot/pro/images/content/template-details/advanced-stuff/mobile-ready/mobile-iphone-top.png" border="0" alt="Mobile layout overview" width="320" height="480" /></p>
<p class="content-center"><em>Mobile layout overview</em></p>
</div>
</div>
<p>Both of the above screenshots are taken from iPhone 4S, but the mobile edition works well in all modern large screen devices based on Android and Windows mobile as well.</p>
<h3>Mobile layout overview on iPad</h3>
<p class="content-center"><img src="http://demo.joomlashine.com/joomla-templates/jsn_boot/pro/images/content/template-details/advanced-stuff/mobile-ready/mobile-ipad.png" border="0" alt="Mobile Ipad layout overview" width="600" height="800" /></p>
<p class="content-center"><em>Mobile layout overview on iPad</em></p>
<hr class="line-dots" />
<h3>Optimized HTML overrides for mobile</h3>
<div class="grid-layout">
<div>
<p class="content-center"><img src="http://demo.joomlashine.com/joomla-templates/jsn_boot/pro/images/content/template-details/advanced-stuff/mobile-ready/mobile-iphone-content-article.png" border="0" alt="Article presentation (com_content)" width="320" height="480" /></p>
<p class="content-center"><em>Article presentation (com_content)</em></p>
</div>
<div>
<p class="content-center"><img src="http://demo.joomlashine.com/joomla-templates/jsn_boot/pro/images/content/template-details/advanced-stuff/mobile-ready/mobile-iphone-content-newsfeeds.png" border="0" alt="News feeds presentation (com_newsfeeds)" width="320" height="480" /></p>
<p class="content-center"><em>News feeds presentation (com_newsfeeds)</em></p>
</div>
</div>
<p>We optimized HTML overrides for all default Joomla! extensions to make them look neat in mobile edition. The work is mainly focused on rearrangement content from columns to rows.</p>
<hr class="line-dots" />
<h3>Optimized menu for mobile</h3>
<p>We have built very simple, yet effective menu system, where all children menu items are presented as tree in collapsible panel. This menu system utilizes only little Javascript (MooTool) for expanding/collapsing submenu panels and is very fast and lightweight.</p>
<div class="grid-layout">
<div>
<p class="content-center"><img src="http://demo.joomlashine.com/joomla-templates/jsn_boot/pro/images/content/template-details/advanced-stuff/mobile-ready/mobile-iphone-menu-normal.png" border="0" alt="Special designed mobile menu system" width="320" height="480" /></p>
<p class="content-center"><em>Special designed mobile menu system</em></p>
</div>
<div>
<p class="content-center"><img src="http://demo.joomlashine.com/joomla-templates/jsn_boot/pro/images/content/template-details/advanced-stuff/mobile-ready/mobile-iphone-menu-expanded.png" border="0" alt="Children menu items are presented as tree" width="320" height="480" /></p>
<p class="content-center"><em>Children menu items are presented as tree</em></p>
</div>
</div>
<h4>Mobile Menu with icons and rich text</h4>
<p>The most amazing thing is mobile menu inherits all the goodies of regular menu like icons and rich text.</p>
<div class="grid-layout">
<div>
<p class="content-center"><img src="http://demo.joomlashine.com/joomla-templates/jsn_boot/pro/images/content/template-details/advanced-stuff/mobile-ready/mobile-iphone-menu-icon.png" border="0" alt="Mobile menu with icons applied" width="320" height="480" /></p>
<p class="content-center"><em>Mobile menu with icons applied</em></p>
</div>
<div>
<p class="content-center"><img src="http://demo.joomlashine.com/joomla-templates/jsn_boot/pro/images/content/template-details/advanced-stuff/mobile-ready/mobile-iphone-menu-richtext.png" border="0" alt="Mobile menu with rich text" width="320" height="480" /></p>
<p class="content-center"><em>Mobile menu with rich text</em></p>
</div>
</div>
<p class="text-info">The responsive feature is enabled on live demo. You can check this by resizing the demo to the desired size and see how it presents on mobile devices.</p>