CODEWITHSUNDEEP
cssjoomlajoomla2.5
Rmshkc
Rmshkc

Reputation: 1

How to make existing Joomla 2.5 template responsive?

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?

Upvotes: 0

Views: 1424

Answers (2)

Brandon
Brandon

Reputation: 1

Making existing template responsive is not easy task. You could give a try to this extension for joomla http://storejoomla.org/extensions/responsivizer.html

I tried this component on several sites, it lets you build a mobile version of your site using a mobile ready layout only when mobile devices are detected.

Upvotes: 0

Lodder
Lodder

Reputation: 19733

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

Upvotes: 2

Related Questions