Responsive Prestashop Themes

Shortly, responsive design means designed made on css3 and media quires for almost all browser agent . For example mobile, PC, notebook, Web TV, Tablets.

Responsive Design Prestashop

According to Wikipedia
Responsive Web Design (RWD) essentially indicates that a web site is crafted to use Cascading Style Sheets 3 media queries, an extension of the @media rule, with fluid proportion-based grids, to adapt the layout to the viewing environment, and probably also use flexible images. As a result, users across a broad range of devices and browsers will have access to a single source of content, laid out so as to be easy to read and navigate with a minimum of resizing, panning, and scrolling.”

Now a days, there is trends to have responsive design. So that more than 95% user can access your website without any hassle . Only for PC and notebook is not sufficient. Most of the employee and employer travels 2 hours daily in train for their official work. And obviously they utilize their free wify on browse their desire websites. hee 🙂 But I am not telling that all guys open web browser .

Making responsive design for prestashop or any web software is challenge task but not difficult. If you have enough knowledge about html and css . Then, I am sure you can do it. I promise.

Simply how do they do it for responsive design. Normally css media quires makes detect browser size and device and send selective css file or code. Let’s see simple way to have responsive design on your own way.

Step1.
Put below code after head tag and before body tag.

The viewport tag below tells the browser to use the device width as the viewport width and disable the initial scale. Include this meta tag in the

Here, we are using mediaqueries.js because new css media queries does not support less than ie8. So, we recomend to have above javascribe. It’s google code and load quickly.

Step2.
In second step we need to have specify css media queries for seperate dimensional.

/* First css for PC having more than 960 px */

@media only screen and (max-width: 959px) {}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {}

> Download sample file

Responsive Design CSS Framework
There are lots of CSS Framework for responsive design. Most popular frameworks are .

Less Framework http://lessframework.com/
1440 CSS Gride System http://cssgrid.net/
Gumby http://www.gumbyframework.com/docs
960 Grid System http://960.gs/
Blue print http://blueprintcss.org/

All above responsive design css framework have it’s own advantage and disadvantage. For more detail about then you need to go their website.

Responsive Prestashop Themes
Now some designers and eshop holder had their design in responsive. Here, I would like to show some showcase of our responsive prestashop themes.

HardRocker
Responsive Design Prestashop

VipDress