Logo image on iPhone

Homepage › Community Forums › Ally Theme Support › Logo image on iPhone

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • June 26, 2015 at 1:01 pm #15992
    Terri
    Customer

      Thank you, Wes!

      I’m using an image logo, with specified size of the 360×164. On an iPhone 5, the top two thirds of the logo gets cut off in portrait mode. It’s fine in landscape view. What can I add to the CSS to prevent the top half from getting cut off?

      Terri

      June 26, 2015 at 6:55 pm #15995
      Terri
      Customer

        I’m still trying every which way to stop the logo image from getting cut off. My most recent attempt:

        1. Changed logo size in functions.php to 320 x 133,
        2. Uploaded new logo size using WordPress dashboard header image change, and
        3.Added the following to CSS….

        /* ———– iPhone 5 and 5S ———– */

        /* Portrait and Landscape */
        @media only screen
        and (min-device-width: 320px)
        and (max-device-width: 568px)
        and (-webkit-min-device-pixel-ratio: 2) {

        }

        /* Portrait */
        @media only screen
        and (min-device-width: 320px)
        and (max-device-width: 568px)
        and (-webkit-min-device-pixel-ratio: 2)
        and (orientation: portrait) {
        }

        /* Landscape */
        @media only screen
        and (min-device-width: 320px)
        and (max-device-width: 568px)
        and (-webkit-min-device-pixel-ratio: 2)
        and (orientation: landscape) {

        }

        I don’t have an iPhone 5 so can only go by what my client is seeing on her iPhone and she says it’s still getting cut off. I told her to clear cache and browser, but she’s still seeing a cut off image.

        Terri

        June 26, 2015 at 10:34 pm #15998
        Wes
        Moderator

          Do you have a link to the site? I would need one in order to examine everything and be able to see what’s going.

          I have an iPhone 5s, so I’ll be able to check once we make the adjustments to the code.

          June 29, 2015 at 11:23 am #16003
          Terri
          Customer

            Hi Wes,

            I think the problem may be with the recommended image size for the logo.
            http://cvrs-inc.com

            Terri

            June 30, 2015 at 10:57 pm #16008
            Wes
            Moderator

              When I check on the iPhone 5S the right side is cut off. Try adding this to the code around line 3261 –

              background-size: cover !important;

              So it should look like this in the end – 

              	.header-image .site-header,
	.header-image .site-header .wrap {
		background-position: center top !important;
		background-size: cover !important;
	}

              Once you do that, let me know so I can check on my phone. If you can provide a temporary login, I can get this figured out much faster without having to go back and forward. If I have a login, then I can try different variations of the code to get it working on my own…..which would be much faster, more convenient and save some time for you.

              Just let me know

              July 5, 2015 at 2:50 pm #16037
              Terri
              Customer

                Hi Wes,

                I added the line of code. If it’s still getting cropped off on your iPhone 5S I’ll see if I can get permission to give you access. Making the logo image less than the stated size and adding the above mentioned CSS for iPhone 5 and 5S worked on another site. However, I’m thinking there has to be an easier way, and one that allows for the recommended logo size.

                Terri

                July 5, 2015 at 6:12 pm #16065
                Wes
                Moderator

                  It’s still not showing right. I can definitely help get this fixed quickly if you’re able to give access. If not, then we’ll try some other solutions.

                • Author
                  Posts
                Viewing 7 posts - 1 through 7 (of 7 total)
                • You must be logged in to reply to this topic.