Search code examples
htmlcssbootstrap-4font-awesomecenter

Centering images in mobile responsive view

I'm working on a website with Bootstrap and FontAwesome that includes clickable images and font-awesome elements that intersect. As a result, I came up with the following code:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>
    <style>
        .tr {
             border: none;
         }

         .ebp_container {
             /* What you need */
             position: relative;
             /* the code below is only for this example */
             width: 300px;
             /*background-color: yellow;*/
             margin: 10px;
             padding: 20px;
         }

         .ebp_video {
             /* What you need */
             position: relative;
             z-index: 2;
             /* the code below is only for this example */
             width: 80px;
             /* height: 100px;*/
             display: flex;
             align-items: center;
             justify-content: center;
             text-align: center;
             color: var(--eniac-blue);
             cursor: pointer;
             /*Background*/
             border-radius: 15px;

             /*Centering the images*/
             display: block;
             margin-left: auto;
             margin-right: auto;
         }

             .ebp_video:hover {
                 /*    background-color: rgba(255,255,255,0.1);*/
                 opacity: 0.9
             }

         .ebp_pdf {
             /* What you need */
             position: absolute;
             top: 70px; /* change value to desired position */
             right: 90px; /* change value to desired position */
             z-index: 1;
             /* the code below is only for this example */
             width: 35px;
             
             display: flex;
             align-items: center;
             justify-content: center;
             text-align: center;
         }

             .ebp_pdf:hover {
                 opacity: 0.9
             }

         .ebp_wrapper {
             float: left;
             width: 25%;
             align-items: center;
         }

         @media screen and (max-width: 985px) {
             [class^="icon-"], [class*=" icon-"] {
                 display: inline-block;
                 width: 100%;
             }

             .ebp_wrapper {
                 float: none;
                 margin: auto;
                 width: 60%;
             }
         }
     </style>
    
    <div class="container" style="margin-top: 50px;">
        <div class="ebp_wrapper">
            <div class="ebp_container">
                <h5 style="margin-bottom: 50px" class="font-weight-bold">Some Text</h5>
                    <a href="#" target=”_blank”><div class="ebp_pdf far fa-file-pdf fa-3x" style="color: #b3001b"></div></a>
                    <div><img class="ebp_video" src="eplay.png" data-toggle="modal" data-target="#exampleModal" /></div>
            </div>
        </div>

        <div class="ebp_wrapper">
            <div class="ebp_container">
                <h5 style="margin-bottom: 50px" class="font-weight-bold">Some Text</h5>
                <a href="#"><div class="ebp_pdf far fa-file-pdf fa-3x" style="color: #b3001b"></div></a>
                <div><img class="ebp_video" src="eplay.png" data-toggle="modal" data-target="#exampleModal" /></div>
            </div>
        </div>

        <div class="ebp_wrapper">
            <div class="ebp_container">
                <h5 style="margin-bottom: 50px" class="font-weight-bold">Some Text</h5>
                <a href="#"><div class="ebp_pdf far fa-file-pdf fa-3x" style="color: #b3001b"></div></a>
                <div><img class="ebp_video" src="eplay.png" data-toggle="modal" data-target="#exampleModal" /></div>
            </div>
        </div>

        <div class="ebp_wrapper">
            <div class="ebp_container">
                <h5 style="margin-bottom: 50px" class="font-weight-bold">Some Text</h5>
                <a href="#"><div class="ebp_pdf far fa-file-pdf fa-3x" style="color: #b3001b"></div></a>
                <div><img class="ebp_video" src="eplay.png" data-toggle="modal" data-target="#exampleModal" /></div>
            </div>
        </div>
</div>
  
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

Right now, I'm attempting to create a mobile responsive view with the images centered and below each other. When I try to center it, however, it puts it to the right rather than in the middle.

The buttons in desktop view:

enter image description here

The buttons in mobile view: as you can see it is far from the optional (The yellow rectangle)

enter image description here

The question is, how could I center these images?

Edit: my first attempt was with Bootstrap, but changing the screen size takes away the two buttons from each other.

Solution 
  • <style>
           
    .tr {
         border: none;
     }

     .ebp_container {
         /* What you need */
         position: relative;
         /* the code below is only for this example */
         width: 300px;
         /*background-color: yellow;*/
         margin: 10px;
         padding: 20px;
     }

 


     .ebp_video {
         /* What you need */
         position: relative;
         z-index: 2;
         /* the code below is only for this example */
         width: 80px;
         /* height: 100px;*/
         display: flex;
         align-items: center;
         justify-content: center;
         text-align: center;
         color: var(--eniac-blue);
         cursor: pointer;
         /*Background*/
         border-radius: 15px;



         /*Centering the images*/
         display: block;
       margin-left: auto;
         margin-right: auto;
     }


         .ebp_video:hover {
             /*    background-color: rgba(255,255,255,0.1);*/
             opacity: 0.9
         }






     .ebp_pdf {
         /* What you need */
       
         position: absolute;
         top: 70px; /* change value to desired position */
         right: 90px; /* change value to desired position */
         z-index: 1;
         /* the code below is only for this example */
         width: 35px;
         
         display: flex;
         align-items: center;
         justify-content: center;
         text-align: center;
     }

         .ebp_pdf:hover {
             opacity: 0.9
         }


     .ebp_wrapper {
         float: left;
         width: 25%;
         align-items: center;
     }


     @media screen and (max-width: 985px) {


         [class^="icon-"], [class*=" icon-"] {
             display: inline-block;
             width: 100%;
         }




         .ebp_wrapper {
                 width: 100%;
text-align: center;
         
             
         }
         
         .ebp_container {
margin: auto;
         }
     
    
     }
 </style>