Our Team / header image off center on iPad & iPhone

Thought this would be good for the forum. On the 'Our Team' page I replaced the header image but it's not centering on an iPad or iPhone. Also, how do I rename that page to say 'About Us' in the url field?

Hi,

It's because of your image ratio, try to add the following css code at the end of css/small.tablet.css file:

Code: Select all

.entry-header > img,
#gk-header-mod img {
  margin-top: -30px;
  max-width: 100%;
}


Not sure where to find that - ? Sorry!!

You have to connect to your server using FTP client and edit wp-content/themes/Quark/css/small.tablet.css file. Try to add this code at the end of this filie.

Ahh, got it - but adding the code didn't solve the problem.

Try to change

Code: Select all

max-width: 100%;

to:

Code: Select all

max-width: 100%!important;


Image is now centered, but distorted. Attaching what I am seeing on an iphone, and then desired effect on monitor. Side note, image on Frontpage on phone has always been centered - curious why it would be different for other pages?

photo-1.jpg

photo-2.jpg

Remove my previous code from small.tablet.css and add the following into css/override.css or custom css plugin:

Code: Select all

.entry-header > img {
   height: auto;
  left: 50%;
  max-width: none !important;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
  -moz-transform: translateY(-50%) translateX(-50%);
  -ms-transform: translateY(-50%) translateX(-50%);
  -o-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
  width: 100%;
}


As usual, you're the man!!

Thanks!!