search

unimelb / unimelb-design-system

A complete design system for the University of Melbourne
https://web.unimelb.edu.au
30 stars 12 forks source link

Bottom-margin missing on images in simple listings #863

Closed nejones closed 7 years ago

nejones commented 7 years ago

Expected behaviour

Nicole Jones, Melbourne School of Engineering

A bottom margin on images in listings has been in place until v6.0.1. This is the component: https://web.unimelb.edu.au/components/listings/

Actual behaviour

Bottom margin on images in listings has disappeared in v6.0.1 with change in the HTML/CSS coding of the listing component. The heading now almost touches the image.

Steps to reproduce

You can see it on this page: http://www.bme.unimelb.edu.au/research/test.html

Versus this page, which uses the older HTML/CSS: http://www.bme.unimelb.edu.au/research/

This rule

.uomcontent [role="main"] section div { margin: 0 auto; } is overriding this rule

.uomcontent .simple-listing__img { margin-bottom: 0.75rem; }

It needs this to fix it:

.uomcontent [role="main"] section div.simple-listing__img { margin-bottom: 0.75rem; }

axelboc commented 7 years ago

Thanks Nicole, this will be fixed in the next release.