Horizontal scroll CSS

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 scro开发者_StackOverflowll 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

---

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>

---

My answer is a complement to 0x60's answer.

I recommend using CSS Media Queries instead of JavaScript to detect screen widths.

For example:

@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px){
/* Styles */
...
}

Check these articles out:

1. Media Queries for Standard Devices
2. How To Use CSS3 Media Queries To Create a Mobile Version of Your Website