Mobile version top banner colors, logo

Hi!

I am having 2 problems with the mobile phone display version of my website, and 1 problem with the desktop version of my website.

Here is my website: http://www.toptierconfections.com
Here are pictures of my problem: https://docs.google.com/document/d/1CHaT_uYoaxB5-NIXACm2FrHq7l6V4WDrz27C-xb61Iw/edit?usp=sharing

On the mobile app:
1. the color of the top banners is pink (instead of purple, like I have it set to be on my desktop) or sometimes pink and purple.
2. On my homepage, the logo displays as a circle and blocks some of the content on the pages, instead of staying on the header bar.

On desktop site:
The legacy widget at the bottom does not allow me to alter the font size of the text, so in my contact information, the email is too long on certain screens and wraps down to the next line. When I use the appearance>customizer>theme settings>footer to alter the number of columns in the footer to be 1 instead of 4, it won’t save and says “invalid value” for the number of footer columns. How can I make the text smaller or change the number of footer columns?

Thank you so much.