Layout not fully cooperating in phone (under 600px) dimensions...

[Jim R]

On a screen 600px or greater, the page looks as I want it.  As it drops down to fit on phone screen, the school logo is askew up and left.  I've tried emptying my cache, but nothing I put in the @media tag affects the layout.  I even changed the Z-index so it would appear over the player image.  

 

When I inspect the page, it shows the regular CSS.  So it's kind of not even responding to that, some of it's the same.

 

 

http://grassrootsindiana.com/playerInfo/?%26nameFirst=Jesse&%26nameLast=Burdick&%26year=20&%26team=1

.schoolLogo img {

    max-height: 75%;
    min-width: 400px;
    z-index: -1;
    position: absolute;
    top: 60px;    
    right: 25%;
    ;
    opacity: .3;
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);

}

@media screen and (max-width: 600px) {
      .schoolLogo {

          top: 60px !important;

          z-index: 2;

}

}

 

.playerImage img {

z-index: 1;

padding-right: 10px;

padding-bottom: 10px;

height: 400px;

 

-webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 90%);

  mask-image: linear-gradient(to bottom, black 85%, transparent 90%);

}

Edited November 4, 2017 by Jim R

[Jim R]

Never mind.  I didn't have the 'img' after .schoolLogo.  I may eventually have another question about this (centering), but at least the page is now responding to the CSS.

[Jim R]

Yeah, centering:  

 

margin-left: auto; 

margin-right: auto;

 

 

That's not centering the image.  If you view the link in a phone's view, I'm using positioning coordinates on the school logo.