Stopping zooming to desktop page

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 zoomign occuring: <meta name="viewport" content="width=device-width, initial-scale=1">  

Read More

Responsive menu – Simple using only CSS

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 […]

Read More

Screen Resolution

Rules based on screen resolution 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 you change the size of the […]

Read More

Images

  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: […]

Read More