Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • July 17, 2015 at 5:17 pm #475069
    fanlokbun

    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

    July 18, 2015 at 9:50 am #475223
    Rikard

    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

    July 21, 2015 at 11:59 am #476402
    fanlokbun

    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

    July 22, 2015 at 7:09 am #476889
    Ismael

    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

    July 22, 2015 at 5:44 pm #477244
    fanlokbun

    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

    July 22, 2015 at 9:12 pm #477363
    Yigit

    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

    July 23, 2015 at 12:00 pm #477637
    fanlokbun

    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;
}}
    July 25, 2015 at 6:31 am #478554
    Ismael

    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

    July 28, 2015 at 12:13 pm #479627
    fanlokbun

    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

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