Currently working on this website as a personal side project, focusing on making it responsive. This is my first attempt at creating a responsive webpage, and I have successfully figured out most aspects except for the positioning of the social media buttons. I aim to have them located in the bottom right corner of the page while ensuring responsiveness. However, every time I resize the window, the buttons start to move upwards. Below, I have included my HTML and CSS code. Any assistance provided is greatly appreciated.
Despite my efforts using flexbox, bootstrap, and grid, I have not been able to achieve the desired result. Additionally, I find myself a bit confused about which CSS properties to apply in this scenario.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Giphy Search</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"integrity="sha384ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2Zw1T" crossorigin="anonymous">
<link href="Style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="fb-root"></div>
<script async defer crossorigin="anonymous"
src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v4.0">
</script>
<div id="imgLogoDiv">
<img id="imgLogo" src="/img/logo.png" alt="unable to load image">
</div>
<div id="divTxtField">
<input type="text" id="search" placeholder="Search for a gif!">
</div>
<div id="bs-divSearchButton">
<button id="bs-Button" type="button" class="btn btn-dark">Search</button>
</div>
<br>
<div id="GifDisplay">
<img id="gif">
</div>
<div id="socialMediaBottons">
<div id="twitterButton">
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-size="large"
data-text="Search for a Gif!" data-show-count="false">Tweet</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<div id="fbButton">
<div class="fb-share-button" data-
href="https://www.facebook.com/GIPHY/" data-layout="button" data-size="large"><a target="_blank"
href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&src=sdkpreparse"
class="fb-xfbml-parse-ignore">Share</a></div>
</div>
</div>
<script src="JS/script.js"></script>
</body>
</html>
CSS:
body {
background-image: url(img/background.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
#imgLogoDiv {
display: flex;
justify-content: center;
height: auto;
/*height: auto
Not sure if I should keep this since it seems to have to effect.*/
}
#imgLogoDiv #imgLogo {
width: 45%;
height: auto;
}
#divTxtField {
display: flex;
justify-content: center;
position: relative;
top: 20px;
padding-bottom: 1%;
}
#divTxtField #search {
border-radius: 25px;
}
#divTxtField #search:hover {
cursor: auto;
}
#bs-divSearchButton {
display: flex;
justify-content: center;
position: relative;
top: 20px;
padding-bottom: 20px;
}
#bs-divSearchButton #bs-Button:hover {
cursor: pointer;
}
#socialMediaBottons{
display: flex;
justify-content: flex-end;
align-items: flex-end;
height: 50vh;
}
#GifDisplay {
display: flex;
justify-content: center;
}