How to place buttons on the bottom corner of a page and have it be responsive?-Twitter bootstrap

Billy
September 4, 2019
206 views
3 votes
3 Answers

I am working on this website as a side project. I have been trying to make this page responsive (this is my first responsive web page). So far I figured out everything except the social media buttons. I would like to place them on the bottom right corner of the page and have it be responsive however every time I do this when I resize the window they move start to move up. I have included my HTML and CSS. Thank you for all of your help.

I have tried using flexbox, bootstrap, and grid and cant get any of them to work, I am also a bit confused about which kind of CSS to use.

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&amp;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;
}

image of site showing buttons

Answers

- jdfink
- September 4, 2019 at 9:48 pm
- 0 votes
0
I appreciate you’re trying to use Flexbox, but in this case it’s not the right tool for the job.

You should use either absolute or fixed positioning (depending on what you’re going for) to get the social buttons in the bottom corner. Just make sure body has position:relative.
```
body { position:relative }
#socialMediaBottons { position:fixed; bottom:10px; right:10px; }
#fbButton, #twitterButton { display:inline-block; }
```
This way, whatever height or width the viewport is, the buttons will always be a specified distance from the bottom right corner (you can adjust bottom and right to your liking).
Login or Signup to reply.

- Musevarg
- September 4, 2019 at 9:50 pm
- 0 votes
0
You can use CSS as below:
```
.socialMediaButton{
    display: inline-block;
    margin: 5px;
}

.socialMediaButtons {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
}
```
See result here.
Login or Signup to reply.

This solution comes from the Bootstrap 4 page on Flex _

As recommended I added flex classes d-flex justify-content-end to the div #socialMediaBottons and removed the same from your CSS

So now the HTML section looks like this:

<div id="socialMediaBottons" class="d-flex justify-content-end"> 
    <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&amp;src=sdkpreparse"
          class="fb-xfbml-parse-ignore">Share</a></div>
    </div>  
  </div>

…while the pertinent CSS block only contains the height attribute:

#socialMediaBottons{
    height: 50vh;
}