I'm relatively new to the world of Javascript, CSS, and HTML.
Currently, I'm attempting to anchor a div to the center and bottom of its parent div. The parent div contains a responsive background image and my fa fa-arrow icon is correctly positioned at the bottom but it's not centered horizontally or responsive in that direction.
If anyone could offer some guidance on how to fix this issue or let me know if I've started off on the wrong foot, I would greatly appreciate it!
Thanks in advance.
Below is the code snippet:
HTML:
<div class="content-1">
<div id="to-first">
<i class="fa fa-angle-down"></i>
</div>
</div>
CSS:
.content-1 {
position: relative;
}
#to-first {
position: absolute;
margin-right: 50%;
bottom: 10;
color: #000;
font-size: 50px;
text-align: center;
cursor: pointer;
display: none;
}
Javascript:
var main = function() {
$(document).ready(function() {
$('#to-first').show();
});
$('#to-first').click(function() {
$('body,html').animate({scrollTop: $("footer").offset().top},"slow");
});
};
$(document).ready(main);
And here is a jsfiddle link for reference: