Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • February 27, 2024 at 1:29 am #1435506
    imagestudios

    Hi, I had worked with your team to achieve the overlay color for the Masonry Gallery using this code:

    /* MASONRY GALLERY OVERLAY COLOR */
    #top .av-caption-style-overlay .av-masonry-item-with-image .av-inner-masonry-content {
    background: rgba(0,87,130,0.7);
    }

    /* MASONRY GALLERY TO REMOVE COLOR OVERLAY ON HOVER */
    #top .av-caption-style-overlay .av-masonry-item-with-image:hover .av-inner-masonry-content {
    background: transparent;
    }

    However, on the mobile view, it is just grayscale. How can I apply the blue color overlay for mobile as well?
    Credentials provided below. Thanks in advance!

    February 27, 2024 at 8:08 am #1435542
    Ismael

    Hey imagestudios,

    Thank you for the inquiry.

    Please add this css code to adjust the color of the masonry overlay on mobile view.

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

  /* Add your Mobile Styles here */
  #top .av-caption-style-overlay .av-masonry-item-with-image .av-inner-masonry-content {
    background: rgba(0, 87, 130, 0.7);
  }
}

    If you have an existing css media query for a breakpoint (max-width: 767px), you can just copy the css rule above and place it within the existing media query.

    Best regards,
    Ismael

    February 27, 2024 at 4:16 pm #1435600
    imagestudios

    Thank you. That was similar to something I had tried before. I did try this code, but it is still grayscale on mobile and not the blue overlay as it appears on desktop.

    February 28, 2024 at 8:52 am #1435682
    Ismael

    Hi,

    Please refer to: https://kriesi.at/support/topic/add-margin-to-bottom-of-blog-grid-layout-on-mobile-view/#post-1435681

    Best regards,
    Ismael

    February 28, 2024 at 9:23 pm #1435811
    imagestudios

    That worked—thank you so much!

    February 29, 2024 at 10:11 am #1435845
    Ismael

    Hi,

    No problem! Glad we could help. Please don’t hesitate to open another thread if you have more questions about the theme.

    Have a nice day.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Masonry Gallery Overlay Color Different on Desktop Vs. Mobile’ is closed to new replies.