Ad
How To Make A Div Linkable?
I have a block on my Shopify theme's home page that is basically an image box with text over it and when the text is clicked, it links to a url.
I want the box itself to be linkable in case I don't use any text. This is the code below that makes the text a link. How can I make the entire box the link?
`<div class="text-center col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="img1">
<a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" 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" target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="{{ settings.home_blockhtml_link_1 }}" title="{{ settings.home_blockhtml_buttontxt_1 }}">{{ settings.home_blockhtml_buttontxt_1 }}</a></p>
</div>
</a>
</div>
</div>
`
Ad
Answer
Position the div
inside your <a>
tags, like so, giving the a
tag their own class. This will need CSS styling like so:
.className {
display:block;
{
Now, the <a>
tag inside the <div>
will cause you issues, so you'll need to change this to element, the example below changes it to a <span>
.
<a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" 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>
Ad
source: stackoverflow.com
Related Questions
- → October CMS create a multi select Form field
- → How to update data attribute on Ajax complete
- → laravel blade templating error
- → should I choose reactjs+f7 or f7+vue.js?
- → How to dynamically add class to parent div of focused input field?
- → Setting the maxlength of text in an element that is displayed
- → Undefined Result for Variable with Javascript innerHTML function
- → Expanding search bar not expanding before search
- → Get the calling element with vue.js
- → Blade: how to include a section in one page but not in another
- → How to print/log reactjs rendered dom?
- → how to write react component to construct HTML DOM
- → How to add a timer in HTML5 and Javascript?
Ad