I would like to display all the modules and component area in full across the screen, but only in portrait mode on a tablet. So more like a phone display for easier scrolling.
I'm using the main-right.xml for the layout, and this works fine with the tablet in landscape. However, for portrait mode on a tablet I would like it to be more like a phone with the modules spanning the full width and stacking.
Do I need to work with the media queries or the responsive.css/bootsrap.css?
Many thanks, the support on the forum has been top notch so far.
My source code for the main-right.xml:
<?xml version="1.0" encoding="utf-8"?>
<layout type="mr">
<head>
</head>
<groups>
<group class="span4" data-tablet="span12" >right</group>
<group
class="span8"
data-tablet="span12"
noright-class="span12"
noright-data-tablet="span12">main</group>
</groups>
<blocks>
<header html5tag="header" order="1" id="yt_header" autosize="0">
<positions>
<position class="span6" data-tablet="span12" type="feature">@logo</position>
<position class="span6" data-tablet="hidden" data-mobile="hidden" style="none" type="modules">contact</position>
</positions>
</header>
<menu html5tag="section" order="2" id="yt_menuwrap">
<positions>
<position class="span12" type="feature">@menu</position>
</positions>
</menu>
<slideshow html5tag="section" order="3" id="yt_slideshow">
<positions>
<position class="span12" style="ytmod" type="modules">slideshow</position>
</positions>
</slideshow>
<spotlight1 html5tag="section" order="4" id="yt_spotlight1">
<positions>
<position class="span8" data-tablet="span12" style="ytmod" type="modules">top1</position>
<position class="span4" data-tablet="span12" style="ytmod" type="modules">top2</position>
</positions>
</spotlight1>
<content html5tag="section" order="5" id="content" showDivTop="0" showDivBottom="0">
<positions>
<position class="span12 no-minheight" group="main" type="message"></position>
<position class="span12" style="ytmod" group="main" type="modules">breadcrumb</position>
<position
class="span12"
data-normal=""
noleft-class="span12"
noleft-data-normal=""
noright-class="span12"
noright-data-normal=""
noleftright-class="span12"
noleftright-data-normal=""
group="main" type="component">component</position>
<position class="span12" data-normal="span12" data-tablet="span12" group="right" style="ytmod" type="modules">right</position>
</positions>
</content>
<spotlight2 html5tag="section" order="8" id="yt_spotlight2">
<positions>
<position class="span3" data-normal="" data-tablet="span3" style="ytmod" type="modules">bottom1</position>
<position class="span3" data-normal="" data-tablet="span3" style="ytmod" type="modules">bottom2</position>
<position class="span3" data-normal="" data-tablet="span3" style="ytmod" type="modules">bottom3</position>
<position class="span3" data-normal="" data-tablet="span3" style="ytmod" type="modules">bottom4</position>
</positions>
</spotlight2>
<spotlight3 html5tag="section" order="7" id="yt_spotlight3">
<positions>
<position class="span8" data-normal="" data-tablet="span6" style="ytmod" type="modules">bottom5</position>
<position class="span4" data-normal="" data-tablet="span6" style="ytmod" type="modules">bottom6</position>
</positions>
</spotlight3>
<footer html5tag="footer" order="11" id="yt_footer">
<positions>
<position class="span8" type="feature">@copyright</position>
<position class="span4" type="modules">footer</position>
</positions>
</footer>
</blocks>
</layout>
