Responsive Template Design

Responsive design & CSS Media Queries

Pinned Note Media Queries
Responsive web templates will alter the layout on lower resolution (320 x 480) devices or as the web browser width is made more narrow. Some page elements will change size or disappear. This is also called fluid design or RWD (responsive web design).

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

What is Responsive Design?
Responsive web design, or "RWD", is a way of formatting HTML webpages using css code to allow the page contents to flex and fit on any screen resolution. Images will shrink in size, text boxes may change from side by side orientation and instead stack on the page. Other elements may hide on smartphones to allow more room on the screen display. This is all done using Media Queries css code.

What are Media Queries?
"Media Queries" or "MQs" is css code that targets specific device browser settings like screen size, device-orientation and other device elements. Using this tool you can, for example, setup a website to display a larger font on 480 pixel wide mobile screens.

See also What is Responsive Design?

Check if your Allwebco template has Media Queries:
If your 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 may include the following note.


Note: Search in your css files for handheld to find the media queries code used for responsiveness. There may be multiple (max-width) stages for tablet and smartphones.

Note: In drop and mega menu templates the MQs specifically used in the menu will be at the bottom of the menu css file and not in the "media-queries.css".

The media-queries.css file:
Click the following visual to see a sample "media-queries.css" included in a web template.

View Visual

Adding Media Queries to a template:
If your template does not have any Media Queries already included see Media Queries support.

Editing Media Queries:
Keep in mind that all styles in the MQs section are duplicate class selectors. This means that if for example you edit the ".title" class in the main .css file you should also then edit the same ".title" class in the MQs section generally making the font size larger in the "MQs" section. Always error check your files after any changes. See next section for testing on the fly.

Classes working in concert: Styles in the main .css file or section may include the font color, and the MQs section may only include a font size. The HTML pages will use the first style, then use any changes in the second style to alter the first style. In other words, the MQs are really just altering the main .css styles.

Testing your Media Queries:
If you add or edit Media Queries code in your css file, you can test on the fly by using the Google Chrome or Safari (or IE10 or later) browsers for testing off-line. As you make your browser width narrow the MQs css code should "kick in" and alter your styles. If it is not working it will usually be an error in your css code. See also advanced support for testing MQs.

Menu widths - menus wrapping:
If you add new menu buttons and they wrap to the next line, look for the css menu code, usually near the bottom of your css file. Find the "#menudiv" class or the "max-width" for the menu (in the non-Media Queries section) and alter the max-width until the menu stops wrapping.

Optionally you can edit the menu padding or the other menu widths that may be included in the menu style section and make each individual button less wide.

Test the Media Queries for your menu as indicated above on this page.

Note: In drop and mega menu templates the MQs specifically used in the menu will be at the bottom of the menu css file and not in the "media-queries.css".

Website Template Layouts For Mobile