I need some assistance in figuring out what I need to do to get my site to look decent on mobile/tablet. I got the site looking the way we wanted on the desktop but a lot of things seem to be out of whack on mobile & tablet and I am definitely not proficient in my mobile design skills. http://www.organizeyourlifestyle.com
1) the topbar is gone, and my client’s contact info is in the topbar. Is there any way to either have a mobile topbar or to maybe move the topbar info to within the menu?
2) the spacing in the two text boxes on the home page looks odd when look at it vertically. Horizonally it’s fine, but with vertical orientation the text looks very choppy.
3) the virtue icon flip boxes are sized/spaced strangely. On the desktop, I have padding between each box but that disappears on mobile and they seem to be overlapping.
4) the footer – is it possible to have the footer set up with two columns for desktop and just have everything centered in one column for mobile?
5) if you click on the “services” page – under declutter & organize, I couldn’t figure out how to get the layout set up the way my client wanted – she wanted those two columns with bullet points exactly as show on desktop so I just made them into a jpg for the time being. While it’s not great, it works for now. However, that whole section looks narrow and size strangely on mobile. I’m sure it has to do with some CSS I added when trying to figure out how to make those columns but I’m not sure what.
On this same page, there are 3 flipping boxes. On mobile, vertically these look fine. However, on horizontal, some of the boxes overlap. It is the opposite on tablet – they look fine horizontally and overlap when vertical.
6) how can I center all of the page titles on mobile? They are centered on desktop but show left-aligned on mobile, only when verticle.
Fortunately it’s a small site so there’s not too much I need to to tweak. Thank you in advance for any help you can give me!