If you want your web site to work well on a variety of screen sizes, avoid using set pixel widths for elements on your page. Look at inline styling in your content and set pixel widths in your stylesheet. 

The Protostar template for Joomla, when using the "static" setting, will have a set pixel width for the outside container, but the span classes for the header, content area, sidebars and footer, all have span classes from Bootstrap 2 and are all a percentage of the containing element. The Protostar template then uses @media styling for more narrow screens, and the container then is assigned a width of 100%. 

Below are some examples of the widths assigned in template.css.

.container{
    width: 940px;
}

.row-fluid .span9 {
    width: 74.468085099%;
}

.row-fluid .span4 {
    width: 31.914893614%;
}

@media (max-width: 767px)

    .container {
       width: auto;   
    }   
    .row-fluid {       
        width: 100%;   
    }
}


Remove set pixel widths in the text editor for images

Often, when you insert an image into your content with a text editor, it will automatically assign a width and height in the HTML tag for the image, as per the example below.

<img alt="Photo of a grey cat" src="/images/grey-cat.jpg" height="400" width="700" />

This is inline styling and you can not override this with your stylesheet styles. Toggle the HTML for the text editor and remove this styling by hand. Then add a class or id and add your width and height in your stylesheet for that id or class.

In your stylesheet, you can give images a width using percentages. If you do, you can assign height: auto so that the width to height ratio is kept.

The percentage for the image is a percentage of the containing element. If the containing element reduces in size, so will the image.


Set pixel widths and mobile devices

You may view your website on a mobile device and all the content is smashed over to the left side with a huge blank space to the right. This usually means that some element on your page has a large set pixel width and the mobile device is accommodating its width for this set pixel width. Look at your site with a diagnostic tool like Firebug and see what is causing this. Look at images or any element that has a large width in pixels. change this to a percentage and the view on a mobile screen will adjust. It may take several screen refreshes to see your changes as mobile devices utilize cache to save download time.

 


Has BJ.Zemplate.com helped you with understanding Joomla?

If you would like to make a small contribution to help fund this resource, that would be great, but do not feel obligated in any way.

Donation Amounts


Still not finding a special topic?

Use Google's Search function below for search the content of bj.zemplate.com.