Modifying the website for mobile usage

After publishing my website under domain, I requested feedback from a range of gender and ages, asking what they thought of the website and accessibility. The people who viewed the website from a windows or apple computer system had very positive feedback about the layout and simplicity of using the website, however people accessing the website off a mobile device and also iPad/tablet device have informed me the layout is very conflicting and messy.
Therefore upon this I accessed my website builder, and was able to edit the website through the view of a mobile/tablet. The website was a mess, with the logo being down the bottom of the page, the link buttons being different sizes, scattered around the page, and the menu button being of the original template black and red theme. I was able to rectify all the mistakes quite easily, removing the colour theme and replacing it with my white, black and lilac/pink theme. I was also able to move the elements of the pages around, such as the logo and images to make this more useable for the mobile viewers. It is important to make sure the format of the website can be viewed correctly on any device, keeping consistent branding and layout representing my brand how it should be.

Below is a simulated view of the homepage viewed through a mobile/tablet device. It is now consistent, linear and the slide show is viewable from hand held devices. The menu bar is now transferred to a button format, placed in an easily accessible right hand corner, the side which the brain is often more attracted to visually.

When the menu is selected, a 70% opacity bar slides down, offering the menu simulated on the main desktop website. I used a grey shade, as I found the white to be a little too bright and over powering. I also added opacity because it doesn't detract from the images below, and offers the option to return to these images if that is required. The pink selection links to the small pink line in the logo and ties in colour theme and branding.