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!
