Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • March 14, 2015 at 2:20 am #411357
    auroradesignstudio

    Is there a way to disable the captions showing on images in a masonry gallery on a mobile device?
    In the gallery settings I have set captions to display on mouse hover only, rather than “always display”, but they are appearing on each image in the gallery when its viewed on a mobile device, which is problematic, as they are obscuring the images.

    Please view this page on a mobile device and you will see what I mean. http://www.studentartfund.org/portfolio-item/2015-grandparent-portrait-show-gallery/

    Is there a way to fix this and still keep them displaying on mouse-over on a computer?

    March 15, 2015 at 2:49 am #411631
    Andy

    Hi auroradesignstudio!

    try this code in Quick CSS:

    @media only screen and (max-width: 767px) {
.avia_desktop .av-caption-on-hover .av-masonry-item-with-image.av-masonry-entry:hover .av-inner-masonry-content {
opacity: 0;
}}

    Regards,
    Andy

    March 23, 2015 at 3:18 am #416174
    auroradesignstudio

    Andy,
    Thanks but this did not solve my problem. I placed it in Quick css under general styling. Still seeing the captions on the gallery images displayed in mobile devices. Any other fixes?
    Lynda

    March 24, 2015 at 1:37 am #416838
    Ismael

    Hi!

    The code above should work. Remove browser cache then reload the page. Use this to one to completely remove the caption on mobile device:

    @media only screen and (max-width: 767px) {
.avia_desktop.avia_transform3d .av-caption-on-hover .av-masonry-entry.av-masonry-item-with-image .av-inner-masonry-content { display: none; }
}

    Cheers!
    Ismael

    April 3, 2015 at 9:27 pm #423279
    auroradesignstudio

    Ismael,
    Back to trying to troubleshoot this issue and it’s still not working. I don’t know what I am doing wrong. I put the code in the custom css and cleared the cache on my ipad, but I still see the captions. Also, I am having a lot of trouble with the responsive design on tablets. In portrait mode I am still getting the main horizontal menu showing, even though I have set the mobile menu to activate on both smartphones and tablets, it is not activating on my ipad in landscape mode. Is there a way to fix this? Also, disabled the breadcrumbs, but they are still showing on the mobile devices.
    The site is: http://www.studentartfund.org

    Lynda Rae
    Aurora Design Studio

    April 5, 2015 at 3:03 pm #423645
    Ismael

    Hey!

    I checked the home page but I can’t see any masonry gallery element. Maybe you’re referring to the Portfolio Grid element? 

    @media only screen and (max-width: 767px) {.grid-content {
  display: none;
}}

    Try to add this to the Quick CSS field to fix the mobile menu:

    @media only screen and (max-width: 1024px) {
.html_mobile_menu_tablet .container #advanced_menu_toggle, .html_mobile_menu_tablet #advanced_menu_hide {
display: block;
}

.responsive .av_mobile_menu_tablet .main_menu {
display: none;
}

.html_mobile_menu_tablet #mobile-advanced {
display: block;
}}

    Regards,
    Ismael

    April 6, 2015 at 3:32 am #423745
    auroradesignstudio

    Ismael,
    Thanks for this. The code for the mobile menu fixed my problem with that, but the caption overlay issue is not solved. I can give you my login credentials if that helps. Let me know. I added the @media only…. code to the custom css at the bottom of the general styling window. Is that where it belongs?
    The element to which I am referring is a masonry gallery placed within a portfolio entry. The captions are set to display on mouse hover only, but of course, that doesn’t apply to a mobile device so they are showing all of the time.

    Here is an example:
    http://www.studentartfund.org/portfolio-item/2015-grandparent-portrait-show-gallery/

    Sorry to belabor this, but I’d really like to figure out if there’s a way to disable the captions on tablets and phones.
    Thanks,
    Lynda

    April 7, 2015 at 3:05 am #424388
    Andy

    Hey!

    please upgrade to Enfold v3.1.3.

    This will disable captions for all devices till 767px (width):

    @media only screen and (max-width: 767px) {
.avia_desktop .av-caption-on-hover .av-masonry-item-with-image.av-masonry-entry:hover .av-inner-masonry-content {
opacity: 0 !important;
display: none !important;
}}

    If this code still does not work after the upgrade, then please provide us admin access, so we can take a closer look. Does your server use any caching? please ask your host about that.

    Cheers!
    Andy

    April 11, 2015 at 6:35 pm #427058
    auroradesignstudio
    This reply has been marked as private.
    April 13, 2015 at 8:29 pm #427776
    Andy

    Hey!

    we added a code into your Quick CSS and fixed it for you. Check your website now on mobile :). Don’t forget to clear browser cache if necessary.

    Best regards,
    Andy

    April 13, 2015 at 9:21 pm #427806
    auroradesignstudio
    This reply has been marked as private.
    April 15, 2015 at 3:48 am #428636
    Ismael

    Hey!

    Hmm.. This is the code that is causing the issue:

    .av-inner-masonry-content.site-background {
  display: none;
}

    I removed it and the caption is now working on desktop view.

    Cheers!
    Ismael

    April 15, 2015 at 5:07 am #428672
    auroradesignstudio
    This reply has been marked as private.
    April 16, 2015 at 11:16 am #429502
    Ismael

    Hi!

    I checked the site on iPod and I don’t see any captions. Please remove browser cache then reload the page.

    Best regards,
    Ismael

    September 27, 2016 at 10:29 pm #692441
    quistmarketing

    Hello,

    Can you provide me with the code you used to fix this issue on Mobile devices? We are having the same problem on our masonry gallery. We want to disable captions on mobile views ONLY not desktop. The problem is that the captions cover the picture on mobile view.

    Please advise.

    Thank-You,

    Chris

    September 30, 2016 at 1:52 pm #693730
    Yigit

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    @media only screen and (max-width: 768px) {
figcaption {
    display: none!important;
}}

    Best regards,
    Yigit

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