#Two column responsive layout template full
#Two column responsive layout template code

mainbody width – this option is related to the ‘grid base width’.Grid spaces – also a very important option, this specifies the spaces between blocks on the layout:.It describes how wide each column will be and it is tightly linked to the next few options. Grid base width – the most important setting, this is used to specify the layout grid column width.It is necessary to set this to the proper value to avoid problems involving the blocks being placed on the edge of the screen. Body left/right padding – this option is used to set the left/right spaces on the page layout.Let’s take a closer look at the new Layout section in the template’s back-end: How Is the Template Layout Grid Configured? The mobile.css file content is enabled for smartphones with a screen size smaller than 640 pixels (of course, with a pixel ration of 2.0).įor higher resolutions, the default layout will normally be an automatic fit using the template grid. In general, the tablet layout is enabled when the screen size is smaller than the sum of the inset and mainbody column widths. Media queries for the tablet.css file are calculated automatically depending upon settings of the layout section. CSS rules responsible for the page design on the smallest screens are located in the css/mobile.css file.rules for the smaller screens are located in the css/tablet.css file.

#Two column responsive layout template code

at the end of the css/menu/menu.css file, we’ve placed some code we refer to as ‘media queries’ which, based upon the type of display type detected for the current device, will select and display the appropriate menu design.

We have embedded a few media queries into each template:

the footer is smaller and fits the mobile device width.

the modules form sidebar module position now create one column layout under the mainbody block.

the inset column button goes to the menu bar.

the menu now creates the top placed bar.

The layout for mobile devices has received similar treatment:

the footer is now displayed at the end of the page and not in the inset column.

modules from the sidebar module position create two columns under the mainbody block.

the inset column has been moved to the top-right corner as a button.

the menu is positioned underneath the logo.

The sidebar module uses MooMasonry to fill out the available space we will discuss this mechanism a little later in this article.įour basic elements have been changed on the tablet variation of the standard layout: So, in this instance, the mainbody block is treated as a single moveable block of sidebar modules. The mainbody column is partially combined with the sidebar because modules from the sidebar on smaller screens should be placed below mainbody. The image below demonstrates that the main section of the template consists of three columns, namely:

Let us compare these layouts in more detail.

mobile – a layout in support of the smallest screens currently available, with which a site visitor is presented with a single-column layout.

tablet – a layout for display on tablet-sized devices, with certain elements moved to new positions and use of a two-column format and,.desktop – a layout designed to support standard wide screens, featuring the normal menu and multiple-column format.mobile section removed from template settingsĮvery responsive layout template ships with three layout variations.

new suffixes specific to display on mobile devices.new suffixes for the altered module positions.The following changes were necessary for us to implement support for Responsive Web design:

#Two column responsive layout template full

This is related to our new approach to template design whereby pages will now have the capability to scale up or down in order to match the screen sizes of various devices: from full desktop-wide screens to tablets to the small touchscreens found on smartphones. The new “Layout” section manages template settings associated with page design. This document explains the features of these templates. GavickPro has begun to release what we term ‘responsive layout’ templates. Homepage Gavern Framework The Gavern Joomla template framework and its Responsive Layout The Gavern Joomla template framework and its Responsive Layout Last Updated: July 28th, 2015 Category: Gavern Framework