dooge dooge - 2 months ago 7
CSS Question

Div loses all styling when wrapped in <a> tag

I have a project where I want to change some circle elements into hyperlinks by wrapping them in an

<a href>
. The problem is, I lose the styling that I had previously applied after I wrap the html div in the
<a>
tag. I am having trouble finding a solution after adding the
<a>
tag in the css.

Here is a Codepen I have created of a draft project. Try wrapping a .circle div in an tag:

CodePen

In case CodePen is down



.wrapper {
width: 100%;
}
.wrapper .first {
display: flex;
align-items: center;
justify-content: center;
flex-flow: row wrap;
max-width: 1222px;
}
.wrapper .first .circle {
width: 100px;
height: 100px;
overflow: hidden;
text-align: center;
margin-right: 20px;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: center;
background: #FF9E9D;
border-radius: 50%;
border-style: solid;
border-color: #FF9E9D;
transition: all 0.4s ease-in-out;
}

<div class="wrapper">
<div class="first">
<div class="circle">
<h5>MD</h5>
</div>
</div>
</div>





Thanks, any help is greatly appreciated.

Answer

since you want the entire div to be a link why not give the a tag a class of that style. For example

<a class="first" href="your link"></a>
Note that ".first" can be any of the classes you want your link to be or you want your user to click on to go to that link