Hey the button on my banner grid is not clickable, there is the code of the banner grid:
{% for block in section.blocks %}{{ block.settings.banner_title }}
{%endif%}{%if block.settings.banner_button_text != ‘’ %}
{{ block.settings.banner_button_text }}
{% endif %}
@media(max-width: 767px){
.banner1{
padding-top: {{ section.settings.banner1_padding_top_xs }}px;
padding-bottom: {{ section.settings.banner1_padding_bottom_xs }}px;
}
.banner-grid.banner1 .nth-child{
margin-top: 20px;
}
.banner-grid.banner1 .nth-child:first-child{
margin-top: 0px;
}
}
.banner1 .banner-block{
position: relative;
}
.banner-grid.banner1{
display: flex;
padding-left: 45px;
padding-right: 45px;
}
.banner-grid.banner1 .banner-block:last-child {
margin: 0;
}
.banner-grid.banner1 .banner-block {
width: 50%;
margin-right: 45px;
}
.banner1 .banner-block .banner-content{
width: 50%;
position: absolute;
bottom: 20px;
z-index: 1;
transition: all 300ms linear;
-webkit-transition: all 300ms linear;
-ms-transition: all 300ms linear;
}
.banner-grid.banner1 .banner-block:before {
position: absolute;
content: “”;
left: 0;
top: 0;
background: rgba(0, 0, 0, .3);
width: 100%;
height: 100%;
}
.banner-grid.banner1 .banner-block:after {
position: absolute;
content: “”;
left: 20px;
top: 20px;
right: 20px;
bottom: 20px;
z-index: 1;
border: 1px solid #fff;
transition: all 300ms linear;
opacity: 0;
}
.banner-grid.banner1 .banner-block:hover:after{
opacity: 1;
}
@media (max-width: 1199px) {
.banner1 .banner-block .banner-content{
width: 50%;
}
}
.banner1 .banner-block .banner-content.banner-content-left{
{%- if settings.enable_rtl -%}
right: 50px;
{%- else -%}
left: 50px;
{%- endif -%}
}
.banner1 .banner-block .banner-content.banner-content-right{
{%- if settings.enable_rtl -%}
left: 60px;
{%- else -%}
right: 60px;
{%- endif -%}
}
.banner1 .banner-block .banner-content.banner-content-center{
left: 0px;
right: 0px;
margin: 0 auto;
}
.banner1 .banner-block .banner-content.banner-text-left{
{%- if settings.enable_rtl -%}
text-align: right;
{%- else -%}
text-align: left;
{%- endif -%}
}
.banner1 .banner-block .banner-content.banner-text-right{
{%- if settings.enable_rtl -%}
text-align: left;
{%- else -%}
text-align: right;
{%- endif -%}
}
.banner1 .banner-block .banner-content.banner-text-center{
text-align: center;
}
@media (max-width: 1199px) {
.banner1 .banner-block .banner-content.banner-content-left{
{%- if settings.enable_rtl -%}
right: 15px;
{%- else -%}
left: 15px;
{%- endif -%}
}
.banner1 .banner-block .banner-content.banner-content-right{
{%- if settings.enable_rtl -%}
left: 15px;
{%- else -%}
right: 15px;
{%- endif -%}
}
.banner1 .banner-block .banner-content.banner-content-center{
left: 15px;
right: 15px;
margin: 0 auto;
}
}
/* banner text css */
.banner1 .banner-block .banner-content h2 {
font-size: 42px;
font-weight: 500;
color: #fff;
letter-spacing: 1px;
text-transform: uppercase;
}
.banner1 .banner-block .banner-content a.btn{
padding: 0 0px 5px;
background: transparent;
border: none;
border-bottom: 2px solid;
margin-top: 20px;
opacity: 0;
transition: all 300ms linear;
-webkit-transition: all 300ms linear;
-ms-transition: all 300ms linear;
}
.banner1 .banner-block:hover .banner-content a.btn {
opacity: 1;
}
.banner1 .banner-block:hover .banner-content {bottom: 50px;}
.banner-grid.banner1 .banner-block:hover:after {
opacity: 1;
}
@media (max-width: 1199px) {
.banner1 .banner-block .banner-content h2{
font-size: 20px;
}
}
@media (max-width: 767px) {
.banner-grid.banner1 {
flex-direction: column;
}
.banner-grid.banner1 .banner-block{
width: 100%;
}
.banner-grid.banner1 .banner-block:last-child{
margin-top: 15px
}
}