Search code examples
phpcssjoomlamedia-queries

How to switch off Joomla span classes

Hi I am looking to find out how i can change how some of my modules are shown on a mobile.

Currently I have the following in my index.php file:

<div id="leftcol" class="span8"><jdoc:include type="modules" name="welcome" style="xhtml" /></div>
<div id="rightcol" class="span4"><jdoc:include type="modules" name="laptop" style="xhtml" /></div>

which shows the 2 side by side but what I would like is to have these on top of each other when viewing on a mobile screen i.e.:

<div id="leftcol" class="span12"><jdoc:include type="modules" name="welcome" style="xhtml" /></div>
<div id="rightcol" class="span12"><jdoc:include type="modules" name="laptop" style="xhtml" /></div>

but i am not sure how i go about implementing this. Would really appreciate some advice.

Solution

  • The best approach is probably to add some custom CSS with a media query like this or similar:

    @media only screen and (max-width: 767px) {
  #leftcol.span8 {float: none; width: 100%;}
  #rightcol.span4 {float: none; width: 100%;}
}

    Custom CSS files are preferred over editing the HTML or PHP code because your changes are less likely to be overwritten by future updates.