I am attempting to convert my current Joomla 2.5 template into a responsive design for mobile devices using @media queries. My goal is to hide the right bar on smaller screens and have the article content cover 100% of the screen width. Here is the code I have tried:
@media only screen and (min-width:150px) and (max-width:600px) {
.rightbar {
display:none;
}
.container {
width:100%;
}
}
Although the above code successfully hides the right bar on small screens, the width of the container is not adjusting to fit the screen size.
Now I am unsure if Joomla 2.5 supports responsiveness for existing templates, or if I have made an error with my @media queries?