Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • February 29, 2016 at 3:36 pm #590828
    smudgedesign

    Hi there

    Im trying to change the ratio for the images that are displaying in a masonry showing my portfolio items. The featured images are cropped.

    I found this piece of code that does what I want:

    .av-fixed-size .av-masonry-entry .av-inner-masonry-sizer {
    padding-bottom: 66%;
    }

    In that it resizes images to close to 16:9

    however this css doesnt work for portfolio items that are tagged
    portrait, or landscape or both.

    Ideally i’d like all the image to have a 16:9 ratio as it’s mostly stills of videos we’ll be displaying.

    Can you help?

    Kindest
    Mick

    February 29, 2016 at 5:23 pm #590966
    Josue

    Hi,

    Can you post the link to your website please?

    Regards,
    Josue

    February 29, 2016 at 7:35 pm #591046
    smudgedesign

    Link below

    id also like to have a hover effect of a white box over each image
    but the padding affects this too.. ideally a white box centered with a
    15px padding around the caption.

    thanks for the quick reply

    February 29, 2016 at 8:40 pm #591071
    Josue

    Yeah i can see what you’re trying to do here, thing is, using a pseudo element is limiting for what you want to achieve, i’ve managed to find a better solution.

    1. Change your Masonry settings to the following – http://screencast.com/t/UTNIf4Re0

    2. Remove your custom Masonry CSS code and paste this instead:

    .avia_desktop.avia_transform3d .av-caption-on-hover .av-masonry-entry.av-masonry-item-with-image .av-inner-masonry-content{
    transform: none;
    -webkit-transform: none;
    width: 100%;
    height: 100%;
    bottom: 0;
    display: table;
    text-align: center;
    padding: 20px;
    background: transparent;
}

.av-inner-masonry-content-pos {
    display: table-cell;
    vertical-align: middle;
    background: white;
}

.avia-arrow{
    display: none;
}
    February 29, 2016 at 9:31 pm #591123
    smudgedesign

    Thank you that’s a much better solution to that problem.

    Any progress or advice on the first part of the problem

    Im trying to change the ratio for the images that are displaying in a masonry showing my portfolio items. The featured images are cropped.

    I found this piece of code that does what I want:

    .av-fixed-size .av-masonry-entry .av-inner-masonry-sizer {
    padding-bottom: 66%;
    }

    In that it resizes images to close to 16:9

    however this css doesnt work for portfolio items that are tagged
    portrait, or landscape or both.

    Ideally i’d like all the image to have a 16:9 ratio as it’s mostly stills of videos we’ll be displaying.

    February 29, 2016 at 9:56 pm #591135
    Josue

    Try selecting Flexible Masonry or Prefect Grid as the Size options.

    Best regards,
    Josue

    March 1, 2016 at 1:53 pm #591519
    smudgedesign

    But i need to be able to specify landscape or portrait modes or both.

    March 2, 2016 at 9:08 pm #592297
    Josue

    Hm, not sure if i understand what you’re trying to do here, do you want them all as portrait or landscape? or some landscape and some portrait?

    Best regards,
    Josue

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