Login



Lost Password? Create An Account
Demos

Search Our Knowledgebase

  • Joomla
  • Video
  • WordPress
Or ask a question in our official product support forum boards

Layout - Fixed, Fluid, Responsive, and Mobile

Vertex comes with many options for customizing the layout, column sizes, and responsive features exactly how you need them. This tutorial will guide you through many of these features.

Overview

Vertex includes a switch between fluid and fixed layouts so if you prefer fluid you can easily switch to this layout. As you can see from the picture below you can adjust the width of any column on the page, as well as the body width and max body width. Lastly, we've designed the articles to load before the left and right columns for SEO optimization. They are repositioned with CSS so visually you see no difference in the layout.
layout image

Responsive Introduction

Vertex gives you the option to enable or disable the responsive layout feature on templates built with Version 2 and higher. Responsive can be enabled while using either the fluid or fixed layout above giving you the ultimate flexibility in creating your site!

Be sure to review our Responsive Best Practices tutorial for specific information about setting up a responsive layout website.

You can also hide areas on Vertex such as rows of modules/positions. So for example on a tablet or mobile phone you may not want all the modules/positions and rows visible as once they start stacking on each other the vertical scrolling may become quite large or some modules/positionsmay not be designed for responsive style websites. As you will notice from below screenshot you can select different areas on the framework where you would like to hide these rows of modules/positionswhen the screen is a tablet or mobile. Simply select the area that you want to hide and the Vertex framework takes care of the rest! These fields do work independent of each other, so if you want to hide something on both tablet and mobile sized screens you must select the same area on both fields.
layout image

How Responsive Works in Vertex

The responsive feature of Vertex uses media queries to activate CSS at certain screen widths. One of the biggest advantages to the Vertex Responsive Layout is that we start the layout as if it were designed for a desktop viewer, and then simply reduce, modify, or remove certain sections or font sizes based on the size of the user's screen. When the screen changes it will adjust as described below. The majority of rows and columns will not change their basic styling or positions until they reach the mobile version. Again, only minor adjustments are made on varying screen sizes so that you always know what your site will look like and where content will be placed!

  • If the column width option is enabled, the body is set to fluid, and the body width reaches 1300px the column sizes will increase by 30%. If it reaches 1900px they will increase by 60%. If it reaches 2500px they will increase by 90%. If you are using the max - body width calculations the column widths will be based off of this setting instead of screen width.
  • Between 971px and 1300px no changes will occur to the layout. This is the standard desktop view of the template.
  • At 970px (a standard 10 inch tablet screen) the body width will become fluid and will fill most of the viewing area. If the inset columns are used on the page they will be combined into their adjacent columns to create one column to increase the center column's available width.
  • At 750px (a standard 7 inch tablet screen) the mobile navigation bar will appear for easier navigation. If the column width option for small tablets is enabled you can set the center column to stay their original sizes, reduce the width by 20%, or stack into one column.
  • At 580px (a standard mobile device size) the entire body will become one single column and module stack on top of each other. Some adjustments to the header and footer will occur.


Below are illustrations of the center columns only in the scenarios described above.
layout image

Column Sizes, Small Tablets, and Mobile

If you are designing your site for very wide screens as well as s tandard desktop screens, then consider enabling the Column Width Increase feature. If the body width is set to fluid then the left, left_inset, left_top, left_bottom, right, right_inset, right_top, and right_bottom positions will increase their widths for larger screens to keep everything proportionate. If the body width reaches 1300px this size will increase by 30%. If it reaches 1900px it will increase by 60%. If it reaches 2500px it will increase by 90%. If you are using the max-body width calculations will be based off of this setting instead of screen width. The original widths are calculated in the general layout area.

For smaller screens it is often hard to make all of your content fit in the main center columns. If the screen size reaches 750px you have the option to keep the widths of the center columns how they are, reduce them by 20%, or stack them on top of each other in a single column. This option is meant for 7 inch tablets and affects the main center columns only. At 580px all positions will become a single column for mobile devices.

When the screen size reaches 750px wide (anything smaller than a standard 10 inch tablet), a navigation bar will appear across the top of the site and the bottom. This bar replaces the main menu, login, register, and search, for easier user on mobile devices. In the configuration you can choose what to enable on these bars as well as change the colors and style however you would like.
layout image
There are two layout options you can pick from: 1. A drop down layout where each item appears in an independent drop down that slides from the top of the site. 2. A off canvas sidebar option, where all items fit into a nice side slide-out area on the side of the site.
layout image
Even though this is a responsive layout and there is no separate layout page for mobile devices, that does not mean that your site's viewers will understand this or even know what a responsive layout is. It has become a standard for websites that use a mobile layout to have a link to view the desktop view of the website, and this is what your site viewers will expect to see. This link simply turns off the responsive configuration using a cookie and calls the website like a standard desktop would when viewing in mobile. There is then a link to return back to the mobile view of the site presented.

layout image

IE7 and Responsive

IE7 and IE8 do not inherently support css media queries, which is what makes responsive layouts possible. Because of this javascript is needed to add these functions to the browsers. Javascript can affect site performance, so if you experience any slow ness on your site using IE7 and IE8 simply turn responsive off for these browsers. When it is disabled the IE7 and IE8 will simply use the default body width and fixed/fluid settings from the General Layout section. Keep in mind that the primary target of responsive layouts should be for tablets and mobile devices, where IE7 and IE8 do not exist.

When you set a max-width to an image or inputbox and say you set it to max-width:100% it doesn't look at the surrounding DIV's width, it looks at the width + padding. So if the DIV has padding on itthen it stretches past the DIV. We've added the below.

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */


This tells it to strictly look at the DIV's width and then everything works fine. IE8 supports it but IE7 does not. So for images in IE7 we've just added the following:


<?php if ($browser == "ie7") { ?>
img.ie7, img.boxed, img.boxed_black, img.padded {
max-width:95% !important;
}
<?php } ?>

So images with those class names will never get larger than 95%. We've added in a class "ie7" that someone can add if they need it to. So just remember to check your site in IE 7 to be sure all images are showing properly in responsive mode.

Responsive How To's

Hide Specific Modules/Positions via the Hide Classes

For a complete list of Hide Classes download our Responsive Best Practices document from the tutorials page:

http://www.shape5.com/documentation/Miscellaneous/Responsive-Best-Practices

If you have only a specific module that you would like to hide at certain screen sizes, and not an entire section of the template, this is the best approach. A hide class is a class that can be applied to any element on the page and hides that particular element at certain screen sizes. Classes range in 100px increments for large screens and 50px increments for small screens. Use these sparingly if you can. As a recommendation, the primary target of these classes should focus on tablet and mobile sized screens. Wide screen monitors vary in size so it's much harder to use these classes correctly for large monitors. Tablet and mobile devices are much more consistent in size so it is much easier to apply the smaller hide classes.

For example, say you want to hide a specific module when the screen sizes reaches 900px wide, and remain hidden for any screen below 900px. Simply add class=hide_900 to the title of the module like this:


The class is simply put into the title of the module. There must be a space just before class= , and don't worry, the class area of the title won't actually show on the l ive site, it's only shown in the backend. It must be entered exactly as shown above. The title can be published or unpublished, it does not matter which. Simply adding the classes to the title will apply the classes to the entire module.

What if you want it to hide the module only for a certain range?
That's easy just add _only to the end of the class name. hide_900_only will only hide that element from 900px to the next increment in the hide classes, which is 850px. So it will only be hidden from 850px to 900px. You can also add multiple classes to the title like this class=hide_900_only hide_850_only which will apply both classes to the module.

What if you want to hide the module and then show it again later?
That's simple, use show_ in the class instead of hide_. This will make the module show for the specified size no matter what other settings are on the module. So if you want to hide the module from 1000px and below, but you want to show it again later then do something like the following class=hide_1000 show_600. This will hidethe module from 600px to 1000px.

Is there a more simple way?
Yes, of course, the above directions are for experienced users who want to tweak their content for every available screen size. If you don't want to mess around w ith specific window sizes simply use the following classes instead, which have preset screen sizes applied to them:

hide_wide_screen
hide_standard_screen
hide_large_tablet
hide_small_tablet
hide_mobile
show_wide_screen
show_standard_screen
show_large_tablet
show_small_tablet
show_mobile

Hide Specific Content via the Hide Classes
If you have only specific content or images within an article or module that you want to hide then use the same hide classes described above, but wrap that specific content inside of the class instead of applying it to the entire module. For example, in the image below, the third paragraph will hide at 900px and then show again at 700px.


For a complete list of Hide Classes download our Responsive Best Practices document from the tutorials page:

http://www.shape5.com/documentation/Joomla/Responsive-Best-Practices

Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $49 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.