Moving Phone info on Mobile

Hey Kriesi,

This may be outside the scope of support, but I wanted to ask anyways.

I have set my child theme to “logo left, menu below” – I then went into the “helper-main-menu.php” and just inside the “inner-container” div I’ve added a phone number with a class called “phoneInfo”.

I’m using CSS to set the position of the phone # (I want it to align with the bottom of the “inner-container” div) and have accomplished this for desktop by setting the position to relative and moving it down. (I also moved the “social icons up by changing your setting from top:50% to top: 10%)

The problem is that when the site is viewed on a cell phone – the moving of the “phoneInfo” div (that I created) caused it to sit behind the collapsed menu box and makes the phone # not completely visible.

Is there a way to tell it to detect mobile advice – and then position itself at the top – and centered.

I’m not very proficient with PHP or Javascript – so if there’s a way using the native functionality in the enfold theme – that would be the best. Basically I want my phone right and my logo left (not currently an option in the enfold settings).

Thanks in advance – and if this is outside of the scope of support, I understand.
********************************
Website is in dev mode and can be seen here: rob.proadinsight.com