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:
The buttons in mobile view: as you can see it is far from the optional (The yellow rectangle)
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.
<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>