I've been struggling for a week trying to figure out why my media query isn't working properly. Even after all that time, the image still won't rotate when the screen size hits 1028 pixels.
The image is set on a red background of my website and I want it to change without rotation when it reaches 1028px. I followed the advice from the source below and used @media query to rotate with 0 degrees. It seemed like the right approach, but no matter what input I provide, the image doesn't respond. The @media query should be applying and the image should be rotating, but instead, when I minimize the screen to 1028 px, the image just moves from one container to another, which I find completely absurd!
I'm hoping someone can offer some guidance, and to help explain the issue, I've included screenshots:
https://i.sstatic.net/8wBsZ.png
https://i.sstatic.net/DyO0o.png
/* title-image */
.title-image{
width:60%;
-ms-transform: rotate(25deg); /* IE 9 */
-moz-transform:rotate(25deg);
-webkit-transform:rotate (25deg);
transform: rotate(25deg);
position: absolute;
right: 30%;
}
@media (max-width: 1028px){
.title-image:{
position: static;
transform: rotate(0);
}
}