How to center logo in mobile view?

Question

I have been trying to center the logo in mobile view < 991px.. but no luck.

Website: http://test.themesresponsive.com

I tried the following: margin:auto and margin-left: 50%

Any ideas? Thanks

Answer 1

You can try to add this css code to the.logo container

float: none;
display: flex;
justify-content: center;

Answer 2

Try this for resolution smaller or equal to 1120px

@media (max-width: 1120px) {
  div.logo span,
  div.logo a {
    display: block;
    width: 50%; /* width and max-width of logo */
    max-width: 200px;
    margin-right: auto; /* margin auto to centrer logo */
    margin-left: auto;
  }
  div.logo a img {
    width: 100%;  /* full width within anchor */
    height: auto; /* keep aspect ratio of logo */
  }
}