Making a div box an anchor - how to keep properties of the div box-CodePudding

I made a section with container and 4 boxes inside (flexbox with row direction). Everything was set up. Now I would like to make these 4 boxes clickable and set them as anchors. Unfortunately, when I packed my box into , it looses properties like width. should I changed my , or maybe it is a better way to make my boxes as anchors? Thanks for reply

.icon-boxes {
  display: flex;
  flex-wrap: no-wrap;
  margin: 0 -15px;

  :hover {
    background-color: #ffede9;
  }

  a {
    text-decoration: none;
    color: #000;

    .box {
      width: calc(100% / 3);
      padding: 15px 15px;

      @media (max-width: 800px) {
        width: 100%;
      }

      .icon {
        margin-bottom: 20px;
        text-align: center;
        font-size: 60px;
      }

      .title {
        text-transform: uppercase;
        text-align: center;
        margin-bottom: 20px;
        letter-spacing: 1px;
        font-weight: 600;
      }

      .desc {
        text-align: center;
        line-height: 1.4;
        color: $secondaryColor;
      }
    }
  }
}

            <div >
                <a href="">
                    <div >
                        <div ><img src="assets/img/wedding-invitation.png" alt=""></div>
                        <div >Lorem</div>
                        <div >Lorem</div>
                    </div>
                </a>
             </div>

CodePudding user response：

You can achieve this by using some javascript. It would keep all the div properties and you won't need an anchor.

var d1 = document.getElementById("d1")
d1.addEventListener("click",function(){
   window.open("https://www.google.com" ,'_blank');
})

.d1{
width:100px;
height:100px;
background-color:crimson;
}

<div  id="d1"> </div>

CodePudding user response：

Pack them individually like below

 <a href="https://www.w3schools.com/js/default.asp">
             <div >Lorem</div>
       </a>

.title {
      text-transform: uppercase;
      text-align: center;
      margin-bottom: 20px;
      letter-spacing: 1px;
      font-weight: 600;
      width:300px;
      height:200px;
      border:5pt double black;
      background-color:pink;
    }
    
    .desc {
        text-align: center;
        line-height: 1.4;
         width:200px;
         height:200px;
      border:5pt double black;
      }

<div >
      <div >
           <div ><img src="assets/img/wedding-invitation.png" alt=""></div>
           <a href="https://www.w3schools.com/js/default.asp">
                 <div >Lorem</div>
           </a>
           <a href="https://www.w3schools.com/js/default.asp">
                 <div >Lorem</div>
           </a>
                 
      </div>
</div>