This article will walk you through how to set up three new module positions that are responsive. Each of the modules will expand or contract, depending on if there are 3, 2 or 1 modules active for that page. On narrow width screens, the modules will stack.

Here is what the modules will look like depending on if there are 3, 2 or 1 active modules:

Three responsive modulesTwo Responsive ModulesOne responsive module

As always, before editing the original files, make a safety backup. Our example will place these modules above <div class="row-fluid">.

Add new module positions to templateDetails.xml

<positions>
    ...
    <position>position-a</position>
    <position>position-b</position>
    <position>position-c</position>
</positions>

Edit index.php to add the modules and to create the responsive action

We need to create an if/elseif statement to change the span class on these modules so that they expand or contract depending on if there are one, two or three modules present. We need to place the following lines into the <?php ... ?> section in the top part of index.php.

/* BEGIN CUSTOM */
if ($this->countModules('position-a') && $this->countModules('position-b') && $this->countModules('position-c'))
{
    $poswidth = "span4";
}
elseif ($this->countModules('position-a') && $this->countModules('position-b') && !$this->countModules('position-c'))
{
    $poswidth = "span6";
}
elseif ($this->countModules('position-a') && !$this->countModules('position-b') && $this->countModules('position-c'))
{
    $poswidth = "span6";
}
elseif (!$this->countModules('position-a') && $this->countModules('position-b') && $this->countModules('position-c'))
{
    $poswidth = "span6";
}
else
{
    $poswidth = "span12";
}
/* END CUSTOM */

 What this is doing is changing the value of the variable $poswidth depending on if one, two or three modules are present.

The way we will set up the PHP and HTML below will include that variable. Within the <HTML> position of index.php, you will add the following lines. We have placed them just before <div class="row-fluid">

<!-- BEGIN CUSTOM -->
<div id="respmods">
     <?php if ($this->countModules('position-a')) : ?>
         <div id="posA" class="<?php echo $poswidth; ?>">
             <jdoc:include type="modules" name="position-a" style="xhtml" />
         </div>
     <?php endif; ?>
     <?php if ($this->countModules('position-b')) : ?>
         <div id="posB" class="<?php echo $poswidth; ?>">
             <jdoc:include type="modules" name="position-b" style="xhtml" />
         </div>
     <?php endif; ?>
     <?php if ($this->countModules('position-c')) : ?>
         <div id="posC" class="<?php echo $poswidth; ?>">
             <jdoc:include type="modules" name="position-c" style="xhtml" />
         </div>
     <?php endif; ?>
</div>
<!-- END CUSTOM -->

Edit the stylesheet to make these modules responsive

We are going to copy much of what Protostar has set up for the span classes inside .row-fluid. Add the following to the end of your custom stylesheet or at the bottom of template.css.

#respmods {width: auto;min-height: 200px; }
#respmods::after {clear: both;}
#posA, #posB, #posC {background: #ddd;height: 100%;padding: 20px;}
#respmods [class*="span"] {
        display: block;
        width: 100%;
        min-height: 28px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        float: left;
        margin-left: 2.127659574%;
        *margin-left: 2.0744680846383%;
}
#respmods [class*="span"]:first-child {
        margin-left: 0;
}
#respmods .span3 {
        width: 23.404255317%;
        *width: 23.351063827638%;
}
#respmods .span4 {
        width: 31.914893614%;
        *width: 31.861702124638%;
}
#respmods .span6 {
        width: 48.936170208%;
        *width: 48.882978718638%;
}
#respmods .span12 {
        width: 99.99999999%;
        *width: 99.946808500638%;
}
@media (max-width: 767px) {
[class*="span"], .uneditable-input[class*="span"], #respmods [class*="span"] {
        float: none;
        display: block;
        width: 100%;
        margin-left: 0;
        margin-bottom: 5px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
}


Has BJ.Zemplate.com helped you with understanding Joomla?

If you would like to make a small contribution to help fund this resource, that would be great, but do not feel obligated in any way.

Donation Amounts


Still not finding a special topic?

Use Google's Search function below for search the content of bj.zemplate.com.