Mobile Responsive Issues

When I pull up my site on mobile it looks off center. I switched out the contact info in the right top corner with social media icons based on a previous post. I want the logo to be bigger on the computer header, but also be centered on the mobile as well. When I change the logo to the size I want on the computer, it throws everything off. When I made it the suggested size, it was still off center. It is currently the size I want it to be, bigger than the suggested size. Can I get everything centered? Also getting an error that says the page has become unresponsive.

http://joydesignonline.com

 

Hello,

Please provide us some edited screen indicating your issue.
If you are unable to create screenshots then you can use www.screenpresso.com that will help you to create screenshots.

Thanks,
Praveen

 

See posted above. See how my logo and social media icons are off center? And then the page is unresponsive, none of the links click through.

 

Also these are screenshots from my phone.

 

Hello,

Please paste the code given below in Custom CSS section
(Appearance -> Theme Options -> Styling Options -> Custom CSS) of your dashboard.

Code:

@media only screen and (max-width: 767px) and (min-width: 480px){
.header_wrapper .logo img {
  margin-top: -38px !important;
}
.header_wrapper .call-us {
  margin-left: 93px !important;
}
}
@media only screen and (max-width: 480px){
.header_wrapper .logo img {
  width: 100% !important;
  margin-left: -40px !important;
}
.header_wrapper .call-us {
  margin-right: 50px !important;
}
}

Thanks,
Praveen

 

Perfect!! Thank you so much!