Full Width Masonry – Display Title – Mouse Over – iPhone – iPad

Hi Yigit,

Thanks for the css, I pasted this into the quick css on my style control panel
@media only screen and (max-width: 480px) {.avia_desktop .av-caption-on-hover .av-masonry-item-with-image.av-masonry-entry:hover .av-inner-masonry-content { opacity: 0!important; }}

Saved it and then refreshed my iPad and saw no effect. Maybe I’ve done something wrong — please advise.

Best regards,
George

Hi Ismael,

Thanks, I have cleared the cache in the iPad safari browser and I still
have the same results. I will try a few other things to see if I can
solve this issue, since yes Yigit’s css should work.

Best regards, George

Dear Yigit,

Thanks for the new CSS I pasted
@media only screen and (max-width: 989px) {.avia_desktop .av-caption-on-hover .av-masonry-item-with-image.av-masonry-entry:hover .av-inner-masonry-content { opacity: 0!important; }}
into the quick css box on my styles control panel, It had no effect on the iPad. I then decided to see if I could make the hover disappear by using the settings in the fullwidth masonry control panel, I set the element title and excerpt drop down to display neither. I then refreshed my iPad and saw what I am looking for. Of course this does not solve my problem but it did confirm that at least my iPad is responding to changes. I do not know what I can do to help solve this iPad hove problem. I wish it was easier — please advise if you have any ideas of some things I could test.
I am using a child theme and I even pasted the css into the styles.css file to see if that would have any effect. I even took the css out of the quick css box for this test, to see if it had an effect. I also switched back to the parent theme and applied css to the quick css box and it again had no effect.

Best regards — George

Hey Thanks Ismael,

I tried both and did not have any success. Even after clearing the cache etc.
It’s ok — I’m not to concerned about the mouse over on the iPad. I’m getting used to it being on all the time — If your
team can not find a solution, I will design around it, but I bet you can find a solution. I went to http://kriesi.at/themedemo/?theme=enfold
to the masonry portfolio sample and saw that it did the same ting on my iPad — do you have the settings for that portfolio sample set display title, “always display” or “display on mouse over” I’m just curious.
Anyway! thanks for your support and I hope a solution is found.

Best regards,

George

Thanks for checking that Yigit, I refreshed the cache again and it works now. It is interesting though, when I’m holding the iPad in the portrait position, the hover is gone, when I turn the iPad to the landscape position, the hover revels itself.

Anyway — Thanks again for your great support.

Best regards,

George

Thanks Yigit! That did the job.
Now that this is solved, I have a related question. When I tap on the image on the iPad or iPhone, I expect the title to display, as it would if I was mousing over it on a desktop or laptop. This does not happen, is this behavior intended? Could the css I just placed in the quick css box be masking a javascript css issue? Just a thought — it would be great to know. Thanks again for your support.

George

Hi edebe — Thank you for your thoughts — I have decided that the title and description showing on mobile is not so bad. The enfold theme has made my life so much easier, that I can not complain about the little details and I’m sure they have many things to work on.

Cheers,

George