Paradigm: Recreating the Demo - Responsive Design

Responsive Design

This area of the front page is a Custom HTML module. You will find the settings used in our demo below. Due to the hidden-phone Module Class Suffix setting, this module will not appear on mobiles.

Any mod_custom (Custom HTML) modules are best handled using either RokPad or no editor as a WYSIWYG editor can cause issues with any code that exists in the Custom Output field.

Details

Custom Output

Enter the following in the Custom Output text editor.

<div class="gantry-width-block gantry-width-50">
    <div class="gantry-width-spacer nomarginbottom">
        <img src="/images/rocketlauncher/frontpage/maintop/img2.png" alt="img" />
    </div>
</div>

<div class="gantry-width-block gantry-width-50">
    <div class="gantry-width-spacer">
        <div class="rt-maintop-desc">
            <div class="module-title">
              <h2 class="title">Responsive <span class="hidden-tablet">Design</span></h2>
            </div>  
            <p class="rt-large-text">
                A responsive layout adapts to the viewing device<span class="hidden-tablet">, whether mobile, tablet or a small or larger desktop, to ensure your site is accessible on all devices</span>.</span>
            </p>            
        </div>
    </div>
</div>

<div class="clear"></div>

Basic

Advanced