Question

I am creating a page @ [link removed]

The header at the top is really large (1600px) to accomodate wide monitors. Setting the header to 100% width doesn’t work, because the rotation produces some weird effects.

I set the body overflow-x to hidden, so that a horizontal scroll bar doesn’t appear. The layout should accomodate normal computer resolutions.

The problem is when you visit from a device with very small resolution, e.g., a mobile phone, or if you resize your browser window. It would be very helpful to have horizontal scrolling in this case, but it should ONLY scroll enough to be able to see the picture, and no further.

Does this make sense? Let me know what I need to clarify…

I’ve tried doing combinations of min-width and overflow-x on the body and header, but can’t seem to find a solution that works.

Thanks!
Jeff

Answer 1

Use <link rel="stylesheet" media="handheld" href="%%%.css" type="text/css" /> to target the handheld devices, and set the overflow-x to auto in the handheld stylesheet. Or use JavaScript to load a stylesheet based on scren res

<script type="text/javascript">
  if (screen.width < 1024) 
</script>