Tagged: 

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • June 14, 2022 at 11:45 pm #1355261
    adapt

    This is a followup to this prior thread:

    https://kriesi.at/support/topic/masonry-perfect-grid-setting-images-are-zoomed/

    The solution worked, however one thing I didn’t realize is that it added a big gap between the thumbnail and the title when viewing in responsive/mobile screen as well. This gap wasn’t so evident on desktop.

    I realize I can change the suggested CSS to only apply to desktop view, using “@media only screen and (max-width: 767px)” modifier, and setting responsive/mobile to display the image at 100% height.

    However, after I tested it, the image looks much better at an even smaller height percentage (for example 34%) when viewing in responsive/mobile screen resolution.

    Unfortunately this makes the gap even larger between the thumbnail and the title.

    I tried adding a “margin-top” to the title text (and adding a -250px value), which does work to move it to be below the thumbnail, but then there’s a major gap between each thumbnail/title grouping, so it also looks strange.

    So, my question is – is there a way to make sure the title/description displays directly below the thumbnail, no matter what % the height of the thumbnail is set to, and that each subsequent thumbnail & title appear below each other, without major gaps?

    Or at least, is there additional code I can add to the CSS to fix the appearance?

    Any help would be greatly appreciated!

    June 16, 2022 at 4:35 am #1355424
    Ismael

    Hey adapt,

    Thank you for the inquiry.

    Did you change the size settings of the masonry element? The height of the .av-masonry-image-container is now set to 70%, but there is no gap between the title and the image. Did you figure this out?

    Best regards,
    Ismael

    June 16, 2022 at 8:00 am #1355437
    adapt

    The setting at 70% “solves” the problem on desktop, but not on responsive (mobile view) – that’s what I’m trying to explain in my post above.

    There is a big gap between thumbnail and title, when viewing on mobile.

    I figured I could create a “mobile only” setting in CSS with “@media only screen and (max-width: 767px)” and set the height to 34%, as the thumbnail looks better (fits mobile screen better), however that still doesn’t fix the problem that there’s a gap between the thumbnail and title, so that’s what I need help with.

    As I explained, I tried adding -250px margin-top to the title text, which kinda fixes the gap…however the other thumbnail/title elements don’t shift up with it – they stay fixed, so then the gaps are simply between each thumbnail/title.

    I’m guessing I’m just missing something really obvious, so any help would be greatly appreciated!

    June 16, 2022 at 11:26 am #1355472
    Ismael

    Hi,

    Thank you for the clarification.

    You can wrap the css rule inside a css media query, but for desktop view. 

    @media only screen and (min-width: 768px) {
  /* Add your Desktop Styles here */

}

    Or use this css code to adjust the position of the masonry content on mobile view and move it closer to the masonry image.

    @media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */
  .av-fixed-size .av-masonry-entry .av-inner-masonry-content, .av-caption-on-hover .av-masonry-item-with-image.av-masonry-entry .av-inner-masonry-content, .av-flex-size.av-caption-on-hover-hide .av-masonry-entry.av-masonry-item-with-image .av-inner-masonry-content {
    position: absolute;
    bottom: 50px;
  }
}

    Best regards,
    Ismael

    June 16, 2022 at 10:50 pm #1355544
    adapt

    Thanks Ismael.

    Your solution is close to what I already had (and mentioned in my first post). I modified it slightly so it’s:

    bottom: 230px;

    (instead of 50px per your suggestion)

    and I added:

    @media only screen and (max-width: 767px) {
#top .av-masonry-outerimage-container .av-masonry-image-container {
    height: 50%;

    This means both the thumbnail and title are exactly how I want them in terms of thumbnail image size and title is much closer to thumbnail, when viewing in mobile..

    However, now the gap between elements is even bigger than before. Please see attached screenshot so you can see what I mean.

    This is the problem I’ve had from the start – I was able to modify image height and move title so it’s directly under it’s thumbnail, and have different view settings for mobile vs desktop.

    However, I can’t solve the problem where there’s such a big gap between each element, when viewing on mobile.

    This is what I need help with.

    BTW, when I say “each element”, I mean: thumbnail + it’s title = 1 element.

    The page currently has 11 elements (ie articles).

    Hope that makes sense, and hopefully you can help with this issue.

    Thanks!

    June 17, 2022 at 2:50 pm #1355610
    Guenni007

    It’s a pity that so much secrecy is always made about pages that will be public at some later date.
    Every now and then, fellow participants also have good ideas, not least because they are busy every day with the implementation of a layout, and not only approach solutions theoretically.
    Not only that you as a questioner may receive help much later, but by reading along other participants can often find solutions for their own problems.

    June 19, 2022 at 10:42 pm #1355789
    adapt

    Still needing some help on this @Ismael, or any other mod/support person, please.


    @Guenni007     – while it would be nice for other members to be able to help out, in a lot of cases it’s for business/company privacy. That’s why I’m paying for ongoing support from Kriesi.

    June 21, 2022 at 10:48 pm #1356065
    adapt

    Is there anyone from the support team able to help?

    I still need help reducing the gap between elements when viewing on mobile. The solutions given above fix image/layout issues on desktop, but they have exacerbated the gaps when viewing the site on mobile.

    June 22, 2022 at 4:40 am #1356084
    Ismael

    Hi,

    Sorry for the delay. You can use this css code to adjust the space between the masonry items.

    .responsive #top .av-masonry-entry {
    margin-top: -190px;
}

    Make sure to place it within the css media query for mobile view. We provided a screenshot in the private field.

    Best regards,
    Ismael

    June 22, 2022 at 4:56 am #1356087
    adapt

    Thanks @Ismael, much appreciated.

    Your solution has narrowed the gap between each element, which is fantastic, so thank you for that.

    However, unfortunately it’s introduced a new problem – the thumbnail for the very first element no longer appears (you can only see the title). I’m guessing it gets cut-off somehow?

    As a side note, I also note there seems to be a much bigger gap between the last element in the Masonry and the footer, which this change caused somehow.

    I can’t believe how frustrating this is – it feels like 2 steps forward and 1 step back.

    Any ideas?

    June 24, 2022 at 7:59 am #1356365
    Ismael

    Hi,

    Sorry about that. Please try to replace margin-top with margin-bottom. The effect should be the same without losing the first entry.

    .responsive #top .av-masonry-entry {
    margin-bottom: -190px;
}

    Best regards,
    Ismael

    June 25, 2022 at 2:49 am #1356447
    adapt

    Oh NICE! That’s it, that totally fixed it. Thank you!

    June 25, 2022 at 11:15 am #1356465
    Rikard

    Hi,

    Great, I’m glad that Ismael could help you out. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    June 26, 2022 at 12:13 am #1356505
    adapt

    Hi Rickard

    Thanks for the followup. This is all I needed help with at this stage, so this can be closed (shame there’s no option for the person who started the thread to mark it as “solved”, otherwise I would’ve already done that).

    Thanks for your guys help!

    June 26, 2022 at 12:56 am #1356509
    Mike

    Hi,
    Glad Ismael could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘Masonry Grid modification’ is closed to new replies.