html - How to make a div linkable? -

i have block on shopify theme's home page image box text on , when text clicked, links url.

i want box linkable in case don't use text. code below makes text link. how can make entire box link?

  `<div class="text-center col-lg-4 col-md-4 col-sm-4 col-xs-12">     <div class="img1">         <a href="{{ settings.home_blockhtml_link_1 }}">                        {{ 'home_html_1.png' | asset_url | img_tag:    settings.home_blockhtml_tilte_1, "img-responsive" }}                                          <div class="description">             <p class="title">{{ settings.home_blockhtml_tilte_1 }}</p>             <p class="text">{{ settings.home_blockhtml_des_1 }}</p>                      <p class="button hidden-md hidden-sm hidden-xs"><a class="btn btn-outline-small" href="{{ settings.home_blockhtml_link_1 }}" title="{{ settings.home_blockhtml_buttontxt_1 }}">{{ settings.home_blockhtml_buttontxt_1 }}</a></p>           </div>             </a>             </div>   </div> 

`

position div inside <a> tags, so, giving a tag own class. need css styling so:

.classname {     display:block; { 

now, <a> tag inside <div> cause issues, you'll need change element, example below changes <span>.

<a href="{{ settings.home_blockhtml_link_1 }}" class="classname"> <div class="text-center col-lg-4 col-md-4 col-sm-4 col-xs-12"> <div class="img1">         {{ 'home_html_1.png' | asset_url | img_tag:    settings.home_blockhtml_tilte_1, "img-responsive" }}        <div class="description">         <p class="title">{{ settings.home_blockhtml_tilte_1 }}</p>         <p class="text">{{ settings.home_blockhtml_des_1 }}</p>          <p class="button hidden-md hidden-sm hidden-xs"><span class="btn btn-outline-small" title="{{ settings.home_blockhtml_buttontxt_1 }}">{{ settings.home_blockhtml_buttontxt_1 }}</span></p>       </div>      </div>  </div>  </a> 

see: https://jsfiddle.net/88fx4p3x/