Fixing "content wider than screen" on mobile devices
<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.