Site content being cut off and layout issues

Question

First I'll say I've been lurking for quite some time on all the StackExchange sites, and now I've run into my first issue that I'm having trouble getting around.

I'm working on a live site - Beautiful & Abundant - and everything is working as it should on my desktop and tablet, however when I pull it up on my mobile (Samsung Galaxy S3) it gets all kinds of screwy.

Screenshots show landing as viewed on my phone. Just fine (albeit some crappy troubleshooting layout). The second image shows the sidebar extended out and that's the first area of puke. The sidebar is 235px wide and my phone has a display resolution of 360px wide. Doing some simple math, the sidebar should occupy 65.27 (repeating of course) percent of my screen. Unfortunately (as seen in the image) its only taking up about a third of the screen, not to mention the text is much smaller than I've set it to be.

The second area of concern (and most important) is the content being cut off on mobile. As seen in the third screenshot, it all just abruptly ends. I don't get it. I've never had this issue before.

The site is built on WordPress, however I don't think it's a WP issue specifically, which is why I'm posting here instead of on WordPress answers. If I should post there, please let me know and I'll be more than happy to move it.

I normally just work on something over and over again until I magically stumble upon a resolution, however I'm hoping to learn more about this collaboration thing I hear everybody talking about.

Thanks in advance everybody/anybody that offers assistance. I'm gonna go see if I can help anybody else while I eagerly await feedback!

EDIT

Thanks to @theftprevention, the sidebar and such is behaving properly, but I'm still getting the issue of content being cutoff on my phone. I'm going to see if anybody else around me has the same issue.

Answer 1

The site's responsiveness works fine when I resize the window in my browser, but you're right about the mobile site looking weird, and I think I know why.

If you have access to the page's raw HTML, then consider the following lines (lines 7 and 8 in the source of your homepage):

<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<meta name="viewport" content="width=device-width" />

Replace both of those lines with the following:

<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no" />

This should fix the way in which mobile & tablet browsers handle the scaling of your content. I couldn't reproduce the cutoff problem in your third screenshot on my phone, but these meta tags may very well fix that too.

Finally, you have not one , but two very large uncompressed images; they're 1.6 MB and 3.4 MB, respectively. You might consider using GIMP or something to scale them down and use proper JPEG compression when re-saving them.

Hope this helps!