Changing margins/padding on pages without screwing up mobile site.

Hello!

I’m trying to reduce the space at the top and bottom of my pages. When I do, the mobile version of my site becomes unreadable – the frame of the page no longer fits to the phone, so the text is very small. On the blog page, my widgets sit right below the displayed posts, but there’s a of of dead space between content and widgets on the regular pages, and I’d like to eliminate it.

Regular page:
amandabloom.com

Blog page:
amandabloom.com/category/writings/

Anyone have ideas? I’ve been tweaking the padding in this code in style.css:

.single .hentry, .error404 .hentry, .page .hentry, .search-no-results .no-results {
margin: 0 0 1.5em;
padding: 70px 50px;
width: 700px;
height: auto;
z-index: 10;
}