Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • October 18, 2022 at 2:27 pm #1369224
    ussma

    I have the masonry block set up on my website so it has the title and description displayed on hover. I noticed that on the mobile version the title and description are always displayed – the issue is it the text almost completely covers the image, which is not very attractive. Is there a way for these blocks to stay dynamic on the mobile version too?
    Thanks!

    October 19, 2022 at 6:07 am #1369327
    Ismael

    Hey ussma,

    Thank you for the inquiry.

    You may need to use this css code to hide the masonry content on mobile view.

    @media only screen and (max-width: 767px) {
    .av-inner-masonry-content.site-background {
        display: none;
    }
}

    Or this css code to convert the caption container to an overlay with a transparent background.

    @media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */
  .av-inner-masonry-content.site-background {
    position: absolute;
    top: 0;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    text-align: center;
  }

  .av-masonry-entry .av-masonry-entry-title {
    color: #ffffff;
  }
}

    Please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css. Let us know if this helps.

    Best regards,
    Ismael

    October 23, 2022 at 2:35 pm #1369857
    ussma

    I’m not sure how or where to do this. Can you please elaborate. Thanks!

    October 23, 2022 at 10:21 pm #1369904
    Mike

    Hi,
    I added this css from Ismael to your Enfold Theme Options ▸ General Styling ▸ Quick CSS field so your images show on mobile:

    @media only screen and (max-width: 767px) {
    .av-inner-masonry-content.site-background {
        display: none;
    }
}

    Please clear your browser cache and check.

    Best regards,
    Mike

    November 6, 2022 at 6:30 pm #1371547
    ussma

    Hi Mike thanks for doing this – the blocks are showing now on my mobile device is there a way to also have the description show on hover on the mobile as well?

    Thanks!

    November 6, 2022 at 7:37 pm #1371558
    Mike

    Hi,
    Unfortunately not because mobile devices don’t have a hover trigger, this is why the default behavior is to show the description on mobile always.
    So your option for mobile is to show the description or not.

    Best regards,
    Mike

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