How can i make my current opencart theme responsive?

Question

How can i make my current active opencart theme responsive? I am using the theme shopcart from themeforest.

Regards

Answer 1

I would recommend using css media queries and create 3-4 different css files.

The other option will be creating different themes, detecting the user device in php and load the correct theme, but that will probably be an over kill for your needs at this point.

In the following example, I am using 3 css files (mobile.css, tablet.css, desktop.css) but you may need to use 4 or more files, depending on your design.

Locate catalog/view/theme/{your theme}/template/common/header.tpl and replace the old css link to the following (*don't forget to save a backup before modifying anything):

@import url(mobile.css) only screen and (max-width: 568px);
@import url(tablet.css) only screen and (min-width: 569px) and (max-width: 959px);
@import url(desktop.css) only screen and (min-width: 960px);

Go to catalog/view/theme/{your theme}/stylesheet and change stylesheet.css to desktop.css. Then duplicate it twice, then rename the copies to mobile.css and tablet.css.

You can then start editing the invidvidual css files to make your theme responsive.

Lastly, and offently forgotten by many, you have to actually tell the browser to fit the screen size to the device size. Otherwise, most mobile devices will 'simulate' as having a desktop resolution and users will not have a mobile friendly experience. You can do so by adding the following line to header.tpl:

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width"/>

To develop and test out your site for different screen sizes, you can use many 3rd party tools. One of the easier (and free) ways will be using the built in FireFox's Responsive Design Mode. There are other tools out there but unless you need to simulate more than just the screen size, I don't see any reason to use them at this point.

Hope this helps!