jSutcliffe90 jSutcliffe90 - 1 month ago 7
Sass (Sass) Question

Problems with foundation 6 grid on img overlay in react

I am using the foundation 6 xy grid for the first time and am having difficulties aligning three images which have a text overlay at the bottom of each image. I struggling to get the background of the text to fill the full width of the image while making it responsive, 100% width of the newsArticle__pCont class is greater than the parent cell which I don't understand. Below is the closest that I have got (which isn't very close)

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;
}
}
}

Answer Source

So the reason your text right now is too large is because it is

  1. position absolute (which takes it out of the flow, so it's not being contained by the padding of the cell itself)
  2. width: 100%, which will take it to the full width of the parent (which includes the padding).

The simplest way to fix this in your case would be to switch from padding-x (gutters are actually inside the cell, cell width includes the gutters) to margin-x (gutters are done by margin, so cell width excludes gutters). This would change your grid to look like:

<div className="grid-x grid-margin-x newsArticle">

A codepen showing this: https://codepen.io/kball/pen/zEGoaR