Search notes:

Responsive design

Fixing "content wider than screen" on mobile devices

Use the <meta name="viewport" …> directive:
<meta name="viewport" content="width=device-width, initial-scale=1">
If the page contains images or program code listings that are wider than the mobile device, then the following CSS directives might help
#wide-elem {
   overflow: hidden;
}
The HTML element should be a block element (such as a <div>) in order for this to work.
In case of images:
img {
  max-width: 100%
}
However, the image will be shrunk to the width of the mobile if it is wider.

See also

CSS: creating responsive tables
HTML

Index