CSS for mobile

[pm4698]

Hello there,

I have my joomla 2.5.x and virtuemart 2.6.10 site ready with template overrides. Template is mobile responsive but in desktop mode i added some margins, paddings etc to add-to-cart button, quantity box and other stuff.

Now, i need to change css of this stuff in mobile view.

I tried opening components/com_virtuemart/assets/css/vmsite-ltr.css file and add something like this:

Code Select Expand

@media (max-width:420px;) {}

and inside those tags to add some specific css for those classes with !important statement, but it appears that i messed up the website because somehow, those css rules applied and at screens above 420px like desktop version.

Any ideas of how to do this, in order to css only mobile stuff?

Thank you in advance

[jenkinhill]

Should be

Code Select Expand


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


Best to use it in a css override. http://docs.virtuemart.net/tutorials/templating-layouts/106-override-vmsite-ltr-css.html