Having some trouble using the foundation 6 xy grid for the first time and aligning three images with text overlays at the bottom of each image. I am struggling to make the background of the text fill the full width of the image while also ensuring it is responsive. The 100% width of the newsArticle__pCont class seems to be greater than the parent cell, which is confusing me. Below is my current attempt:
class News extends Component {
renderArticlePreview(article) {
if(articleCount <= 2) {
articleCount++;
return (
<div key={article.id} className="cell small-12 medium-4 newsArticle__cont--firstThree">
<img className="newsArticle__img--overlay" src={article.imageUrl} />
<div className="newsArticle__pCont">
<a href={"/article/" + article.id}><p className="newsArticle__title--overlay">{article.title}</p></a>
</div>
</div>
)
}
}
render() {
const { news } = this.props;
return (
<div>
<Header />
<div className="grid-container">
<div className="grid-x grid-padding-x newsArticle">
{ news.map((article) => this.renderArticlePreview(article)) }
</div>
</div>
</div>
)
}
}
export default News;
.scss
@import './Helpers.scss';
.newsArticle {
.newsArticle__cont--firstThree {
position: relative;
}
.newsArticle__title {
text-align: center;
font-size: 24px;
font-weight: 500;
color: #000000;
}
.newsArticle__title--overlay {
font-size: 16px;
font-weight: 500;
color: #FFFFFF;
text-align: center;
margin-bottom: 0px;
}
.newsArticle__pCont {
background-color: rgba(0, 94, 154, 0.75);
height: 45px;
position: absolute;
bottom: 0px;
z-index: 10;
width: 100%;
}
@include screen(sm-only) {
.newsArticle__img {
margin-top: 10px;
}
}
@include screen(md) {
.newsArticle__img {
margin: 10px;
}
.newsArticle__p {
margin: 10px;
}
}
}