Media Queries Responsive CSS Code

What are Media Queries and how they work

Pinned Note Responsive Media Queries
"Media Queries" are CSS3 code that can be used to change the css styles in any website depending on the browser width. They can be used to make fonts larger, images smaller, allow less padding or margins, and more as the browser width becomes more narrow. This can be useful if you want larger font sizes for mobile viewing for example.

Key: "MQs" below means "Media Queries".

What are Media Queries?
Media Queries is CSS code that allows you to target CSS rules based on screen size, device-orientation and other device elements. This means you can use CSS Media Queries to tweak your CSS code to display styles like fonts, widths, hide divs, or any CSS style differently on iPad, iPhone, Android and other mobile devices, creating a responsive site.


Checking if your site has any Media Queries:
If your Allwebco template includes media queries CSS, making it a responsive design, it will include either a "media-queries.css" file, or code located at the bottom of your .css file that includes the following note.


/***************
Media Queries - RESPONSIVE FOR SMALLER MOBILE SCREENS
***************/


Adding Media Queries to a template:
You can add "Media Queries" to any Allwebco template (works in non-template HTML sites as well). It can be involved and is tricky in some cases. See testing MQs. Here are 3 examples:

Code is to be added to your template .css file. Note: you should not use the "body" class with media queries as a general rule. Also check notes below.


#1. Using classes:
CSS example for a template that has a ".contentpad" class. Increases the text size for any HTML page text inside the .contentpad class and left aligns any text using the ".just" class in 480 pixel width screens.


/***************
START Media Queries - RESPONSIVE FOR SMALLER MOBILE SCREENS
***************/

@media handheld and (max-width: 480px),
   screen and (max-device-width: 480px),
   screen and (max-width: 480px) 
   {

.contentpad         { font-size: 25px; line-height: normal; }
.just                       { text-align: left; }


   }
/***************
END Media Queries
***************/


#2. Using a DIV ID:
CSS example for a tablet iPad style template. Increases the text size for any HTML page text inside the <div id="maincontent"> in 480 pixel width screens.


/***************
START Media Queries - RESPONSIVE FOR SMALLER MOBILE SCREENS
***************/

@media handheld and (max-width: 480px),
   screen and (max-device-width: 480px),
   screen and (max-width: 480px) 
   {

#maincontent         { font-size: 25px; line-height: normal; }


   }
/***************
END Media Queries
***************/


#3. Using global classes:
CSS example for table, div, sidebar. Increases the text size for any HTML page text inside the div, table, ".sidebartext" classes and left aligns any text using the ".just" class in 480 pixel width screens.

Note: If other classes overwite the table and div class this code will not work.

Alternate: Find a class or "id" in the HTML pages to use to define the styles. In the CSS file a class will use a "." selector in front of the class name, an "id" uses a "#" and a global style has no selector.


/***************
START Media Queries - RESPONSIVE FOR SMALLER MOBILE SCREENS
***************/

@media handheld and (max-width: 480px),
   screen and (max-device-width: 480px),
   screen and (max-width: 480px) 
   {

table, div            { font-size: 25px; line-height: normal; }
.just                    { text-align: left; }
.sidebartext      { font-size: 18px; line-height: normal; }


   }
/***************
END Media Queries
***************/


Notes for above code:
  • When adding Media Queries check the HTML pages for classes or ids. You can use these class names to add your code. First check in the css file to see how the class is used and you can copy the code and paste it into the media queries section, then edit for mobile.
  • In the CSS file a class will use a "." selector in front of the class name, an "id" uses a "#" and a global style has no selector.
  • Apple devices already increase font sizes so you may need to go with very large text sizes in the query code to see an effect.
  • Be sure to test. See testing MQs.
  • To find more info you can search at Google for "Media Queries css". Add any Media Queries css you want to use to the bottom of your css file. Search for "Media Queries free video tutorial" at Google.

Testing your added Media Queries:
If you add some Media Queries code to your css file, use the Google Chrome, Safari or IE10+ browsers for testing off-line. As you make your browser width narrow the Media Queries css code should alter your styles. If it is not working it will usually be an error in your css code. See advanced support for testing MQs.


Common errors:
  • You are using the wrong selector. See "notes" above.
  • For the CSS class you are using, the HTML page element the class is on does not directly contain the text you want to alter.
  • Another class is overwriting your class.
  • You did not alter the css enough to make it visibly change.
  • The browser you are testing in is not CSS3 compliant.
  • Error check your HTML and CSS files.
  • See advanced support for testing MQs.




Upgrade Your Old Website With a Mobile Site Plugin