Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #475069

    Hi I have found how to hide the captions on mobile devices

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

    Is it possible for them to just take up bottom 20% of the image?

    Thanks
    Rob

    #475223

    Hey Rob,

    Could you provide us with a link to the site in question so that we can take a closer look please?

    Cheers!
    Rikard

    #476402

    Hi Rikard,

    There is nothing to see as I have them hidden. It is probably just the font size and spacing. What would be the css to reduce them to normal paragraph font and small padding.

    Many thanks

    Rob

    #476889

    Hi!

    You can insert this inside the media query:

    .av-masonry-entry .av-masonry-entry-title + .av-masonry-entry-content {
      padding: 1px;
      font-size: 12px;
    }

    Best regards,
    Ismael

    #477244

    Sorry to be a bit dim Ismael, when you say inside the media query where is that? I tried theme custom css and the stle.css but it didn’t work.
    Thanks
    Rob

    #477363

    Hey!

    You should use the code as following

    @media only screen and (max-device-width: 1024px) {
    .av-masonry-entry .av-masonry-entry-title + .av-masonry-entry-content {
      padding: 1px;
      font-size: 12px;
    }}

    Best regards,
    Yigit

    #477637

    Thanks Yigit. Sorry I’m still being a bit dim. I added the above to my custom css but it didn’t do anything.
    http://www.edendesignandinteriors.co.uk/design-portfolio/
    You can see the labels on large screens but I have hidden them again on mobiles. I have both queries in my custom css at the moment:

    /* hide masonry labels */
    @media only screen and (max-device-width: 1024px) {
    figcaption.av-inner-masonry-content.site-background {
    display: none;
    }}
    
    /* masonry smaller labels */
    @media only screen and (max-device-width: 1024px) {
    .av-masonry-entry .av-masonry-entry-title + .av-masonry-entry-content {
      padding: 1px;
      font-size: 12px;
    }}
    #478554

    Hi!

    This is the media query line:

    @media only screen and (max-device-width: 1024px) {
    
    }

    Please replace the code with this:

    @media only screen and (max-width: 1024px) {
    .main_color .av-inner-masonry-content {
      font-size: 12px;
      padding: 6px;
    }
    
    figcaption.av-inner-masonry-content.site-background {
    display: none;
    }
    }

    Cheers!
    Ismael

    #479627

    Thanks Ismael but it doesn’t seem to work. It must be something I am doing wrong. The client is happy with the way it is now so we can leave this one unresolved.

    Thanks again for you help.

    Rob

Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Masonry Gallery Captions on Mobile’ is closed to new replies.