Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • September 30, 2015 at 3:10 am #511084
    WP Turned UP

    Hello. I’ve added a full-width Masonry element to this page. I’m using images that are 644 × 587.

    I have two questions/issues:

    Issue 1: I’ve tried all of the “Perfect” Masonry options (Grid, Automatic and Manual) and they all cut off part of my images. Which Masonry settings can I use to keep the original image size in view.
    Issue 2: When you hover over an image, the image animates by “popping up”, essential shrinking the image slightly. It’s a cool feature, but when images are already getting cut off, this makes the issue worse. Is there an option to turn this off?

    Thank you,
    Ryan

    September 30, 2015 at 11:21 am #511339
    Josue

    Hey!

    Try the following CSS codes:
    1.

    .av-masonry-entry .av-inner-masonry-sizer {
    min-height: 350px; /* Modify this value as needed */
}

    2. 

    .avia_desktop .av-masonry-entry:hover .av-masonry-image-container {
    transform: none;
    -webkit-transform: none;
}

    Cheers!
    Josue

    September 30, 2015 at 2:45 pm #511520
    WP Turned UP

    Hello. The transform works, thank you. With the other code you gave me, the height looks great but now the image width is being cut off. Here is what I’ve tried….

    -Adding a min-width of 319px to the code you gave me
    -All 4 Masonry element types
    -Manually choosing how many columns are used within the Masonry, rather than using automatic

    Thank you,
    Ryan

    September 30, 2015 at 3:06 pm #511540
    WP Turned UP

    I want the Masonry output to be like this demo, keeping the transform feature active. Shouldn’t the Masonry perfectly adjust the images, without needing any additional CSS? Are there image sizes that must be used or are recommended?

    • This reply was modified 9 years, 2 months ago by WP Turned UP.
    September 30, 2015 at 3:19 pm #511567
    WP Turned UP

    Would still like to know about the Masonry settings. For the purposes of the current site i’m working on, I was able to reach my desirableness by using the Grid Portfolio with no image scaling. Gotta move on from Masonry for now.

    Ryan

    September 30, 2015 at 10:07 pm #511848
    Josue

    Hey!

    The thing with masonry is that as it is a fullwidth element the width of the columns will vary depending on the window size, in the demo you posted you’d note that the iPhone image actually gets cropped.

    Glad you’re using a Grid now, it is a way better element to handle the type of content you want to showcase.

    Best regards,
    Josue

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