I'm trying to change my icons to flex but that didn't work. This was my original CSS code:
.recipe-icons {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin: 2rem 0;
text-align: center;
}
I also tried setting display to flex, justify-content to center and all that but that didn't work either. How can I fix this? This is my html code for my icons:
div class="recipe-icons">
<article>
<!-- single recipe icon -->
<i class="fas fa-clock"></i>
<h5>prep time</h5>
<p>30 min.</p>
<!-- single recipe icon -->
<i class="far fa-clock"></i>
<h5>cook time</h5>
<p>15 min.</p>
<!-- single recipe icon -->
<i class="fas fa-user-friends"></i>
<h5>servings</h5>
<p>6 servings</p>
<!-- recipe tags -->
<div class="recipe-tags">
Tags: <a href="tag-template.html">beef</a>
<a href="tag-template.html">breakfast</a>
<a href="tag-template.html">pancakes</a>
<a href="tag-template.html">food</a>
</div>
</article>
</div>
I have an alternative way of doing something like that using display: flex;
Also you should surround the elements in a div to group them.
Working example https://jsfiddle.net/r5Lfcbh8/1/
Html:
<article>
<div class="recipe-icons">
<div class="iconRow">
<i class="fas fa-clock"></i>
<h5>prep time</h5>
<p>30 min.</p>
</div>
<div class="iconRow">
<i class="far fa-clock"></i>
<h5>cook time</h5>
<p>15 min.</p>
</div>
<div class="iconRow">
<i class="fas fa-user-friends"></i>
<h5>servings</h5>
<p>6 servings</p>
</div>
</div>
<div class="recipe-tags">
<span>Tags:</span>
<a href="tag-template.html">beef</a>
<a href="tag-template.html">breakfast</a>
<a href="tag-template.html">pancakes</a>
<a href="tag-template.html">food</a>
</div>
</article>
And css:
article, .recipe-icons, .recipe-tags {
display: flex;
}
article {
flex-direction: column;
}
.recipe-tags {
margin-top: 10px;
}
.recipe-tags > * {
margin-left: 5px;
}
.recipe-icons > .iconRow {
flex: 1 1 auto;
text-align: center;
}
.recipe-icons > .iconRow > * {
margin: 5px 0;
}