Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • September 22, 2022 at 11:03 pm #1366050
    evas49

    Hi,

    1: Masonry gallery with “title & description” as overlay –> show on mouseover:
    Problem on mobile: the overlay is constantly there and covers the image.

    2: Masonry gallery with “title & description” below the image –> show on mouseover:
    Problem on mobile: the section is constantly there and covers the image. Very bad

    3: putting another masonry gallery specially for mobile (responsive settings) is not an option since it would increase my pageload and have negative impact on my SEO.

    Here is what would be usefull and what i need:
    1: If “title &description” as overlay –>show on mouseover:
    All screensizes except Desktop = Show Title as overlay / Dont show description
    2: If “title &description” below image –>show on mouseover:
    All screensizes except desktop = Show Title below / Dont show description
    3: If “title &description” as overlay –>hide on mouseover:
    All screensizes except Desktop = Show Title as overlay / Dont show description
    4: If “title &description” below image –>hide on mouseover:
    All screensizes except desktop = Show Title below / Dont show description

    – What`s the solution?
    – Why arent there proper settings for such scenarios? (This would be much more usefull than all these “fancy”elements like borders and shadows und pulsar and sonars or what else you packed into the theme lately)

    regards
    EA

    • This topic was modified 2 years, 1 month ago by evas49.
    September 29, 2022 at 3:56 pm #1366932
    Yigit

    Hey Eva,

    Thanks for contacting us!

    Thanks for your suggestions, we will forward them to our devs.

    In the meantime, please add following code to bottom of Quick CSS to hide descriptions on screens smaller than 990px

    
@media only screen and (max-width: 990px) {
.av-masonry-entry .av-masonry-entry-title + .av-masonry-entry-content {
  display: none;
}}

    Code works for both overlay and below the image options

    Best regards,
    Yigit

    October 4, 2022 at 11:15 am #1367547
    evas49

    Hi, as far as i understand from reading it, it hides ALL descriptions under all conditions IF screen is smaller than 990px.
    Is that correct?

    How would it be if i want it ONLY for the page with the page ID 32278?
    Like this?

    
@media only screen and (max-width: 990px) {
.page-id-32278 .av-masonry-entry .av-masonry-entry-title + .av-masonry-entry-content {
  display: none;
}}

    thanx
    eva

    October 4, 2022 at 12:37 pm #1367559
    Yigit

    Hi,

    That is correct, it hides all descriptions and changing it to the code you posted should only hide on page with 32278 ID.

    Best regards,
    Yigit

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Issues with Masonry gallery on mobile’ is closed to new replies.