Tagged: ,

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • April 26, 2017 at 2:15 am #783210
    scottgroves73

    Hi Team,
    Testimonial Circle Images Rotating Sideways on Mobile (safari)

    Looks fine on Chrome but 90 degree rotation to right on safari.
    Looks fine on desktop across all browsers – it’s just this ONE error.

    Suggestions?

    Thanks

    April 27, 2017 at 3:02 pm #784045
    Victoria

    Hey scottgroves73,

    I checked today, did not see any rotation, the images just get bigger. DO you still have this issue?

    Best regards,
    Victoria

    April 28, 2017 at 6:18 am #784297
    scottgroves73

    Hey Victoria,
    Yes still having the issue.

    You won’t see it on desktop or android based mobiles.

    See attached screenshots from iphone 5. It’s turning testimonial images right 90 degrees in Chrome and Safari on iphone.

    May 1, 2017 at 7:45 am #785566
    Ismael

    Hi,

    That’s weird. I’m not sure why it would rotate like that. Do you have any extensions or plugins installed in your browser? Please try this code in the Quick CSS field.

    .avia-testimonial-image img {
    border-radius: 100px;
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}

    Best regards,
    Ismael

    May 5, 2017 at 1:19 pm #788367
    scottgroves73

    Hey Ismael,
    Tried the Quick CSS code and it didn’t change a thing.

    It’s not limited to one browser – it’s iPhone 5C and affected in Google Chrome and Safari

    I’m stumped!!!

    May 5, 2017 at 5:42 pm #788557
    Victoria

    Hi scottgroves73,

    Try this code:

    
@media only screen and (max-width: 767px) {
.avia-testimonial-image img {
    -webkit-transform: none; /* Safari and Chrome */
       -moz-transform: none; /* Firefox */
        -ms-transform: none; /* IE 9 */
         -o-transform: none; /* Opera */
            transform: none;
    }
}
Make sure to flush the cache.
Best regards,
Victoria
    May 5, 2017 at 5:42 pm #788558
    Victoria

    Hi scottgroves73,

    Try this code:

    
@media only screen and (max-width: 767px) {
.avia-testimonial-image img {
    -webkit-transform: none; /* Safari and Chrome */
       -moz-transform: none; /* Firefox */
        -ms-transform: none; /* IE 9 */
         -o-transform: none; /* Opera */
            transform: none;
    }
}
Make sure to flush the cache.
Best regards,
Victoria
    May 7, 2017 at 4:19 am #789018
    scottgroves73

    Hi Victoria,
    I tried that. Purged the cache. Refreshed – still error appearing on safari and chrome as rotated 90 degrees.

    I then tried removing the previous code of :
    .avia-testimonial-image img {
    border-radius: 100px;
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    }

    and just using what you provided and still the same error appearing.

    Are you getting this anywhere else? This is so weird!!

    Any other suggestions for a fix?

    Thanks for following up

    May 7, 2017 at 8:41 pm #789174
    Victoria

    Hi scottgroves73,

    I only got it on my iPhone. Nowhere else, it’s really a weird issue :(
    Let’s hack it!

    If it rotates 90 degrees, let’s add another 270 and see what happens, have tried it already?

    
@media only screen and (max-width: 767px) {
.avia-testimonial-image img {
    -webkit-transform: rotate(270deg); /* Safari and Chrome */
       -moz-transform: none; /* Firefox */
        -ms-transform: none; /* IE 9 */
         -o-transform: none; /* Opera */
            transform: none;
    }
}

    Please, try this and let me know what happens.
    Best regards,
    Victoria

    • This reply was modified 7 years, 7 months ago by Victoria.
    May 8, 2017 at 12:42 pm #789506
    scottgroves73

    Hi Victoria,
    I am happy to try this to see if the code works as the others have made no difference.

    The only problem with this solution is 2 out of 6 images are fine, 4 out of 6 are wrong.
    So by applying this, I will likely just fix the 4 then rotate the other 2 that are now correct.

    Will try it and let you know – thanks!!!
    Scott

    May 8, 2017 at 1:12 pm #789535
    scottgroves73

    Hi Victoria,
    Trying to hack the code with 450 degree didn’t work either.

    I have also tried deleting the image altogether from the media library.

    Uploaded image again. Check it was perfectly square at 397 x 397px.
    Refreshed in between so I could see page without image in it. Added image. Refreshed again.
    And still the same error is persisting.

    I’m at a total loss now!!!

    Happy to send you wp-admin details if you give me an email to add

    May 8, 2017 at 1:36 pm #789561
    Victoria

    Hi scottgroves73,

    Did you try the 270? I think 450 was wrong and I edited the code in a minute from posting it.
    Yeah, if you don’t mind, you can create a temp admin role and post credentials in private box below. You can use any email for that :)

    Best regards,
    Victoria

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.