I have been trying to make my Joomla website look good on mobile as it does on a computer but I am running into a few issues. The first is that when you access my website on a mobile or tablet device it comes up very enlarged and zoomed in.


Is there any way to make it start zoomed out so you get to see all the content and users can zoom in if they prefer.

The second issue is the white space that you can see at the bottom of the page. I have looked all through the coding and can't see what I have done wrong.

My css is below;


Thanks for any advice or help.

  • Yes, you broke somehow responsiveness of Protostar template. Do you use some third party modules or you manually change the template? Changes in css file are obvious, better start from scratch and see at what stage responsiveness get broken. Main problem is in the template index file or in the external modules. – pl71 Jun 16 '15 at 7:39
  • 2
    I'm voting to close this question for a number of reasons- 1) primarily because the user has shown little effort in solving this problem by themselves. 2) If this question were better written it'd be better suited for stackoverflow. – TryHarder Jun 16 '15 at 11:06

I can't go through your entire CSS, but it looks like your code is not optimized for responsive design. You've been using width:960px in many places, and this breaks the responsive design. Use % or max-width. In addition, you've added your custom code after the default media queries, thus overriding them with fixed widths. Moving your code above the default Protostar media queries should help a little.

Here are some more ideas to get you going:

At line # 7021 in your template.css file, you've got:

.body .container {
  width: 960px;  /* Change to max-width: 960px */
  height: 553px; /* Remove this. Why are you setting fixed height? */

Line 7000:

.navigation .nav-pills {
  margin: auto;
  width: 800px; /* Remove or set to 100% */
  height: 100px; /* Remove this */

Line 7502:

.nav-pills > li > a {
  margin: 24px 20px; /* Remove this */

Line 7340:

.nav-pills > li {
    float: none;
    width: 100%;

This should fix some of your issues, but far from all of them. You have to go through your code and test each part on different screen sizes. Avoid fixed width (px) if possible, and learn to use media queries. The Protostar template is responsive by default, but your CSS changes breaks this.

| improve this answer | |

Not the answer you're looking for? Browse other questions tagged or ask your own question.