Responsive Template Customizations

Get the CSS code that allows you to adjust elements based on browser size. This code is crucial for responsive design.

Steven Johnson
by | Posted: August 13, 2012 | Updated: June 11, 2013
Blog Post Image 734px Wide

In an ideal world you should be able to call out all widths in percentages and have your site display correctly in all browser sizes, but that just does not happen.  From time to time you may need to specify different dimensions or CSS element for different template widths.  Here is how to do that.

in your CSS file use the following text

@media only screen and (min-width: XXXXpx) { INSERT YOUR CODE HERE}

The minimum and max widths will vary based on your template. 

 

Knowing your "break" points

Since your template is responsive there are different widths that cause the template look to change.  You need to know those for your template.

If you are using a RocketTheme responsive template based on bootstrap, these are your break points.

/* Smartphones */
@media (max-width: 480px) { ... }

/* Smartphones to Tablets */
@media (min-width: 481px) and (max-width: 767px) { ... }

/* Tablets */
@media (min-width: 768px) and (max-width: 959px) { ... }

/* Desktop */
@media (min-width: 960px) and (max-width: 1199px) { ... }

/* Large Display */
@media (min-width: 1200px) { ... }

 

Real World Example

/* Detail Page Overrides */
/*Column Widths*/
div#intown-col-1 {float:left;width:600px;padding-right: 18px;}
div#intown-col-2 {float:left;width:300px;}
@media only screen and (max-width: 480px) {
div#intown-col-1 {float:left;width:100%;}
div#intown-col-2 {float:left;width:100%;}
div#intown-notable {float:right;width:100%;}
}
@media only screen and (min-width: 1200px) {
div#intown-col-1 {float:left;width:760px;padding-right: 18px;}
div#intown-col-2 {float:left;width:360px;padding-left: 20px}
}

In the above example you can see how if first created the column widths of 600px and 300px. Then for the iPhone width I know that they will break and the first column will display and then below it will be the second column. 

Then for the Widescreen displays I needed the columns to be a little wider so I set the column width to 760px and 360px and added in some padding to improve the spacing.

 

Conclusion

With the above code and knowing your break points you can see that it not to difficult, you just need to know your break points and how you want the site to display on the different size screens.

With a little trial and error you will have the hang of it and then it is time to make the changes and test test test.

Good Luck!

Steven Johnson

Steven is a Joomla web developer and worked with Joomla since the Mambo days. He has built websites for startup businesses all the way to for Fortune 500 companies. A graduate of Georgia Tech in Chemical Engineering, he now happily spends his time building websites and reviewing all types of technology.