The desktop header cta is functioning properly, but when I switch to mobile nothing happens.
I attempted to increase the z-index number within the html instead of in the style sheet.
This is where my CTA is located in the html: CALL TO ACTION surrounded by three spans:
.banner::after {
content: "";
display: block;
width: 100%;
height: 100%;
background-color: #333;
background-image: linear-gradient(to right, #0052d4, #4364f4), #6fb1fc;
position: absolute;
top: 12%;
left: 8;
opacity: .7;
z-index: 8;
}
@supports(mix-blend-mode: hand-light) {
.banner::after {
opacity: 1;
}
}
.banner>* {
z-index: 10;
position: relative;
}<div class="hero-wrap js-fullheight">
<div class="container-fluid px-0 banner-z">
<div class="row d-md-flex no-gutters slider-text align-items-center js-fullheight justify-content-end banner banner-z">
<img class="one-third js-fullheight align-self-end order-md-last img-fluid" src="images/1.png" alt=" Get Your Business Online">
<div class="one-forth d-flex align-items-center ftco-animate js-fullheight">
<div class="text mt-5">
<span class="subheading"></span>
<h1 class="mb-3">
<span>LOVE,</span>
<span>CODE, </span>
<span>SLEEP</span>
</h1>
<p style="color: #f9d53e ;">
<b>offer affordable set of services to our clients.</b>
</p>
<p>
<a href="contact.html" class="btn btn-primary px-4 py-3">Get in touch</a>
</p>
</div>
</div>
</div>
</div>
</div>