Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • January 9, 2018 at 1:25 pm #895224
    hgeurtse

    Hi there!

    which code do I have to add to the Quick CSS if I want te hide the grey overlay but display the caption om mobile devices?
    If I use:
    @media only screen and (max-width: 767px) {
    .av-inner-masonry-content.site-background {
    opacity: 0 !important;
    }
    }

    Nothing is displayed and I want only the caption (title) to be displayed.

    Thanks for your help!
    regards, Hugo

    January 10, 2018 at 6:32 am #895520
    Rikard

    Hi Hugo,

    Could you post a link to where we can inspect the element in question on your site please?

    Best regards,
    Rikard

    January 10, 2018 at 4:09 pm #895708
    hgeurtse

    Hi Rikard,

    I’ve removed the addition to the Quick CSS

    thanks in advanced: https://publiekeversnellers.nl/

    Regards,
    Hugo

    January 11, 2018 at 4:47 am #895967
    Mike

    Hi,
    Try this code in the General Styling > Quick CSS field:

    @media only screen and (max-width: 767px) { 
#top .av-caption-style-overlay .av-masonry-item-with-image .av-inner-masonry-content {
    background: rgba(0,0,0,0)!important; 
}
}

    Best regards,
    Mike

    January 11, 2018 at 9:53 am #896059
    hgeurtse

    Thanks Mike! That works just fine!

    Another question. If I don’t want to show the caption/title from an specific masonry item on mobile. What code should I add to the Quick CSS?

    Example: I’ve already added this code to not link an item in the masonry to a single portfolio item with this code:
    .av-masonry-container a.post-658 {
    pointer-events: none;
    }

    Thanks in advance!

    January 11, 2018 at 10:20 am #896068
    Mike

    Hi,
    Please try:

    .post-456 .av-inner-masonry-content-pos-content {display:none!important;}

    Best regards,
    Mike

    January 11, 2018 at 11:34 am #896100
    hgeurtse

    Hi Mike,

    do you want me to add this inside code?:

    @media only screen and (max-width: 767px) {
    #top .av-caption-style-overlay .av-masonry-item-with-image .av-inner-masonry-content {
    background: rgba(0,0,0,0)!important;
    }
    }

    January 11, 2018 at 12:29 pm #896132
    Mike

    Hi,
    Sorry, I see you wanted this to hide the title only on a mobile, so I should have added the media query:

    @media only screen and (max-width: 767px) { 
.post-456 .av-inner-masonry-content-pos-content {display:none!important;}
}

    You could add it to the other one if you wish.

    Best regards,
    Mike

    January 11, 2018 at 7:55 pm #896227
    hgeurtse

    Thanks! Works just fine :-)

    January 11, 2018 at 8:42 pm #896233
    Mike

    Hi,
    Glad we could help, we will close this now. Thanks for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Hide overlay but display caption in masonry on mobile’ is closed to new replies.