Ok, I had a user view my forum on their mobile device after the “enable mobile theme” save, and the distorted image issue still remains. Below, please find a vertical, and a horizontal screenshot. The vertical is still an issue while the horizontal is a little better but still an issue with some images. Maybe this is common place? Just curious. Please let me know if this is typical or if there is something that I can do to prevent this. Thank you.
You can view the forum here.
Personally I have no idea why your site comes out looking like this. This site doesn’t – nor do other sites using SP I have looked at.
Are you using some sort of WP theme/plugin/framework that is trying to format for mobile use?
Couple of things.
It appears you are using the same Simple:Press theme for mobile and non mobile devices. Default – Cool-Blue.
If that is the case then you can turn off the Mobile theme support in Simple:Press. Unless you actually have a different SP theme you want to use on a mobile device they won’t see any difference.
The other is that you have a meta viewport setting on your site that is:
<meta name="viewport" content="width=device-width, initial-scale=1.0"> What is happening is that you are forcing the width to shrink down to the size of the mobile device's screen. When it does that it distorts the larger (wider) images. Easiest way for you to see how it is getting distorted on a PC is to drag your browser window down to a small size. If the viewport setting is something that your WP theme is putting in you may want to remove it. If your WordPress theme has an option to change from a fluid to a fixed width setting that might fix it also.
Yellow, Brandon,
The only mobile-related tool that I use is the SP Mobile Theme option, which I just disabled after reading Brandon’s comment. I have investigated the possibility of an easy modification to the viewpoint setting and my theme doesn’t state it anywhere noticeably. Is this an edit that can be made in my theme’s style.css? If not, where would I make the modification so that my theme is fixed width? Thank you in advance for your help.
if your theme is doing the viewport stuff, look in the theme headers.php file or perhaps the functions.php file..
Mr Papa, Brandon, Yellow,
The line of code is in my header.php file.
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
Do I just remove, or edit that line of code? I guess my question is, how do I make it a fixed width theme?
Unfortunately, that didn’t fix the issue. 
Only some of the images are unaffected when zooming in. Most images are still distorted. Any ideas?
pdgreenough said
Do I just remove, or edit that line of code? I guess my question is, how do I make it a fixed width theme?
If your theme has no options for fluid or a fixed width you can try editing your WP theme’s CSS file.
If you edit your /themes/admired/style.css and add something like
width: 1275px;
to the
body {
element that should force it.
Hi Brandon,
In my theme’s style.css file. If I understand correctly, I will edit the following:
from:
body {
background: #fff;
line-height: 1;
To:
body {
background: #fff;
line-height: 1;
width: 1275px;
That still didn’t work. Any ideas?
Well, not to diss on your WP theme but it has several body elements in it which makes it a little harder for you to find and change things.
Look for the body element that has this
Brandon,
Thanks for the advise but it looks like nothing is working here. I added the width code where necessary and my theme is still squeezing images when zooming in. I’m not married to my theme. What theme does this simple:press forum here use?
did you mean wp theme or sp theme? andy answered sp theme, but the wp theme you can see in our footer though its customized by us…
I meant wp theme but now that you mention it, I’m open to using a different sp theme as well. Please let me know what you recommend and I will plan accordingly. I look forward to hearing from you. Thank you.