Mobile devices such as iPhones often need to be told not to zoom the whole page.  There’s a good description here. Use this in the head to stop zooming occurring: <meta name=”viewport” content=”width=device-width, initial-scale=1″>

This is based on the excellent example here. If you get problems with the menu being hidden behind other screen elements below it, ensure that if whatever divs etc the menu is contained within have a z-index specified it is higher than the z-index of lower down screen elements.  Although the drop menu specifies a […]

Rules based on screen resolution 2 possibilities: 3 or more possibilities: Max-Width vs Max-Device-Width max-width The width of the target display area, e.g. the browser. When you change the size of the browser on your desktop, the CSS will change, max-device-width The width of the device’s entire rendering area, i.e. the actual device screen. when […]

  Resizing but keep aspect ratio img.some_class { display: block; max-width: 604px; max-height: 270px; width: auto; height: auto; } This also works well: .some_class img { display: block; max-width: 100%; max-height: 162px; height: auto; } Background Image To Fill DIV Useful for double size images for retina displays, responsive div boxes etc .top_header_logo { background-image: […]