Tagged: , , , ,

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • December 2, 2015 at 12:55 pm #545840
    nightjar

    Hello there,
    I would like to know how to customize the style applied to Masonry images and titles. Namely:

    a) The images being shown are cropped or hidden by the title bar. Is there any way to change proportions/resize them to allow viewing 100% of the original photo?
    b) How can I reduce the padding of the title being shown below each image?
    c) How can I change the font size and line height of the text being shown on mouseover?

    Thanks for your help!

    December 2, 2015 at 5:11 pm #545972
    nightjar

    OK, I have partially solved issue a) and b) using the following CSS code:

    .av-masonry-image-container {
background-size: contain!important;
background-position: inherit!important;
}
.av-masonry-entry .av-inner-masonry-content {
padding: 10px!important;
}

    However, when I enlarge the page and the image+title boxes resize themselves, an unwanted portion of the images is being shown above the title (see enclosed screenshot)

    Any help to fix these issues would be most appreciated!

    December 4, 2015 at 3:24 pm #547029
    Andy

    Hi!

    this does not happen for me. When exactly do you see this? Maybe you need to add some media queries for larger screens to your code: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    Best regards,
    Andy

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