There are two ways you could do it, but it would mostly likely involve editing the Easel Plugin so you can’t upgrade in the future. You can either switch the images using JavaScript, or by using the picture element. Requires CSS/PHP and maybe some JavaScript skills.

I can do a much longer post explaining how to do each method if you want (I’ve been working on a post here and there on how to make comics more responsive), but for now I only have a demo of using the picture element to make a comic responsive in a non WordPress setting, if you want to look at the markup and CSS.

There are a few different options. One is plugins like Jetpack which have options for activating a mobile theme on devices (see Jetpack’s tutorial.

There is also some notes for making a responsive site on this post and this one.

You have the advantage already that your comic is long, rather than wide, which tends to work better with mobile reading. Mostly what’s keeping things from resizing properly is that your page width (#page) is set to 1000px (change width to 100% instead), and you’ll need to use some media queries to re-style your header in mobile browsers so things could center properly. Same with some of your content below your comic – it looks like you’re using a lot of relative positioning that doesn’t play well when you have dynamically width content, so when your page content width starts getting below 1000px, the positioning of those items gets a little funky.

Playing with your site with chrome dev tools, I was able to get it to look something like this in mobile sizes:

Obviously it still needs work (some of the menu items were centered weirdly) – but if that’s the general direction of mobile layout that you like, I could show you what I changed to achieve that layout.

I did start work on a child theme at one point for Easel, you can find it here: https://github.com/sfrisk/-easel-responsive Last time I touched it was back in 2013 (then life got busy), so I’m not sure how up to date it is/compatiable with the Comic Press theme, but you may find it useful.

If you’re interested in integrating Comic Easel into other themes, I did post the theme for Monster Markup Manual (which I have unfortunately not updated in a long time – see above life stuff happened) on my github for anyone who wanted to use it as a reference for how I did things. I think most of the comic stuff is in index.php and files names “comic” It’s built using the Bones starter theme for WordPress http://themble.com/bones/

Look for stuff that says:

<?php do_action('comic-blog-area'); ?>

and that’s where I’ve inserted the comic onto the page.

Frumph also has a good tutorial here on doing that.

Hey, if you want to do a screenshot on the iPad, press and hold the sleep/wake button and then immediately press and release the Home button.

Also if you’re using Mac, you can use the Simulator application and take screenshots of your website emulating a variety of iOS devices

Mobile Reader vs Non Reader

iPad Reader vs Non Reader

(for some reason the webcomic wasn’t appearing in this view)

WordPress has an awesome tutorial on moving from the /wordpress/ directory to a different directory on the same server. Basically there are some steps you’re going to have to take to switch your urls in your database which you can handle within WordPress admin area and the help of some plugins, minus the actual file transfer. If you forget one of these steps they list, you might have to dig into your DB to fix the urls, but WordPress includes the SQL query you would have to use to fix that.

Move* not movie

You should have a file called main_style.css in your theme. Any modifications you’re going to make, shall be done from there.

So from a casual look at your source code, it looks like your home page has the class “no-header-page” attached to the body element, that you don’t see on any of the other pages. So you’ll have to key off any home page CSS modifications through “.no-header-page.”

Example:

As for the “pillar,” are you talking about the entire white area, or just the stuff under the menu? If so, any changes you want to make will be made using the selector “.no-header-page #main-wrap .container”. In the example below, you can see me using it to make the background of the main content pink.

Example

If you want a background image, instead of writing “background: pink;” link I did, you would write “background: url(PATH_TO_YOUR_IMAGE)” (although if your image is big enough for the space, and you don’t want it to repeat, write “background: url(PATH_TO_YOUR_IMAGE) no-repeat”

Example:

You can find additional information on the background rule for css as the Mozilla CSS Reference Site. Hopefully this has helped you, although if you need me to explain anything in more depth, let me know.

• This reply was modified 9 years, 6 months ago by Sarah Frisk.