567924 Convert CSS template to responsive web design

Current template is a CSS single page template with jQuery full screen background slider. This will eventually be integrated in an automatic property website building system.

css template: [url removed, login to view]

The template needs to be crafted to responsive web layout using media queries that adapt to layout according to browser width in laptop and mobile devices. This way the same template looks good on all devices and screen sizes, vertically and horizontally.

Please see the attached screenshot for mobile layout of the template.

Requirements for mobile phone layout jQuery plugins:

activates the Photoswipe image gallery to replace the jQuery full screen background slideshow

menu links convert to dropdown menu (Responsive-Menu)

google map is responsive (mobileGmap)

video is responsive (fitvidjs)

Mobile phone layout:

‘Real estate agent name‘ presents

first image displayed in slider with multiple overlays (address, city, and price). These overlays should be css and not tiled background images.

real estate agency logo

open house date

dropdown menu

Photoswipe image gallery

pages, each page starts with the dropdown menu

webmaster logo (powered by [url removed, login to view]) is displayed at the bottom

iPad or tablet layout:

Landscape: same layout desktop version, displays dropdown menu

Portrait: Responsive version

Responsive jQuery plugins:

[url removed, login to view] (gallery)

[url removed, login to view] (menu)

[url removed, login to view] (google map)

[url removed, login to view] (video)

[url removed, login to view] (images)

Responsive frameworks you can use if you prefer:

[url removed, login to view]

[url removed, login to view]

JavaScript

Project ID: #2313888

About the project