what css needs to be changed to make my theme responsive?
Can you guide me step by step?
Hello,
what css needs to be changed to make my theme responsive?
Can you guide me step by step?
what css needs to be changed to make my theme responsive?
Can you guide me step by step?
http://Shopix.me - Natural herbs and more.. - online shop
stylesheet.css
or you can add new stylesheet and add it to header but call it after stylesheet.css
or you can add new stylesheet and add it to header but call it after stylesheet.css
A coder by Hobby and Developer by Profession
Images in Manufacture
http://www.opencart.com/index.php?route ... on_id=6943
Description and images in Manufacture
http://www.opencart.com/index.php?route ... on_id=6978
http://codertj.com
Okay.
Can you give me an example from an ordinary theme stylesheet.css to become responsive
Just one snippet
Can you give me an example from an ordinary theme stylesheet.css to become responsive
Just one snippet
http://Shopix.me - Natural herbs and more.. - online shop
^^ in order to make your pages responsive, you have to do a couple of things, depending on how "responsive" you want it. By responsive do you mean you want it to adjust to a desktop users screen size. Do you mean you want it to look just as good on a laptop? or do you mean you want it to be viewable on a mobile device as well?
First, you have to do width by percentages. Example.
you should give your design a max width to, so if your site is center aligned, it wont break out to far and look very wierd on very high resolution screens, like the 27" iMac. Example.
You should also use media queries, which is relatively new but easiest to incorporate. Example.
------
As i was saying before, its relatively new to the game so its browser compatibility is somewhat limited, which is wear JS comes in. A good one to check out is modernizer. It "helps" along browsers adjust to broswers sizes via media queries. Make sure to you progressive enhancement! .
Hope this helped : )
First, you have to do width by percentages. Example.
Code: Select all
col1 {width:60%;}
col2 {width:40%;}
Code: Select all
#siteWrapper{max-width:1200px}Code: Select all
@media all and (min-width:600px) {
/* All CSS for when the browsers width is minimized under 600px */
} /* End media query */
@media all and (min-width:320px) and (max-width:599px) {
/* Something like this you would put your styles in for how you want your browsers to look between the widths off 320 and 599, and then once it hits 600, it changes to your full layout. */
} /* End media query
@media all and (max-width:319px) {
/*Here you could place how you want your page styled for mobile phones.*/
} /* End media query */As i was saying before, its relatively new to the game so its browser compatibility is somewhat limited, which is wear JS comes in. A good one to check out is modernizer. It "helps" along browsers adjust to broswers sizes via media queries. Make sure to you progressive enhancement! .
Hope this helped : )
Who is online
Users browsing this forum: No registered users and 2 guests
