I am encountering an issue with a web page that has a simple layout. The footer of the page contains a link, but it is unclickable. I attempted to set z-index: 1000000 for the footer element, however, this did not resolve the problem. I am unsure of what might be causing this issue. Can someone please review the code and provide insight into what may be wrong?
Below is the HTML code snippet:
<!DOCTYPE html>
<html itemscope itemtype="https://schema.org/Article">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="xxxxxx.css">
</head>
<body>
<div id="wrapper">
<div class="container-fluid">
<div class="row">
<div id="main" class="translateInit translate-2 col-12">
@yield('content')
</div>
</div>
</div>
<div id="footerPusher"></div>
</div>
<div id="footer">
<strong>Created & designed by <a href="https://tatrytec.eu/blog">Tatrytec.eu</a> 2020</strong>  
</div>
</body>
</html>
Additionally, here is an excerpt of the associated SCSS code:
#wrapper {
min-height: 100%;
/* ensures visibility of the footer as 100% extends outside window */
margin-bottom: -5em;
}
#main {
padding-bottom: 10em;
}