I've been at this all day trying to create a grid of fields (or even teasers) of one content type that displays just like the cards on the default homepage. I'm using Basis theme with the Boxton layout.
Displaying the the three most recent posts (in blocks) side by side (output as a views grid) works fine, except that no matter how small the display, the three columns will not wrap and will only squeeze together.
Tried the various block & views settings and some of the similar classes in my custom css to match the Cards css, but no luck. I'm hoping to use this display of three at the top of my homepage. Can anyone at least point me in the right direction?
I'm not a coder, but have been using Drupal since v 7 , and then 8, and really want to just create an easier to maintain site with Backdrop, which has been working great in this process. Thanks in advance!
Comments
Looking at the CSS of a fresh Backdrop demo, I think a media query makes the difference. The grid is displayed with three columns on screens at least
48 em(or 768px) wide:@media (min-width: 48em) { .block-views-promoted-cards-block .views-view-grid-cols-3 { grid-template-columns: repeat(3,1fr); gap: 2rem; } }On narrower screens there is only one column:
.block-views-promoted-cards-block .views-view-grid-cols-3 { grid-template-columns: repeat(1,1fr); }Thank you, Olaf. I will keep playing around with it.
Still couldn't get it to work (no doubt a css class/ targeting problem on my end). I discovered the Views Bootstrap module and Views B Grid which helped me get this done. Trying to limit the number of added modules, but B Grid was too useful to pass up.