Menu Distorts Page On Mobile Devices And Creates White Space On The Right

I am not a web designer per se. I am a copy writer and animator studying at college at the moment. However I am teaming up with a friend of mine who is a graphic designer and websi

Solution 1:

The problem isn't the menu, per-se, but the fact that it isn't responsive (the entire site isn't responsive). Even the content below is all squished in mobile.

I would highly suggest you rebuild the site on a responsive platform like Bootstrap or Zurb Foundation and take a look at their grid system for your content blocks and carousel, and the mobile menu for mobile fall-backs.

A pitfall you have is also all of your CSS is embedded on each page, rather than calling a unified CSS file. This makes maintenance a nightmare as when you update CSS, you have to update every page.

Another thing you should do is make shared assets be includes. This would require changing your HTML to PHP (PHP includes are what I would suggest anyway). You can do that for the menu and footer.

There is, unfortunately, no quick fix for the menu because it's not really the root of the problem right now.

To make your site responsive, you need to add this in your header: <meta name="viewport" content="width=device-width, initial-scale=1">.

Then you need to set media queries (see http://cssmediaqueries.com/what-are-css-media-queries.html) to hide the current menu and show a mobile fallback.

I would also set the mobile breakpoint to have #cell1, #cell2, and #cell3 be 100% width in mobile so those grids can be easily viewed.

There is an easy tutorial here on how to make a simple dropdown menu for mobile. That would probably be the best method for you right now.