Wordpress Horizontal Scrolling - Possible with CSS?

Question

Is it possible to modify a theme's CSS to allow for horizontal scrolling in Wordpress?

I am thinking that the content container is what needs to be set to an extremely wide with? The content container still needs to be contained by my theme's wrapper width.

Here is the CSS coding from my theme:

#wrapper{width: 90%; max-width: 980px; margin: auto;}

#header-container{max-width: 95.918367%; padding: 2.127660%; margin: 0px auto 20px; background: #fff; border-bottom: 1px solid #ddd;}

#content-container{padding: 0px; margin: 0px auto 20px; background: #fff; border-bottom: 1px solid #ddd;}

#left-column{float: left; width: 63.265306%; padding: 20px 2.040816%;}
#right-column{float: right; width: 28.265306%; padding: 20px 2.040816%; border-left: 3px solid #f0f0f0;}

.portfolio #left-column{float: left; width: 69.387755%;}
.portfolio #right-column{float: right; width: 22.142857%; border-left: 3px solid #f0f0f0;}

#full-width{padding: 20px 2.127660%; margin: auto;}

#footer-container{margin: 0px auto; padding: 0px; background: #293037; overflow: hidden;}

.post-image img{width: 100%; height: auto;}

If this isn't possible, are there any other suggestions you all might have to create this in Wordpress? I am trying to make a site that scrolls in a similar way to this site: http://www.gouldevans.com/portfolio/ku-debruce-center I do not want the scrolling to take up the entire page though, I still want the scrolling information to be contained within a frame of some sort.

Any information would be greatly appreciated!

Answer 1

To answer your question... Yes, you can do this in Wordpress. Or any other HTML/CSS based application where you have the ability to edit the CSS.

The concept is fairly straightforward:

1. You have a wrapper container with overflow-x property set to scroll and a width of 100% of the viewport.
2. You have an inner container with your content with a width larger than the viewport.

With this scenario the horizontal scrollbars on your wrapper will be activated. You can apply the same concept to your Wordpress structure and CSS fairly easily. I've provided a trimmed down example below.

Caveats:

• overflow-x is a CSS3 property so if you're targeting browsers that don't support CSS3 you'll want to take another approach.
• I would recommend not modifying a Wordpress theme directly but create a child theme and override the styles.css file with it. Otherwise you face complications in the future when upgrading your theme. It's a fairly straightforward process and easily found with a quick google search.

Good luck!

.wrapper {
  width: 100%;
  overflow-x: scroll;
  padding: 0;
  margin: 0;
}
.container {
  width: 2000px;
 
}

img {
  float: left;
}

<div class="wrapper">
  <div class="container">
    <img src="http://fillmurray.com/200/200" />
    <img src="http://fillmurray.com/200/200" />
    <img src="http://fillmurray.com/200/200" />
    <img src="http://fillmurray.com/200/200" />
    <img src="http://fillmurray.com/200/200" />
    <img src="http://fillmurray.com/200/200" />
    <img src="http://fillmurray.com/200/200" />
    <img src="http://fillmurray.com/200/200" />
    <img src="http://fillmurray.com/200/200" />
    <img src="http://fillmurray.com/200/200" />
  </div>
</div>