Mobile logo Centered

Hi I want to center my logo on mobile devices. Website www.afscmemd.org

 

Hello,
Paste the following code in your Custom CSS
(Appearance -> Theme Options -> Styling Options -> Custom CSS)

Code:

@media only screen and (max-width: 767px) and (min-width: 480px)
{
.header .logo img {
margin-left: 150px;
}
}
@media only screen and (max-width: 480px){
.header .logo img {
margin-left: 85px;
}
}

You can adjust the values of margin-left as per your requirement.
This will solve your issue.

 

Thanks, but this did not work? I want the website to look the same as on a pc as is does on a mobile device

 

Please specify your issue with the help of screenshot that where your want the logo to be place on PC as well as on Mobile Phone.

 

I want to center the logo and align left the social media icons.
file://localhost/Users/sakiataylor/Desktop/photo.PNG
Thanks so much for your help!

 

Hello,
Paste the following code in your Custom CSS
(Appearance -> Theme Options -> Styling Options -> Custom CSS)

Code:

.header .logo {
margin-left: 322px;
}
@media only screen and (max-width: 960px) and (min-width: 768px){
.header .logo {
margin-left: 200px;
}
}
 
@media only screen and (max-width: 767px) and (min-width: 480px){
.header .logo {
margin-left: 0px;
text-align: center;
}
.topinfobar .socialicon {
text-align: left;
margin-left: 20px;
}
}
 
@media only screen and (max-width: 480px){
.header .logo {
margin-left: 0px;
text-align: center;
}
.topinfobar .socialicon {
text-align: left;
margin-left: 20px;
}
}

You can adjust these values of margin-left according to your requirement.
This will solve your issue.