I’m trying things out with Elementor, Elementor Addons and Toolset for the first time and I want to produce a gallery page showing a grid style custom post type list with a featured image and some field data underneath.
Using Toolset views I have created something that looks reasonably like what I need but in a four column grid style, if there are not 4, 8 or 12 posts to display for example, the final row with an odd number in shows the remaining odd numbered posts in a way that fills the space which makes that row’s display look wrong as the images and text boxes are wider and taller than the rows above (if there were rows above……I only have three test posts for now)
Is there a way to set up this view so that it works rather like the Elementor Portfolio module you see below it, or like the Elementor Addon Posts module underneath that so that the empty space is seen in the empty fourth column and therefore all posts in the display are identical in size regardless of whether all four columns have a post in?
I tried using the Elementor Portfolio option and Elementor Addon’s Posts modules but they don’t seem to be able to show the extra field data that the Toolset Views mentor does so I think Views is the right way to do it.
This is the current test page:
hidden link
Many thanks,
Barry.
Hi Barry,
Thanks for asking! I'd be happy to help.
To show your view's table based grid similar to the one added by the Elementor plugin's grid, you'll need custom CSS code.
For example, you can add following CSS code in the "CSS editor" tab, below the "Loop Editor" section:
( screenshot: hidden link )
.js-wpv-view-layout.js-wpv-layout-responsive table.wpv-loop.js-wpv-loop,
.js-wpv-view-layout.js-wpv-layout-responsive table.wpv-loop.js-wpv-loop tr td {
border-width: 0px;
}
.js-wpv-view-layout.js-wpv-layout-responsive table.wpv-loop.js-wpv-loop tr td {
width: 25%;
text-align: center;
border-width: 0px;
}
.js-wpv-view-layout.js-wpv-layout-responsive table.wpv-loop.js-wpv-loop tr td img {
width: auto;
max-width: 100%;
max-height: none;
}
@media only screen and (max-width: 860px) {
.js-wpv-view-layout.js-wpv-layout-responsive table.wpv-loop.js-wpv-loop tr td {
max-width: 80%;
border-width: 1px;
}
.js-wpv-view-layout.js-wpv-layout-responsive table.wpv-loop.js-wpv-loop tr td {
width: 100%;
display: block;
margin: 0px auto 25px;
}
}
The above code will make each gallery item acquire a min-width and will also stack them on top of each other, on smaller screens.
Similarly, you can include additionally custom CSS code, to make the gallery match the styles from the Elementor's portfolio/gallery.
( ref: hidden link )
regards,
Waqar
Hi Waqar,
Once again that's perfect. I'm very grateful for the CSS and the screenshot to show where it goes. I'll have to research Toolset and CSS further as I think once I can find out what the names of the classes are need the code, I should be able to try things out without bothering you.
Many thanks,
Barry.
Hi Barry,
Thanks for the update and glad my message helped.
The resources shared in this and the previous thread should prove useful in getting familiar with custom CSS code.
For a new question/concern, you're welcome to open a new ticket.
regards,
Waqar
My issue is resolved now. Thank you!
