Tagged: ,

Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #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 with

    http://georgeorbelian.org/masonry-portfolio-test-two/

    Thanks George

    #178996

    Hey 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,
    Yigit

    #179195

    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

    #179313

    Hi!

    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!
    Ismael

    #179365

    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

    #179601

    Hi!

    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,
    Yigit

    #179929

    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

    #180054

    Hey!

    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,
    Ismael

    #180373

    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

    #180388

    Hi!

    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,
    Yigit

    #180398

    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

    #180623

    Hi 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!
    Yigit

    #180754

    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

    #181097

    Hi, 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).

    #181107

    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

    #181714

    Hi!

    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 said

    I 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

Viewing 16 posts - 1 through 16 (of 16 total)
  • The topic ‘Full Width Masonry – Display Title – Mouse Over – iPhone – iPad’ is closed to new replies.