I'm trying to customize a View that I've created showing all of one published content type. The grid is set to have 3 columns. I also have it set as a Rendered Entity with view mode "Teaser" so that it displays the image and content.
Using CSS I've been able to modify the header size, hide the words in the teaser while leaving the image, and modifying the size of the teaser image.
I'd like to be able to display the title underneath the image rather than on top, as is the default. There is no setting in the Views module to achieve this that I can find, so I'm doing some modifications using CSS. I'm having some trouble figuring out which divs to use to do so (there seem to be quite a lot that don't move around so easily). The divs are currently positioned like so:
I did find that assigning
display: table-header-group and
display: table-footer-group to the images (
l-slat__media) and header text (
l-slat__header) respectively worked, after assigning
display: table to
article. But they were tiny and about 25% of the original size. Not really sure why this is happening.
Any input as to what I might be able to do to put the header text below the teaser image would be appreciated.