In here, talkingtree.org/media/suffusion/custom-styles.css you have some widths specified in pixels and the one that’s giving you the most problem is
#wrapper {
min-width: 1000px;
The wrapper is the outer most container that wraps everything including pics and the css rule above is forcing the whole page to never be under 1000px wide. Comment that out by doing this;
#wrapper {
/* min-width: 1000px; */
Being that it’s called custom-styles, I’m guessing it’s settings in the theme options page in admin. I’m thinking it’s something someone has added and not something that comes from suffusion theme.
Here’s more css that affects things.
#main-col {
width: 725px;
}
#wrapper {
width: 1000px;
max-width: 1000px;
min-width: 1000px;
}
I would comment out the min-width first and change main-col width to a percentage, 75-85%. You’ll have to play with it a little. Those two things will fix it.
Here’s a shot of what it looks like with those two items above taken care of. http://www.ozarkswebdesign.com/images/resp.png
Ctrl+Shift+m in firefox will give you mobile views. Chrome has it too and from what I’ve read it’s more properly rendered. Both browsers also have web inspector. Might have to get the addon for chrome. In firefox, it’s under Tools>Web Developer>Inspector. This opens up a panel either on the bottom or side of the browser and shows the source code for the styles. You might have to click on styles on that panel. A smaller panel within that panel has all your css and you can actually change it as viewed. It doesn’t change it permanently and a page refresh resets it but it’s good for nailing down what’s causing things to not look right or to just try things to see what they would look like. The above two tools are how I got that screenshot.
@cowlishaw: are you asking about how to make the size of the images appear smaller on the rendered site, OR about how to make the image files smaller? (I’m asking because that’s what Imsanity and the other plugins do…)
