Homepage › Community Forums › Ally Theme Support › Logo image on iPhone
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
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
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.
Hi Wes,
I think the problem may be with the recommended image size for the logo.
http://cvrs-inc.com
Terri
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
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
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.