Bento Loop Grid with CSS and ACF Overlay - Elementor Wordpress Tutorial

[@bamwinejeremiah7396]

I like this, every tutorial is so practical and thoughtful. ☺️

[@websquadron]

Thank you! 😊

[@ElementoryMyDearWatson]

Very cool Imran. This is the code for tablet and mobile (will appear as 2 columns on tablet and 1 column on mobile)
@media (max-width: 1024px) {
selector .e-loop-item {
grid-column: span 1;
}
selector .e-loop-item:nth-of-type(6n-2) {
grid-column: span 1;
grid-row: span 1;
}
selector .e-loop-item:nth-of-type(6n-3) {
grid-column: span 1;
grid-row: span 1;
}

[@websquadron]

Exactly :)

[@DigitalrealtyApartment]

Great, but I will use offset (like you did in the previous bricks tutorial) if I have to make the bento like this

[@websquadron]

That’s fine too

[@MDFahimUddin-p1e]

Thanks for the lesson 🔥

[@websquadron]

No problem 👍

[@AwaisKhokhar02]

How we can add a link to the whole grid columns to redirect it to it's dedicated post.

[@websquadron]

You’ll have a button or add links to images/post titles. Click link - and then post url

[@dreamdisplaymedia759]

Hey Imran👋, great tutorial! I created similar grid for displaying loop for blog posts with post date and post title. By I have realized sometimes if the post title happens to be long, it deforms the grid. If you know a hack to prevent that issue, please make a tutorial on that🙏👍

[@websquadron]

You could either set the Template to be a minimum height, or reduce the length of a title with some code: ruclips.net/video/8C7vlRumhOw/видео.htmlfeature=shared