Image is skewed...

[cepvi]

Non technical here reporting in.

Domain: thehockeycomic.com

Sometimes my images turn up like this:

Other times the images are sized appropriately.

When I refresh the above image, it fixes itself.

Thanks!

[kmhcreative]

I'm not able to reproduce it on iPhone or Android (or Chrome or Safari on desktop either), but I think I know what's happening. The distortion is because it is scaling the image only by width, ignoring the aspect ratio.

If there is a inline height set for the image there is nothing currently in the stylesheets to over-ride it (because you are using a theme that is already responsive you're not using ZappBar's "retrofit" over-rides for ComicPress). Width get's over-ridden by limiting it to the maximum width of it's container (which is, in turn, limited to the maximum width of the viewport on phone screens).

Wordpress has a built-in server-side browser/platform detection. Some themes use this to decide how various elements are coded. For example the "wp_is_mobile()" PHP function can be used to decide whether or not image height/width is inline coded or not. Since server-side detection is less than perfect it can accidentally serve up the wrong code to mobile devices, but refreshing the page often successfully detects that it's mobile and the on the reload it sends the page with the correct code (which will "fix" the problem). Anyway, that's my best guess as to what's happening and why it corrects after a reload.

There is a really simple solution to this if you're willing to edit the "comiceasel.css" stylesheet block starting at line 125, just insert height: auto; into it:

#comic img {margin: 0;
padding: 0;
max-width: 100%;
height: auto;  /* <-- insert this */
text-align: center;}

That should fix it and I don't think it will cause you any problems for the desktop browsers. However, when I turn the phone to landscape orientation the image stays at the portrait width with a lot of space to the left and right. If you actually want the image to fill the entire width while also maintaining the aspect ratio, in that same block above also add width: 100%; and if you REALLY want to force it to act this way add !important after each one, just ahead of the semicolon ending that line.

If that does fix it for you be aware that future updates could wipe out your edit, so you may want to duplicate that #comic img stylesheet block and put it in the child theme stylesheet.

[cepvi]

Thanks so much! Ill give this a try right now!

[cepvi]

Is that file in the Appearance > Editor in Wordpress? Or do I have to edit the file on the server itself?

[cepvi]

Found it! Adjusted. I will let you know the results. Thank you so much!

[kmhcreative]

I looked at your edits to the stylesheet and it's close but isn't going to work because the "!important" is in the wrong place - which will also prevent the "max-width" from working too. This is the correct format for adding an over-ride for both width and height while maintaining aspect ratio:

#comic img {
    margin: 0;
    padding: 0;
    height: auto !important;
    width: 100% !important;
    max-width: 100%;
    text-align: center;
}

And, again, to prevent this edit getting wiped out when the Comic Easel plugin is updated you should move the code above into your child theme's "style.css" stylesheet (you should use a child theme, they are how you prevent your customizations from being overwritten when the parent theme is updated).

[cepvi]

Ok, I have never done that, I will have to look it up. Im assuming google will show me the way on how to create a childs theme...

I will copy paste your information above into my code.

[kmhcreative]

Looking at the resources on your site it appears you are using the ComicPress 4.3 theme. The developer has a blank sample child theme you can download, install to your WordPress site, and then modify: http://frumph.net/downloads/comicpress-child-themes/

Future updates to the (parent) ComicPress theme, then, won't overwrite your modifications in the child theme.