Ginny Walker Improvements

Project Scope: Ginny Walker Website: [login to view URL] Note: This website is LIVE. You will be working on the live website. Please do not duplicate the site and work on it offline or on a test location. Overview: There is some improvement needed on the mobile view of the website. I use [login to view URL] in Internet Explorer for testing; but you can use whatever tool you prefer. Tasks: 1) Please improve the POSITION of the mobile menu. You will see on the iPhone portrait view that it is hiding behind the logo. Right now, it is set in a random place in the green navbar area. Can we place it closer to the right side near the bottom of the green navigation area? I need to add social media icons & Phone/E-mail links later; so it is okay that there is empty green space above it for now. 2) When you click on the mobile menu icons, I prefer that the menu to be 100% wide. Also, it does not disappear when you have selected a page. 3) Please adjust the h1 css rules for the iPhone portrait view. When you go to "Transitional Products" located in the Store, you see how the header is too large to fit. 4) When you go to a Store item such as [login to view URL] There are 4 improvements that need to be made. a. There are circle graphics that show up in phone view that look way off the layout. My client prefers to have these circles smaller in size and positioned relative to the product image. The circle is best to overlap the product image a little; but we are flexible if it overlaps to the bottom left or bottom right. Note: I asked her about making them hidden; but we would like to try to keep them if possible. b. The social media shares are way off as well. If it's easy to do, let's have them show up to the top right of the yellow area. c. The price and "Add to Cart" can also flow below the social media shares, to the right of the yellow area. d. Please look at "Related Products" for the iPhone portrait. Do you see how the type is very big and looks strange? Perhaps we need to make each related product 100% wide. I have not tested the Related Products on other viewports. It is possible with your testing that we need that rule apply for iPhone landscape. Critical Information: 1) The main css file is custom-style-overrides.css. I use [login to view URL] during development; but you will see it empty, now that we are live. This is true for many of my websites using this bootstrap template framework. It helps me streamline the learning curve when you pick up on a project that someone else worked on. 2) Location of @ media files: I add @media code under each section. Some people put all responsive code at the bottom of the css file; but I prefer to have all code related to a section together. For example, to change the h1 styles under Task #3, you can place them in the same area as @media (max-width:500px) { img {max-width:100%;height:auto;} .left, [login to view URL] {float:none; margin: 0 0 20px 0; clear:both;} .right, [login to view URL] {float:none; margin: 0 0 20px 0; clear:both;} } .... which is located at Line 29 in the css file if you open it in Dreamweaver or Notepad. Thank you for your time! Mary