Mobile Site Not Responding on iPhone Properly

Site URL: https://www.ridgemontpartners.com.au/

Hello,

I have a mobile site problem and it seems to only be occurring on the iPhone.

On the homepage, both sections that have 'flip cards' are not responding properly when clicked. They seem to stall, then half show the text/image and then display the text. Whereas, on a Samsung/Android phone, the cards flip from image to text perfectly.

Please see screenshots attached to view the area of my homepage that I am referencing. I will also share the code that I have used to create these flip cards below and the Youtube tutorial link that I used too.

SITE: www.ridgemontpartners.com.au
VERSION 7.1

HTML:

.design-layout-poster img{ transition: 1s}
.design-layout-poster:hover img{transform: rotateY(180deg); transition: 1s} 
.image-card-wrapper{transform:rotateY(180deg)!important; opacity:0; transition: 1s;}
.design-layout-poster:hover .image-card-wrapper {opacity:1!important; transform:rotateY(0deg)!important; background: #ebe6e6; transition: 1s;}

@media only screen and (max-width:640px){ .design-layout-poster img{ transition: 1s} .design-layout-poster:active img{transform: rotateY(180deg); transition: 1s}
.image-card-wrapper{transform:rotateY(180deg)!important; opacity:0; transition: 1s;} .design-layout-poster:active .image-card-wrapper {opacity:1!important;  transform:rotateY(0deg)!important; background: #ebe6e6; transition: 1s;}}

Taken from: 

(Backup code before replacing new code)

Try replace above code with this code

.design-layout-poster img{ -webkit-transition: 1s; -o-transition: 1s; transition: 1s}
.design-layout-poster:hover img{-webkit-transform: rotateY(180deg);transform: rotateY(180deg); -webkit-transition: 1s; -o-transition: 1s; transition: 1s} 
.image-card-wrapper{-webkit-transform:rotateY(180deg)!important;transform:rotateY(180deg)!important; opacity:0; -webkit-transition: 1s; -o-transition: 1s; transition: 1s;}
.design-layout-poster:hover .image-card-wrapper {opacity:1!important; -webkit-transform:rotateY(0deg)!important; transform:rotateY(0deg)!important; background: #ebe6e6; -webkit-transition: 1s; -o-transition: 1s; transition: 1s;}

@media only screen and (max-width:640px){ .design-layout-poster img{ -webkit-transition: 1s; -o-transition: 1s; transition: 1s} .design-layout-poster:active img{-webkit-transform: rotateY(180deg);transform: rotateY(180deg); -webkit-transition: 1s; -o-transition: 1s; transition: 1s}
.image-card-wrapper{-webkit-transform:rotateY(180deg)!important;transform:rotateY(180deg)!important; opacity:0; -webkit-transition: 1s; -o-transition: 1s; transition: 1s;} .design-layout-poster:active .image-card-wrapper {opacity:1!important;  -webkit-transform:rotateY(0deg)!important;  transform:rotateY(0deg)!important; background: #ebe6e6; -webkit-transition: 1s; -o-transition: 1s; transition: 1s;}}

On 12/1/2021 at 4:27 AM, tuanphan said:

(Backup code before replacing new code)

Try replace above code with this code

.design-layout-poster img{ -webkit-transition: 1s; -o-transition: 1s; transition: 1s}
.design-layout-poster:hover img{-webkit-transform: rotateY(180deg);transform: rotateY(180deg); -webkit-transition: 1s; -o-transition: 1s; transition: 1s} 
.image-card-wrapper{-webkit-transform:rotateY(180deg)!important;transform:rotateY(180deg)!important; opacity:0; -webkit-transition: 1s; -o-transition: 1s; transition: 1s;}
.design-layout-poster:hover .image-card-wrapper {opacity:1!important; -webkit-transform:rotateY(0deg)!important; transform:rotateY(0deg)!important; background: #ebe6e6; -webkit-transition: 1s; -o-transition: 1s; transition: 1s;}

@media only screen and (max-width:640px){ .design-layout-poster img{ -webkit-transition: 1s; -o-transition: 1s; transition: 1s} .design-layout-poster:active img{-webkit-transform: rotateY(180deg);transform: rotateY(180deg); -webkit-transition: 1s; -o-transition: 1s; transition: 1s}
.image-card-wrapper{-webkit-transform:rotateY(180deg)!important;transform:rotateY(180deg)!important; opacity:0; -webkit-transition: 1s; -o-transition: 1s; transition: 1s;} .design-layout-poster:active .image-card-wrapper {opacity:1!important;  -webkit-transform:rotateY(0deg)!important;  transform:rotateY(0deg)!important; background: #ebe6e6; -webkit-transition: 1s; -o-transition: 1s; transition: 1s;}}

 

Hi! Does this work on 7.1? For some reason I'm not sure how to create a poster image that works with this code.

On 8/27/2022 at 12:16 AM, hayleysb13 said:

Hi! Does this work on 7.1? For some reason I'm not sure how to create a poster image that works with this code.

When you add a section > Choose this > Then you can add an Image Block - Choose layout: Poster