How to make existing Joomla 2.5 template responsive?

Question

I'm trying to make my existing Joomla 2.5 template responsive for mobile device using @media queries.What I'm trying to do is disabling the right bar display for small screen and making the width of of the article content cover 100% of the screen. I tried the following

@media only screen and (min-width:150px) and (max-width:600px) {
   .rightbar {
      display:none;
   }
   .container {
      width:100%;
   }
}

With the above code the right bar disappear in small screen but the width of the container is not being responsive (does not fit with the screen size).

Now I'm confused weather Joomla 2.5 supports responsive for existing templates or I have done something wrong with @media queries?

Lodder Lodder · Accepted Answer · 2014-06-07T22:28:26

Joomla takes no part in how CSS works. CSS is a styling language and Joomla is a CMS written in PHP. The templates are HTML based just like your average static site, therefore any CSS you write should apply. The reason why your container might not be extending is there may be a parent element wrapped around your container with a set width or the container class is being overridden somewhere else. The best thing to do would be to inspect the element using Chrome Dev Tools or Firebug. This will show you everything you need to know ini this scenario

How to make existing Joomla 2.5 template responsive?

2 Answers