Post Grid – Breakpoint Options

  • Resolved HakanKo

    (@hakanko)


    4 years ago

    Hello Livemesh-Team,

    the post-grid element doesn′t seem to have options to customize the breakpoints for the responsive views. I was using the post-carousel widget before, and in this object it is possible to set the breakpoints. Is there any option to do this also for the post-grid element?

    I think, this is an important setting, as every page uses different breakpoints to change their views.

    Here two pictures for explanation:
    Post Grid: https://pasteboard.co/JQqR8WB.png
    Post Carousel: https://pasteboard.co/JQqRAmz.png

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author livemesh

    (@livemesh)

    Unfortunately, breakpoints are fixed at present at CSS level for posts grid. You can use custom CSS though to customize this. If you tell us what breakpoints you want to use, we can provide the right custom CSS.

    For posts carousel, since it is driven by the slick carousel library, the settings are managed by the library and hence we provide the same to help set the values.

    Thread Starter HakanKo

    (@hakanko)

    Hello, alright, thanks.

    Yes, that would be great. The breakpoints are 1250px for tablet and 850 for mobile.

    But just as feature request: It would be great to have these settings on object level, so we can also set “posts per page” and other setting for custom breakpoints. Or – better would be, that livemesh uses the breakpoints defined in the elementor settings.

    However, i am looking forward to get the css code.

    Thanks and best regards

    Plugin Author livemesh

    (@livemesh)

    It is a little more challenging than I thought it would be. Is it possible to provide a link to the page so that I can provide the exact CSS? Thanks.

    Thread Starter HakanKo

    (@hakanko)

    Hi again,

    no problem. it′s on this site: https://clients.bxw.rocks/4initia. For example in the “Titelstory”-Section. I want it to be 3 columns on desktop, two columns on tablet, and one column on mobile for my custom breakpoints.

    Thanks

    Plugin Author livemesh

    (@livemesh)

    Sorry about the delay. We are working on a major update (which will be released tomorrow) and could not look at this customization right away.

    Now we could not find a suitable grid on this page to customize. Do you still have the grid in place that we can take a look at? We need at least 3 items in the grid for this to be tested.

    Plugin Author livemesh

    (@livemesh)

    We got this custom CSS that should work as per your stated requirements by running it against one of our posts grids on demo site. 

    .lae-gapless-grid .lae-grid-container.lae-grid-desktop-3 .lae-grid-item {
    width: 100%;
}

@media only screen and (min-width: 850px) {
.lae-gapless-grid .lae-grid-container.lae-grid-desktop-3 .lae-grid-item {
    width: calc(50%);
}
}

@media only screen and (min-width: 1250px) {
.lae-gapless-grid .lae-grid-container.lae-grid-desktop-3 .lae-grid-item {
    width: calc(33.33333%);
}
}
Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Post Grid – Breakpoint Options’ is closed to new replies.