What recommended WIDTHs for joomla responsive templates

What is Joomla responsive Teamplate
The Template controls the overall look and layout of your site. It provides the framework that brings together common elements, modules and components as well as providing the cascading style sheet for your site. Both the Front-end (Site) and the Back-end (Administrator) of your site have templates.
When Joomla! is installed several templates are automatically included. You can find many more templates at other websites. Some are available without charge under various licenses, and some are for sale. In addition, there are many designers available who can make custom templates. You can also make your own template.
Templates are managed with the Template Manager, which is located on the site menu on the Back-end of your site.


What recommended should be the Widths
For default Width 970px and or 1170px
/* Default Width: */
.container {
max-width: 1170px;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}
.container {
max-width: 970px;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}

Normally standard 960 px, if you want to add css responsive for devices and browsers smaller than:
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {
Your CSS code here
}

For Tablet Portrait and smaller than 960px we recommended to use:
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
Your CSS code here
}

For all Standard Smarphone (mobile phone) you can add like code bellow
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
Your CSS code here
}

What happen with Mobile Landscape and Tablet Portrait in this case width from 480px for mobile (ex: Iphone) to 767px for tablet (ex:Ipad)
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
Your CSS code here
}

CSS code for Mobile Portrait and Mobile Portrait in this case width maximum is smaller than 480px so we will use max-width:479px;
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
Your CSS code here
}

Conclusion: Responsive Web design (RWD) is a Web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors). So you must to know what is Max and Min Width of your (users – Visitors) wide range of devices.
Want to Make your Own Joomla responsive templates step by step huh? check it: How to creat joomla template 3.0 step by step: Boostrap and responsive Joomla 3.0 template

Be Sociable, Share!

Leave a comment