-
AuthorPosts
-
October 22, 2013 at 4:11 am #178838
Hello Team,
While using full width masonry on a page with the settings set to overlay activated/display title/display on mouse over — on iPhone5 and iPad both iOS7 the “display title” remains open by default — I’m wondering if there is a setting or way to have the overlay hidden on these devices when the page opens.
Here is a link to a dev page i’m working withhttp://georgeorbelian.org/masonry-portfolio-test-two/
Thanks George
October 22, 2013 at 12:04 pm #178996Hey georgeorbelian!
Please try adding following code to Quick CSS in Enfold theme options under Styling tab
@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; }}
It will not be visible on screens smaller than 480px. You can adjust it if you would like to hide it on bigger screens as well
Regards,
YigitOctober 22, 2013 at 7:13 pm #179195Hi 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,
GeorgeOctober 23, 2013 at 1:33 am #179313Hi!
Yigit’s code should work. Please remove browser cache then reload the page.
@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; } }
Cheers!
IsmaelOctober 23, 2013 at 2:39 am #179365Hi 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
October 23, 2013 at 11:21 am #179601Hi!
The code was for screens smaller than 480px. Please try following if you have not solved already
@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; }}
Regards,
YigitOctober 23, 2013 at 8:59 pm #179929Dear 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
October 24, 2013 at 4:14 am #180054Hey!
My bad! The code is incorrect. Please use this:
@media only screen and (max-width: 989px) { .av-caption-on-hover.av-masonry-item-with-image.av-masonry-entry:hover.av-inner-masonry-content { opacity: 0!important; } }
Or try this:
@media only screen and (max-width: 989px) { .av-inner-masonry-content.site-background { opacity: 0 !important; } }
Best regards,
IsmaelOctober 24, 2013 at 8:57 pm #180373Hey 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
October 24, 2013 at 9:35 pm #180388Hi!
I just checked your website on my iphone4 ios7 and titles do not display on masonry gallery element http://i.imgur.com/RKqR0Tl.jpg
Please try removing browser cache on your devices.Best regards,
YigitOctober 24, 2013 at 10:04 pm #180398Thanks 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
October 25, 2013 at 12:36 pm #180623Hi George!
That is because title set not to display on screen sizes smaller than 989px. You can switch that value to 1024 and it should hide it on landscape mode as well
Cheers!
YigitOctober 25, 2013 at 5:57 pm #180754Thanks 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
October 26, 2013 at 9:49 pm #181097Hi, The title and description appear as roll-over for monitor display correctly. But for mobile they just appear. (code above just makes them completely transparent).
I too am looking for the title and description to appear on tap one, Then tap again for link. Just like other roll-over items work on mobile (such as the menu).October 27, 2013 at 12:26 am #181107Hi 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
October 28, 2013 at 6:58 pm #181714Hi!
I am not sure how hard it would be to achieve, but you can request such feature here https://kriesi.at/support/topic/enfold-feature-requests/
And as George saidI have decided that the title and description showing on mobile is not so bad.
I’m considering this solved and closing the topic. Feel free to start a new one if you have any questions or issues :)
Regards,
Yigit -
AuthorPosts
- The topic ‘Full Width Masonry – Display Title – Mouse Over – iPhone – iPad’ is closed to new replies.