Tagged: ,

Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • November 26, 2019 at 7:25 pm #1160434
    Valinsy

    Hi there,
    I saw a thread on this in an earlier post but the person posting solved it themselves so there was no solution presented :(

    I’m using the masonry gallery on a page and it lines up perfectly on mobile devices, and iPads. I have a page containing 5 portfolios lined up on 2 rows. When I view the page on my laptop the fifth portfolio doesn’t align left on the second row – it sits directly under the third portfolio. This isn’t the case on an iPad or mobile device. The reason for this appears to be down to the first 2 portfolios having titles that stretch over 2 lines whereas the others (on my laptop at least) on sit on 1 line. Is there a way to make it sit on the second row and fully align left? I’ve tried using grid, perfect masonry etc.. but they either cover the image with the title too much or crop/stretch the image. I’m trying to get a visible image with the title underneath visible so users can select the named portfolio.

    Hope this makes sense.

    November 28, 2019 at 12:55 pm #1160933
    Victoria

    Hey Valinsy,

    Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?

    Best regards,
    Victoria

    November 28, 2019 at 1:02 pm #1160938
    Valinsy

    Hi Victoria,

    Thanks for coming back – credentials attached.

    December 3, 2019 at 2:03 pm #1162204
    Valinsy
    This reply has been marked as private.
    December 4, 2019 at 10:01 pm #1162738
    Basilis

    Hi,

    I loaded the page but I didnt saw the issue so can u show with a screenshot how we should be handling this please?

    Best regards,
    Basilis

    December 5, 2019 at 1:26 pm #1162970
    Valinsy

    Hi Basilis,

    I’m not sure if I’ve done this correctly but I’ve uploaded a screenshot here.

    Hopefully this works
    Thanks

    December 5, 2019 at 8:25 pm #1163192
    Victoria

    Hi Valinsy,

    Best regards,
    Victoria

    December 6, 2019 at 11:21 am #1163335
    Valinsy

    Hi Victoria,

    Thanks for your help
    Grace

    December 7, 2019 at 3:15 pm #1163585
    Victoria

    Hi Valinsy,

    Best regards,
    Victoria

    December 9, 2019 at 12:46 pm #1164024
    Valinsy

    Hi Victoria,

    Many Thanks
    Valinsy

    December 10, 2019 at 5:19 pm #1164514
    Victoria

    Hi Valinsy,

    Best regards,
    Victoria

    December 11, 2019 at 2:45 pm #1164824
    Yigit

    Hey,

    I tried checking your site but i am blocked as well. I am located in Lithuania. Could you please temporarily disable IP restriction?

    Best regards,
    Yigit

    December 11, 2019 at 5:11 pm #1164880
    Valinsy

    Hi Yigit,
    You should have access now.

    Best Regards
    Valinsy

    December 13, 2019 at 4:51 am #1165401
    Ismael

    Hi,

    Thank you for the inquiry.

    Yon can apply a minimum height to the title or content container so that the items will still be perfectly aligned even if the title of an item is not long enough to create another line.

    @media only screen and (max-width: 1366px) {
    .av-inner-masonry-content {
	min-height: 79px;
    }
}

    Best regards,
    Ismael

    December 17, 2019 at 2:58 pm #1166848
    Valinsy

    HI Ismael,
    Thanks for this – I’ve been playing around with this code for a few days and while it works in some instances – I just have to be a bit more consistent in the length of the names because on some containers there were a lot of extra space around the text.

    My problem now is that while this works better on the events page where the titles are longer, on the actual portfolios (where the titles are a short number reference) there is too much space surrounding the text. (especially on phones)

    Is there an extra piece of code I could include that allows me to define the max height on the containers on the portfolio pages on mobile devices only?
    I’ve added the ID event-gallery to the Masonry Gallery on the portfolio pages to identify the containers I need to control but I don’t know how to phrase the code in the CSS.

    Many Thanks
    Grace

    December 20, 2019 at 4:55 am #1168030
    Ismael

    Hi,

    Thank you for following up.

    Yes, you can style of the content container differently on mobile devices. Try this code.

    @media only screen and (max-width: 767px) {
    .av-inner-masonry-content {
	min-height: 49px;
    }
}

    This should work for mobile phones.

    Best regards,
    Ismael

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