The site in question is CitizenScienceQuarterly.com and it looks good in IE, Safari, chrome and firefox at least on the Mac. But when viewed in mobile safari it doesn’t resize properly.
One thing you can try is to add this to the <head> of your pages:
<meta name="viewport" content="width=device-width; initial-scale=1.0">
You can also try this in your style sheet:
body {-webkit-text-size-adjust: none;}
I tried to look at your site to see what was going wrong, but you have so much going on in that WP theme, it’s nuts.
But just to let you know, it’s not just a mobile Safari issue. It doesn’t re-size properly on anything, my Android, or even when I shrink the browser window on the desktop.
Your site doesn’t look like it really needs that over-complicated theme, why not just make your own lightweight one?
Thanks for the suggestions Ralph.m, I was already implementing the first option and the second had no effect.
@conqueror: What browser/os are you using to get the error on your desktop? Is there anything specific about the site that’s overcomplicated or are you referring to the breadth of the css?
Chrome and Firefox on Ubuntu. Shrinking the browser window, some things get re-sized, others don’t. Some elements get overlayed on top of others, like the sidebar obscuring the post titles. On my Android, it looks just like your screenshot.
Your site isn’t over-complicated, just that the WP theme you are using is, IMO. It looks like way overkill for what you need. It seems your site could be done with a more lightweight (and easier to troubleshoot) theme, that’s all.