Responsive templates

Competizer templates use responsive design. It means that layout magically adjust itself to comfortably fit the width of the screen. 

Responsiveness in templates is realized in different ways, so find out which one suits best your needs.

Default template

Header is displayed on the top.

There is main menu below the header. On small screens all menu items are displayed. So this layout is recommended when you don't have too much menu items. If you need more links to be provided consider adding them to footer menu.

On small screens (below 760px) main container is displayed for the full width, aside column goes down, below main content.
On tablets and in Facebook application main container is narrower so there is a space for aside column, which is 300px wide.
On very wide screens (above 1300px) aside column could become wider and fit it's widgets in two columns. To achieve this, some additional styling have to be added. See sample code here.

Filters in gallery are displayed in a condensed way, so this template is recommended if you use some of them (for instance: latest/top sorting + categories+time filters).

Example:

See Default template in action together with Black&green theme.

Blocks template

Header is displayed on the top.

There is main menu below the header. On small screens all menu items are displayed. So this layout is recommended when you don't have too much menu items. If you need more links to be provided consider adding them to footer menu.

On tablets and in Facebook application main container is displayed for the full width, aside column goes down, below main content. Use this template if you want to present big photos, but don't forget to set big photo size to 960px, to make use of the full available width.

Filters in gallery are displayed in a very condensed way, so this template is recommended if you use all of them (latest/top sorting + categories+ choose the competition+time filters).

Example:

See Blocks template in action together with default theme. Here for the highest resolution (1280px wide) there is additional styling applied. Use sample code shown here to get the same result.

Menu up template

Main menu is displayed on the top. On small screens all menu items are hidden. There is a menu icon displayed instead. Once this icon is clicked full menu is displayed (look up for example). This layout is recommended when you don't have many menu items.

Header is displayed below main menu.

On small screens (below 760px) main container is displayed for the full width, aside column goes down, below main content.
On tablets and in Facebook application main container is narrower so there is a space for aside column, which is 300px wide.
On very wide screens (above 1300px) aside column could become wider and fit it's widgets in two columns. To achieve this some additional styling have to be added. See sample code here.

All filters in gallery are displayed one after another, so all options are visible and lined up. Use this template if you don't apply all filters (for instance only latest/top sorting + few categories).

Example:

See Menu up template in action together with Light pink theme. For the highest resolution (1280px wide there is additional styling applied. See sample code here).

Responsive navigation

Main menu

On normal screens you can built two-level main menu. Second level menu is expanadable.

On mobile screens menu items are displayed as big buttons, as on touchscreens hover actions doesn't work.

In default and blocks template all menu items are visible at once. In menu up template only menu icon is displayed. After clicking on this icon all menu items apear together with the close button.

Filters in gallery

On big screens filters are displayed as expandable lists or lined up items. On mobile devices there is an icon, when it's clicked all filtering options appear as big buttons together with close button.

Profile menu

On normal screens links are lined up. On small screens there are big buttons, easier to navigate on touchscreens.

Browsing to previous / next item in gallery or entry

While browsing gallery or entry pages to the previous/next item on small devices the content scrolls automatically down, so the header is skipped and user jumps straight to the content.

Responsive elements

Photos

In photo competition entries are scaled, to fit available space. They are never not wider than screen. So mobile users can see the whole photo without scrolling.

Description on Home Page

If you add description image on home page with some text and float it left or right, then the image size will be adjusted, so it will stay floated also on smaller screens. However on the smallest one, like on smartphones this image will be not floated, but displayed max for the full width and the text will be displayed below.

  

Competizer Platform is the online contest software to create and manage Online Competitions.

More info at 

competizer.com