Utilizing Zurb Foundation v6 for my project, I have implemented a media object on my page:
<div class="media-object stack-for-small">
<div class="media-object-section">
<img src= "{{ entry.topImage.first().getUrl('square') }}">
</div>
<div class="media-object-section main-section">
<h4>{{ entry.title }}</h4>
<p>{{ entry.summary | truncate('words', '50', ' ...', true) }}</p>
<div class="date">
<p>{{ entry.dateUpdated | date('j. F Y') }}</p>
</div>
</div>
</div>
To ensure that the date div is positioned at the bottom of the main-section, I used position: absolute and bottom: 1rem.
However, a problem arises on small screens where text from {{ entry.summary }} overlaps with the date. I attempted adjusting the date's padding-top and margin-top, but no solution was effective. How can this issue be resolved?
This SCSS file provides the styling:
.results {
height: 100%;
background: $gray;
.media-object {
background: $white;
}
.results-title {
padding-top: 2rem;
}
.query {
padding-left: 1.8rem;
padding-bottom: 2rem;
}
.media-object-section {
width: 300px;
img {
max-width: 100%;
}
}
.main-section {
position: relative;
padding-right: 1rem;
.date {
position: absolute;
bottom: 1rem;
p {
margin-bottom: 0;
}
}
h4, p {
color: $black;
}
h4 {
padding-top: 2rem;
margin-bottom: 1rem;
}
}
@include breakpoint(small only) {
.main-section {
padding: 1rem!important;
}
}
}