Since <a> element cannot contain <a> children, so wrapping the whole .flex-container with <a> would failed. Just change the tag of the placeholder from <a> to <span>.
<a href="http://yourlinkhere.com">
<div class="flex-container">
<div class="red-box flex-item">
<div class="lh-icon"><img src="https://i.imgur.com/IyLYxCc.png"></div>
<span>Placeholder</span>
</div>
</div>
</a>
Hope this help 😀
You have to add a link before the square and to close it after so when anyone press at the square it will go to that link<a href="link.html">square css</a>
Check these codes
.flex-container
{
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row;
transition: opacity .2s ease-in-out;
flex-wrap: nowrap
}
.flex-item
{
text-align: center;
text-decoration: none;
color: #ffffff;
font-family: verdana;
width: 100%;
display: flex;
flex-shrink: 1;
justify-content: center;
align-items: center;
font-size: calc(8px + (26 - 18) * ((100vw - 300px) / (1600 - 300)));
z-index: 10;
flex-wrap: nowrap
}
.flex-item:before
{
content: '';
float: left;
padding-top: 100%;
}
.red-box
{
background: #fd6f71;
transition: opacity .2s ease-in-out;
opacity: 1;
}<a href="yoururl.html">
<div class="flex-container">
<div class="red-box flex-item">
<div class="lh-icon"><img src="https://i.imgur.com/IyLYxCc.png"></div>
Placeholder
</div>
</div>
<div></a>Let me know if this work for you 🙂
When I try to hyperlink the code below, it seems to mess with the wrapping of the image and only links the icon rather than the whole flex-container. I’ve tried experimenting with <span> elements but haven’t had any success.
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row;
transition: opacity .2s ease-in-out;
flex-wrap: nowrap
}
.flex-item {
text-align: center;
text-decoration: none;
color: #ffffff;
font-family: verdana;
width: 100%;
display: flex;
flex-shrink: 1;
justify-content: center;
align-items: center;
font-size: calc(8px + (26 - 18) * ((100vw - 300px) / (1600 - 300)));
z-index: 10;
flex-wrap: nowrap
}
.flex-item:before {
content: '';
float: left;
padding-top: 100%;
}
.red-box {
background: #fd6f71;
transition: opacity .2s ease-in-out;
opacity: 1;
}<div class="flex-container">
<div class="red-box flex-item">
<div class="lh-icon"><img src="https://i.imgur.com/NCp8Sst.png"></div>
<a>Placeholder</a>
</div>
</div>Codepen:
Welcome to StackOverflow. Please include a
I’ve created a code pen here:
you want the whole div to be hyperlink? just add tag and wrap the content in it.
While this might work, a little explanation about why it didn’t before and what you did to correct it helps everyone in the community.