Despite my best efforts, I can't seem to get this to work as intended.
I'm struggling to prevent the "main" content (in this case, the images) from disappearing under the bottom navigation bar.
In the provided jsfiddle link, you can see that the image is being partially cut off, which is not what I want.
Is there a way to treat the "Main" content as a separate scrollable entity?
The ultimate goal is for the last image to be fully visible on the page when scrolled to the bottom.
Current code can be found here.
Here is the code snippet:
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300&display=swap" rel="stylesheet">
<link href=" /static/custom.css" rel="stylesheet">
<script src="/static/funcs.js?v=3"></script>
<script src="/static/confetti.js"></script>
</head>
<body style="background-color: #F3F9E3">
<!-- Rest of the HTML code here -->
</body>