Jim R Posted November 4, 2017 Share Posted November 4, 2017 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%); } Link to comment Share on other sites More sharing options...
Jim R Posted November 4, 2017 Author Share Posted November 4, 2017 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. Link to comment Share on other sites More sharing options...
Jim R Posted November 4, 2017 Author Share Posted November 4, 2017 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.