[8 May, 2017] Mobile version

Olympus HTML Social Network Toolkit is fully responsive template.

Responsive styles for resolutions <=768px were added in Olympus version 1.2., from May 8th, 2017.

For realization of responsive mode design, there were added additional blocks of header, left and right side panels, that are displayed ONLY for resolutions <=768px. Their parent elements are as follows:

Header:

<header class="header header-responsive" id="site-header-responsive">...</div>

Left side panel

<div class="fixed-sidebar fixed-sidebar-responsive">...</div>

Right side panel

<div class="fixed-sidebar right fixed-sidebar-responsive">...</div>

We draw your attention to the fact, that standard header, left and right side panels are hidden (display: none) in responsive mode. The above mentioned components are displayed instead of them. The main page content stays unchanged, independently from the screen resolution on device you view them on.

A distinctive feature of this template is that it comes with mobile application version, that is intended for devices with resolution <768px. It can be used additionally for your mobile applications.

For mobile version demonstration there were created several HTML pages, that can be easily found by the 'Mobile-' prefix in their titles - Mobile-...*.html.

In order to see functionality of the mobile app version descrease browser window to <768px or open the above mentioned pages on your mobile device. Content in these pages differs by its positionning from the rest of the HTML document according to the initial design.

Also its <body> tag has class 'mobile-app', that is linked to mobile app stylesheet.

All styles for mobile app version are located in ..sass/theme-styles/_mobile-app.scss file.