Using CSS media queries to create breakpoints for different device widths
One of the ways in which you can get your Magento theme to adapt to your customer's device and provide them with an experience more tailored to their needs is to use CSS media queries to alter the style and layout of your Magento store for different screen sizes.
Adding the meta viewport element to your Magento theme
Firstly, you will need to add the meta viewport element to the <head> element of your Magento theme. This will tell the device viewing your store to fit the store to the width of the available device's screen.
Open your theme's local.xml file under /app/design/frontend/default/m18/layout/ and add the XML highlighted in the following code within the <default> handle of the <reference name="head"> element:
<default>
<reference name="head">
<block type="core/text" name="meta.viewport">
<action method="setText">
<meta><
