Comic overflowing off the side of the page

You Control The Horizontal, You Control The Vertical

Posted by

So here you are, queuing up the latest updates for your webcomic, and you get to an image that’s wider than usual. Most likely: normally you post a single page at a time, but today you want to do a double-page spread.

How’s it going to look on your website?

…well, if your comic is on a hosting service like Webtoon or New SmackJeeves, you’re stuck with their default layout, and everything that’s too big will just get shrunk to fit. They control the horizontal, they control the vertical, do not attempt to adjust the picture, etc, etc.

(Image: auto-resized comic in a New SmackJeeves layout. Click any image in this article to see it in Actual Size)

But if you have your own website, you have Options.

This post is about what the various comic-displaying options are, and how to make them happen.

Where you’re making it happen, exactly

To keep things simple, I’m focusing this post on creators who have a paid independent host for their webcomic, are running WordPress, and use either the Comic Easel or Webcomic 5 plugins.

(If your comic is on another host that lets you control the CSS — such as ComicFury or Tumblr — then you can still use the code explained here. You’ll just have to figure out where to apply it on your own.)

The default themes that go with those plugins are Easel and Inkblot, respectively. If you haven’t already, you’ll want to create a child theme — this includes a stylesheet with all the CSS for the specific look of your site.

Some example stylesheets, if you want to see the whole package: child theme for Easel, child theme for Inkblot. (I have one comic on each, so I’ll be using them for most of the examples in this post.)

If this is your first time working with CSS:

  • don’t worry, it’s easier than it looks!
  • you can start your child theme by copy-and-pasting all the original CSS from your parent theme, then make small one-at-a-time edits to each bit you want to change
  • there is an official, comprehensive, well-organized reference for Every Possible Thing You Can Do With CSS
  • these days you can test any change on-the-fly in your browser before uploading it to the site itself — search your browser name + “CSS inspector” for details

Okay, that should be enough background to start with! On to the specific Things You Can Do With Your Images.


Option 1: Shrink Extra-Wide Comics to Fit the Layout

You can limit the width of your images, so each one maxes out at the width of the div it’s in. (First-timers: “div” is short for division, and your parent theme will include a lot of them automatically.)

The result is that, if you upload a comic that’s wider than your layout, it’ll be auto-shrunk to fit.

(If all your comics are wider than your layout, either you need to re-think the layout, or you need to be uploading smaller image files. But that’s a whole other post.)

It’ll look something like this:

Comic shrunk to fit layout

The code that makes it happen:

All images, anywhere on the page:

img {
max-width: 100%;}

Limited to the comics (Comic Easel):

#comic img {
max-width: 100%;}

Limited to the comics (Webcomic 5):

.webcomic-image img {
max-width: 100%;}

Pros: the result is very neat and aesthetically pleasing!

Cons: if the comic is too extra-wide, it may be shrunk so much that it’s unreadable (or, even if it’s a no-text splash page, shrunk too much to appreciate all the details)

See it in action: double-page spread on But I’m A Cat Person

I auto-shrink large images in that layout, because if they displayed at full size, they’d be overlapped by the comic sidebar. To give readers a legible version, I put a thumbnail in the comic description that links to the full-size image file.


Option 2: Give the Comic a Horizontal Scrollbar of its Very Own

Instead of keeping the image within the div by resizing it, you can let it display at full-size…and tell the site that, if a comic is wide enough to overflow the edges of the div, it should get a scrollbar at the bottom.

Now it works sort of like an Instagram comic. Your readers can see all the art, full-size, without ever leaving the page — they just have to swipe.

Here’s how it looks:

Comic with a horizontal scrollbar

Here’s the code:

Comic Easel

#comic {
overflow: auto;}

Webcomic 5:

.webcomic-image {
overflow: auto;}

Pros: all the benefits of a full-size legible image, without breaking your layout!

Cons: readers who don’t notice the scrollbar (especially mobile users) may miss the right-hand side of the image

See it in action: extra-wide bonus strip on Leif & Thorn

That comic doesn’t have double-width spreads (dramatic strips are double-height, or even triple-height, instead), so over-wide images are extremely rare. I decided I liked the cool effect enough to put up with the very-occasional confused reader.


Option 3: Let It All Hang Out

Let over-wide images do what they do naturally. They’ll display at their original size, and if that hangs off the edge of the window, so be it.

This one is what browsers do by default! You just need to make sure there’s no code in your layout (such as Option 1 or Option 2) to override it, and you’ll get this automatically.

It comes out like so:

Comic overflowing off the side of the page

The only reason you should ever need to spell this out in your CSS is: if you have some other code applied to the page more generally, and when it comes to these specific divs, you want to override the override.

So here’s the code, just in case:

Comic Easel:

#comic img {
max-width: none;}
#comic {
overflow: visible;}

Webcomic 5:

.webcomic-image img {
max-width: none;}
.webcomic-image {
overflow: visible;}

Pros: full-size legible image, with extra user-friendliness, because it’s easy to see the image going off the page and scroll accordingly

Cons: might break your layout in a funny-looking way

See it in action: extra-wide update from Stand Still Stay Silent

That series has a ton of extra-wide images, so the layout is specifically designed in a way that won’t look broken or odd when it happens. If your comic puts you in a similar situation, this is probably the way to go.


Other Fun Layout Things To Do While You’re At It

If you’re running Webcomic 5, the CSS above is broad enough that it’ll affect all the places where comic images are displayed. That includes search results and storyline archives.

If you want to get different effects on different kinds of pages, that’s easy to do! Your code just has to be a little more specific. Here’s what I use on Leif & Thorn:

Webcomic 5, fine-tuned code:

/* Only affects individual webcomic posts */
body.single .webcomic-image {
overflow: auto;}

/* Only affects storyline-archive & search-results pages */
body.archive .webcomic-image img,
body.search-results .webcomic-image img {
max-width: 100%;}

Feel free to mix-and-match different properties on different pages, to get whatever vibe you like best.

If you’re running Comic Easel, it uses thumbnails for search results and storyline archives. Those aren’t the original image file displayed at a smaller size, they’re new, tiny files that are auto-generated by WordPress — so there’s no worry about them being too big for the layout.

The downside is, if you think they’re too small (or if you don’t like the way they’re cropped), that’s not something that can be easily fixed with CSS.

There is, however, a behind-the-scenes process you can go through that may help! I did this for But I’m A Cat Person recently, so I’ll include it here too:

  1. On your dashboard, visit Setting -> Media
  2. In the “Thumbnail size” section, raise the maximum size as you like (but not too big, or it’ll screw with other parts of the site that use thumbnails; on BICP, I went with a limit of 190px wide or 300px tall), and uncheck the “Crop thumbnail to exact dimensions” box
  3. Hit Save Changes to make sure it gets saved
  4. If you already have comics posted, WordPress won’t automatically create new thumbnails for them, so get yourself a plugin that’ll make it happen (I used Regenerate Thumbnails, which I had to run twice for some reason, but the second time it converted them all)

And that’s a wrap!

Hopefully that covers all your how-to-display-extra-wide-comics needs.

Questions? Requests for follow-up? General feedback? Spotted a typo? Drop a comment, let us know.

Got another category of “webcomic site design and/or tech support” that you could use a helpful post about? Comment about that too! Who knows, maybe they’ll invite me back to do another.