Headers Centered, iPhone4s poor responsiveness, mobile optimizations

Hello,

I have a few questions:

Question 1
We have created headings with webtreats backgrounds on each of our pages; however, I had to use a margin-top: 20px to ensure the text was vertically centered on each. On mobile, they are no longer centered due to text wrapping and would get cut off – I ended up adding the following code to make the webtreat tiling larger on mobile, resulting in the text not being cut off:

@media only screen and (max-width: 767px) {
#aboutusheading {
height: 140px !important;
min-height: 0 !important;
}}

The issue is that the text is no longer vertically centered on mobile due to the wrapping varying from 1, 2, and 3 lines depending on which page is visited. Is there any code that can be added to ensure vertical centering on mobile? I have posted the web address in the private content section.

Question 2
I have checked our website on 7-8 different mobile devices and everything appears to look and function properly. On the iPhone4S, however, the grid layout photos captions being to wrap underneath the previous photo. Is there a workaround for this or is there a reason why this is only happening on the iPhone 4/4s? I have posted a photo in the private content section.

Question 3
Is it possible to not have the text in the circle menu on the homepage get larger or zoom? Also, when opening the page in a browser, if one reduces the screen width, the circle menu becomes distorted – is it possible to add code to optimize this or force photo stacking (similar to on mobile or at low width pixels) at an early time?

Thanks!