Logo Centered in Mobile

Homepage › Community Forums › inSync Theme Support › Logo Centered in Mobile

Tagged: 

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • August 27, 2014 at 1:37 pm #13663
    August 28, 2014 at 12:34 pm #13682
    Eric
    Customer

      The logo/image itself is not centered. You have extra transparent space on the right side of your logo, so even if it did center it will always appear as if it’s showing up towards the left. So first remove the extra space on the sides using Photoshop or however you created the image, and make sure its perfectly centered.

      Next, to add the code to make it center on mobile devices, you can add the following to the appropriate responsive section (near the bottom of your css) – 

      .header-image .site-title a {
    background-size: contain !important;
}

      You can add it to the iPhone, or the tablet sections (they’re labeled)

      I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com

      August 28, 2014 at 1:35 pm #13685
      Jeff
      Customer

        Hi Eric,

        Thanks for the reply.

        I removed the extra transparent space on the right side of the logo and added the code you supplied to the iphone section of the stylesheet but still have the same issue.

        Just to be sure I explained myself properly the first time, I want the logo to float left on a desktop, which it does. I only want it to be centered for a mobile phone.

        Any additional assistance would be appreciated.

        Thanks,
        Jeff

        August 29, 2014 at 10:15 pm #13711
        Eric
        Customer

          Ok so it looks like the only thing left is to add the “center” code in the responsive section – 

          .header-image .site-title a {
    background-position: center top !important;
}

          If you add that to the iPad and mobile sections it should center.

          I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com

          September 3, 2014 at 1:34 pm #13760
          Jeff
          Customer

            Hi Eric,

            Thanks again for your assistance.

            I substituted

            background-position: center top !important;
            for
            background-size: contain !important;

            and it worked perfectly.

          • Author
            Posts
          Viewing 5 posts - 1 through 5 (of 5 total)
          • The topic ‘Logo Centered in Mobile’ is closed to new replies.