Horizontal scroll CSS

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

0x60 · Accepted Answer · 2011-02-12 00:49:20Z

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>

answered Feb 12, 2011 at 0:49

0x60

1,0965 gold badges15 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jeff Over a year ago

Ah, this is a pretty good solution, thanks! My only complaint would be that I don't think this will work if I simply resize my browser window, but that's not a huge concern.

Ricardo Zea · Accepted Answer · 2012-05-02 17:47:24Z

1

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:

answered May 2, 2012 at 17:47

Ricardo Zea

10.3k13 gold badges81 silver badges82 bronze badges

Collectives™ on Stack Overflow

Horizontal scroll CSS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related