Move title below image in Views grid format with CSS 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.
You could simply edit the "Teaser" view mode and place the title below the image using Display Suite Here are the instructions:


Download Display Suite and enable the "Display Suite" and "Display Suite UI" modules.
Go to admin/structure/types/manage/article/display/teaser where "article" is your content type.
In the "Layout for article in teaser" fieldset, select the "One column" layout and click Save.





You will now see a lot more fields, provided by the Display Suite module. One of those fields is the title field.





Now drag the title field up to the top, below the Image field, just like you requested. From what I understand from your question, you could remove the Body field as well.





All done! No custom theming required.