Responsive Stylesheet for Default Theme

Hi all,

I've put together a responsive stylesheet for opencart default theme. Targets ipad Portrait, iphone landscape and portrait. I haven't tested it with Android, but imagine it would be pretty similar - not familar with their sizings.

Get the stylesheet here:

http://www.visionrig.com/responsive.css

Simpliest thing to do is to include it in the bottom of your stylesheet.css.

More info is available from my accompanying blog :

http://www.visionrig.com/blog/2011/11/2 ... stylesheet

Please, let me know what you think. Very happy to hear any suggestions, ideas for improvement, and polite criticism!

cheers,
Tallowman

hi thx for your css but i tried to use a media query and doesnt work
so I separated to create 3 css called iphoneland.css - iphoneportrait.css and tablet.css, i put this file in steelsheet folder then i modified header.tpl in catalog/view/theme/default/template/common and i added after <!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/ie6.css" />
<![endif]-->

text added
<!--[if !IE]>-->
<link type="text/css" rel="stylesheet" media=“only screen and (min-width: 321px) and (max-width: 480px)”
href="catalog/view/theme/default/stylesheet/iphoneland.css">
<!--<![endif]-->
<!--[if !IE]>-->
<link type="text/css" rel="stylesheet" media=“only screen and (max-width: 320px)” href="catalog/view/theme/default/stylesheet/iphoneportrait.css">
<!--<![endif]-->
<!--[if !IE]>-->
<link type="text/css" rel="stylesheet" media=“only screen and (min-width: 481px) and (max-width: 768px)”
href="catalog/view/theme/default/stylesheet/tablet.css">
<!--<![endif]-->

Is it right? (sorry for my english)

thx

maurotto wrote:hi thx for your css but i tried to use a media query and doesnt work
so I separated to create 3 css called iphoneland.css - iphoneportrait.css and tablet.css, i put this file in steelsheet folder then i modified header.tpl in catalog/view/theme/default/template/common and i added after <!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/ie6.css" />
<![endif]-->

text added
<!--[if !IE]>-->
<link type="text/css" rel="stylesheet" media=“only screen and (min-width: 321px) and (max-width: 480px)”
href="catalog/view/theme/default/stylesheet/iphoneland.css">
<!--<![endif]-->
<!--[if !IE]>-->
<link type="text/css" rel="stylesheet" media=“only screen and (max-width: 320px)” href="catalog/view/theme/default/stylesheet/iphoneportrait.css">
<!--<![endif]-->
<!--[if !IE]>-->
<link type="text/css" rel="stylesheet" media=“only screen and (min-width: 481px) and (max-width: 768px)”
href="catalog/view/theme/default/stylesheet/tablet.css">
<!--<![endif]-->

Is it right? (sorry for my english)

thx

Is this working correctly for you ? then it is right and i will like to implement the same as well if it is working good

no not working for me

Hi Tallowman, it looks like your website has gone down, are you still around?

I'm using Opencart via Joomla / Aceshop - so I'm stuck with modifying the default theme, hence my interest in your responsive CSS.

I hope you are still around, if so please could you put your website backup?