How can I make the hover to be equal in size despite the line difference in the paragraph? As of now the size of my hover in 'content' class is different since my p.../p in the second and third card is different in the first and fourth card. Is there a way to make my hover size to be equal in all cards? Please see below codes. Thank you
.card .content {
width: 100%;
background: #fff;
opacity: 0.65;
position: absolute;
bottom: -60%;
margin-left: -4px;
transition: all ease 0.5s;
border-radius: 4px;
box-shadow: 0px -3px 4px rgba(10, 10, 10, 0.09)
}
.card .content .category {
font-size: 17px;
font-weight: 600
}
.card .content .price {
font-size: 17px;
font-weight: 500;
color: #0d6efd
}
.card .content p {
font-weight: 500;
font-size: 12px;
text-align: center;
}
.card:hover .content {
bottom: 0%
}
.buttons button {
border-radius: 1px;
margin-bottom: 10px;
transition: all ease 0.3s
}
.content {
padding: 10px
}
hr {
border: 0;
height: 1px;
width: 60%;
position: relative;
margin: 15px auto;
}
.d-flex {
font-weight: 500;
font-size: 12px;
margin: 15px auto;
}
.fa-play-circle {
padding-right: 4px;
padding-top: 3px;
}
<body>
<div id="image">
<div class="row">
<div class="image-column col-lg-3 col-md-6">
<div class="card h-100 p-1 card-container">
<div class="card-header">
<h3>GABEL LOFFEL</h3>
</div>
<div class="card-img-wrapper ">
<img src="assets\image_1.jpg" alt="">
<div class="content">
<hr>
<p>Get out your <br> Lederhosen!</p>
<hr>
<div class="d-flex justify-content-center"> <i class="far fa-play-circle"></i> More </div>
</div>
</div>
</div>
</div>
<div class="image-column col-lg-3 col-md-6">
<div class="card h-100 p-1 card-container">
<div class="card-header">
<h3>GARY GARI</h3>
</div>
<div class="card-img-wrapper ">
<img src="assets\image_2.jpg" alt="">
<div class="content">
<hr>
<p>The delicious <br> headquarters for all <br> your ginger related <br> needs!</p>
<hr>
<div class="d-flex justify-content-center"> <i class="far fa-play-circle"></i> More </div>
</div>
</div>
</div>
</div>
<div class="image-column col-lg-3 col-md-6">
<div class="card h-100 p-1 card-container">
<div class="card-header">
<h3>IL PIATTO</h3>
</div>
<div class="card-img-wrapper ">
<img src="assets\image_3.jpg" alt="">
<div class="content">
<hr>
<p>Got wild finicky kids? <br> Head for Il Piatto for <br> kid-friendly Italian <br> Fun!</p>
<hr>
<div class="d-flex justify-content-center"> <i class="far fa-play-circle"></i> More </div>
</div>
</div>
</div>
</div>
<div class="image-column col-lg-3 col-md-6">
<div class="card h-100 p-1 card-container">
<div class="card-header">
<h3>PIERRE PLATTERS</h3>
</div>
<div class="card-img-wrapper ">
<img src="assets\image_4.jpg" alt="">
<div class="content">
<hr>
<p>Smart talks, Smart <br> eats!</p>
<hr>
<div class="d-flex justify-content-center"> <i class="far fa-play-circle"></i> More </div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
enclosed your <p></P> in content class inside a div give one custom class para and other bootstrap flex classes to justify and align center
and given css to .content
height: 280px !important;
and given css to .content .para
.content .para{ height: 100px !important; }
.card .content {
width: 100%;
background: #fff;
opacity: 0.65;
position: absolute;
bottom: -60%;
margin-left: -4px;
transition: all ease 0.5s;
border-radius: 4px;
box-shadow: 0px -3px 4px rgba(10, 10, 10, 0.09)
}
.card .content .category {
font-size: 17px;
font-weight: 600
}
.card .content .price {
font-size: 17px;
font-weight: 500;
color: #0d6efd
}
.card .content p {
font-weight: 500;
font-size: 12px;
text-align: center;
}
.card:hover .content {
bottom: 0%
}
.buttons button {
border-radius: 1px;
margin-bottom: 10px;
transition: all ease 0.3s
}
.content {
height: 280px !important;
padding: 10px;
}
.content .para {
height: 100px !important;
}
hr {
border: 0;
height: 1px;
width: 60%;
position: relative;
margin: 15px auto;
}
.d-flex {
font-weight: 500;
font-size: 12px;
margin: 15px auto;
}
.fa-play-circle {
padding-right: 4px;
padding-top: 3px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div id="image">
<div class="row">
<div class="image-column col-lg-3 col-md-6">
<div class="card h-100 p-1 card-container">
<div class="card-header">
<h3>GABEL LOFFEL</h3>
</div>
<div class="card-img-wrapper ">
<img src="images/2.jpg" class="img-fluid" alt="">
<div class="content">
<hr>
<div class="para d-flex justify-content-center align-items-center">
<p>Get out your <br> Lederhosen!</p>
</div>
<hr>
<div class="d-flex justify-content-center"> <i class="far fa-play-circle"></i> More </div>
</div>
</div>
</div>
</div>
<div class="image-column col-lg-3 col-md-6">
<div class="card h-100 p-1 card-container">
<div class="card-header">
<h3>GARY GARI</h3>
</div>
<div class="card-img-wrapper ">
<img src="images/3.jpg" class="img-fluid" alt="">
<div class="content">
<hr>
<div class="para d-flex justify-content-center align-items-center">
<p>The delicious <br> headquarters for all <br> your ginger related <br> needs!</p>
</div>
<hr>
<div class="d-flex justify-content-center"> <i class="far fa-play-circle"></i> More </div>
</div>
</div>
</div>
</div>
<div class="image-column col-lg-3 col-md-6">
<div class="card h-100 p-1 card-container">
<div class="card-header">
<h3>IL PIATTO</h3>
</div>
<div class="card-img-wrapper ">
<img src="images/4.jpg" class="img-fluid" alt="">
<div class="content">
<hr>
<div class="para d-flex justify-content-center align-items-center">
<p>Got wild finicky kids? <br> Head for Il Piatto for <br> kid-friendly Italian <br> Fun!
</p>
</div>
<hr>
<div class="d-flex justify-content-center"> <i class="far fa-play-circle"></i> More </div>
</div>
</div>
</div>
</div>
<div class="image-column col-lg-3 col-md-6">
<div class="card h-100 p-1 card-container">
<div class="card-header">
<h3>PIERRE PLATTERS</h3>
</div>
<div class="card-img-wrapper ">
<img src="images/2.jpg" class="img-fluid" alt="">
<div class="content">
<hr>
<div class="para d-flex justify-content-center align-items-center">
<p>Smart talks, Smart <br> eats!</p>
</div>
<hr>
<div class="d-flex justify-content-center"> <i class="far fa-play-circle"></i> More </div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js"></script>
Try this code in browser to see
enclosed your <p></P> in content class inside a div give one custom class para and other bootstrap flex classes to justify and align center
and given css to .content
height: 280px !important;
and given css to .content .para
.content .para{ height: 100px !important; }
and in card img used class img-fluid
.card .content {
width: 100%;
background: #fff;
opacity: 0.65;
position: absolute;
bottom: -60%;
margin-left: -4px;
transition: all ease 0.5s;
border-radius: 4px;
box-shadow: 0px -3px 4px rgba(10, 10, 10, 0.09)
}
.card .content .category {
font-size: 17px;
font-weight: 600
}
.card .content .price {
font-size: 17px;
font-weight: 500;
color: #0d6efd
}
.card .content p {
font-weight: 500;
font-size: 12px;
text-align: center;
}
.card:hover .content {
bottom: 0%
}
.buttons button {
border-radius: 1px;
margin-bottom: 10px;
transition: all ease 0.3s
}
.content {
height: 280px !important;
padding: 10px;
}
.content .para {
height: 100px !important;
}
hr {
border: 0;
height: 1px;
width: 60%;
position: relative;
margin: 15px auto;
}
.d-flex {
font-weight: 500;
font-size: 12px;
margin: 15px auto;
}
.fa-play-circle {
padding-right: 4px;
padding-top: 3px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div id="image">
<div class="row">
<div class="image-column col-lg-3 col-md-6">
<div class="card h-100 p-1 card-container">
<div class="card-header">
<h3>GABEL LOFFEL</h3>
</div>
<div class="card-img-wrapper ">
<img src="assets\image_1.jpg" class="img-fluid" alt="">
<div class="content">
<hr>
<div class="para d-flex justify-content-center align-items-center">
<p>Get out your <br> Lederhosen!</p>
</div>
<hr>
<div class="d-flex justify-content-center"> <i class="far fa-play-circle"></i> More </div>
</div>
</div>
</div>
</div>
<div class="image-column col-lg-3 col-md-6">
<div class="card h-100 p-1 card-container">
<div class="card-header">
<h3>GARY GARI</h3>
</div>
<div class="card-img-wrapper ">
<img src="assets\image_2.jpg" class="img-fluid" alt="">
<div class="content">
<hr>
<div class="para d-flex justify-content-center align-items-center">
<p>The delicious <br> headquarters for all <br> your ginger related <br> needs!</p>
</div>
<hr>
<div class="d-flex justify-content-center"> <i class="far fa-play-circle"></i> More </div>
</div>
</div>
</div>
</div>
<div class="image-column col-lg-3 col-md-6">
<div class="card h-100 p-1 card-container">
<div class="card-header">
<h3>IL PIATTO</h3>
</div>
<div class="card-img-wrapper ">
<img src="assets\image_3.jpg" class="img-fluid" alt="">
<div class="content">
<hr>
<div class="para d-flex justify-content-center align-items-center">
<p>Got wild finicky kids? <br> Head for Il Piatto for <br> kid-friendly Italian <br> Fun!
</p>
</div>
<hr>
<div class="d-flex justify-content-center"> <i class="far fa-play-circle"></i> More </div>
</div>
</div>
</div>
</div>
<div class="image-column col-lg-3 col-md-6">
<div class="card h-100 p-1 card-container">
<div class="card-header">
<h3>PIERRE PLATTERS</h3>
</div>
<div class="card-img-wrapper ">
<img src="assets\image_4.jpg" class="img-fluid" alt="">
<div class="content">
<hr>
<div class="para d-flex justify-content-center align-items-center">
<p>Smart talks, Smart <br> eats!</p>
</div>
<hr>
<div class="d-flex justify-content-center"> <i class="far fa-play-circle"></i> More </div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js"></script>
Related
How can I draw the line showing in the picture below?
my current page looks like this:
I want to add that line at the top with the same title
(just to mention I'm using bootstrap 5)
<div class="container-fluid fixed-bottom" style="margin-bottom: 16px;">
<div class="row align-items-center" style="margin-left: 196px; margin-right: 196px;">
<div class="col align-items-center d-flex justify-content-center">
<div class="text-center bottomElement">
<img class="img-fluid bottomIcon" src="/assets/business.png" width="56px" height="56px" />
<p class="bottomText" style="color: white;">Business</p>
</div>
</div>
<div class="col align-items-center d-flex justify-content-center">
<div class="text-center bottomElement">
<img class="img-fluid bottomIcon" src="/assets/calculator.png" width="56px" height="56px" />
<p class="bottomText" style="color: white;">Calculator</p>
</div>
</div>
<div class="col align-items-center d-flex justify-content-center">
<div class="text-center bottomElement">
<img class="img-fluid bottomIcon" src="/assets/oogPermits.png" width="56px" height="56px" />
<p class="bottomText" style="color: white;">OOG Permits</p>
</div>
</div>
<div class="col align-items-center d-flex justify-content-center">
<div class="text-center bottomElement">
<img class="img-fluid bottomIcon" src="/assets/services.png" width="56px" height="56px" />
<p class="bottomText" style="color: white;">Services</p>
</div>
</div>
<div class="col align-items-center d-flex justify-content-center">
<div class="text-center bottomElement">
<img class="img-fluid bottomIcon" src="/assets/career.png" width="56px" height="56px" />
<p class="bottomText" style="color: white;">Career</p>
</div>
</div>
</div>
</div>
You can use flexbox. Then, you have to play with the borders. Here is an example
<html>
<header>
<meta charset="utf-8" />
<title>Example App</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
</header>
<body>
<div class="content d-flex justify-content-center">
<div class="left-border align-self-center"></div>
<div class="text">FAST NAVIGATOR</div>
<div class="right-border align-self-center"></div>
</div>
<div class="text-center">Your content here</div>
</body>
</html>
<style>
.content {
padding: 1rem;
}
.left-border {
border: 2px solid black;
width: 100%;
height: 10px;
border-bottom: none;
border-right: none;
background: transparent;
}
.text {
font-size: 12px;
white-space: nowrap;
padding-left: 16px;
padding-right: 16px;
margin-top:-8px;
}
.right-border {
border: 2px solid black;
width: 100%;
height: 10px;
border-bottom: none;
border-left: none;
background: transparent;
}
</style>
fieldset {
padding: 0;
height: 8px;
border-bottom: none;
}
<fieldset>
<legend align="center">Title</legend>
</fieldset>
I have a carrousel with several images but 3 of them don't have the same height as the other and I don't know why. I tried putting fixed height but it isn't responsive, it doesn't adapt when I resize the window, compared to the other images.
I think that the 3 images don't have the same resolution as the others, it could be the issue ?
The Bad Images are the last 3 div elements.
.carousel-cell {
width: 100%;
height: 700px;
margin: 30px 10px;
overflow: hidden;
padding: 20px 15px;
display: flex;
flex-direction: column;
box-shadow: O 5px 202px rgba(0, 0, 0, 0.5);
border-radius: 15px;
}
.carousel-cell:hover {
height: 100%;
cursor: pointer;
border-radius: 15px;
transition: transform 0.3s ease-in;
transform: translateY(-25px);
}
.carousel-cell .imgBx {
width: 100%;
height: 100%;
top: -60px;
left: 20px;
z-index: 1;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
border-radius: 15px;
}
.carousel-cell .imgBx img {
max-width: 100%;
object-fit: cover;
border-radius: 15px;
}
.carousel-cell .content {
margin-top: 40px;
padding: 10px 5px;
text-align: center;
color: white;
visibility: hidden;
opacity: 0;
transition: 0.3s ease-in-out;
border-radius: 15px;
}
.carousel-cell:hover .content {
visibility: visible;
opacity: 1;
margin-top: 0px;
transition-delay: 0.2s;
border-radius: 15px;
}
<section class="bg-secondary p5">
<div class="text-center" data-aos="fade-right">
<h2 class="lg py-2">Qui fait vivre l'association ?</h2>
</div>
<div class="main-carousel" data-aos="zoom-in">
<div class="carousel-cell">
<div class="imgBx"><img src="images/tereza2.jpg" alt=""></div>
<div class="text-center py-2 content">
<h2 class="md">Tereza SMELIKOVA</h2>
<p>Présidente</p>
</div>
</div>
<div class="carousel-cell">
<div class="imgBx"><img src="images/augustin.jpg" alt=""></div>
<div class="text-center py-2 content">
<h2 class="md">Augustin CHOULY</h2>
<p>Vice-Président</p>
</div>
</div>
<div class="carousel-cell">
<div class="imgBx"><img src="images/tiav.jpg" alt=""></div>
<div class="text-center py-2 content">
<h2 class="md">Tiav RANDRIANARIVELO</h2>
<p>Responsable SI</p>
</div>
</div>
<div class="carousel-cell">
<div class="imgBx"><img src="images/brune2.jpg" alt=""></div>
<div class="text-center py-2 content">
<h2 class="md">Brune HENRY</h2>
<p>Responsable Projet</p>
</div>
</div>
<div class="carousel-cell">
<div class="imgBx"><img src="images/audrey.jpg" alt=""></div>
<div class="text-center py-2 content">
<h2 class="md">Audrey PILARD</h2>
<p>Responsable Event</p>
</div>
</div>
<div class="carousel-cell">
<div class="imgBx"><img src="images/sonya.jpg" alt=""></div>
<div class="text-center py-2 content">
<h2 class="md">Sonya NDOMKEU</h2>
<p>Responsable Qualité</p>
</div>
</div>
<div class="carousel-cell">
<div class="imgBx"><img src="images/flavie.jpg" alt=""></div>
<div class="text-center py-2 content">
<h1 class="md">Flavie MALEC</h1>
<p>Chargé de Qualité</p>
</div>
</div>
<div class="carousel-cell">
<div class="imgBx"><img src="images/camille.jpg" alt=""></div>
<div class="text-center py-2 content">
<h2 class="md">Camille VIALLET</h2>
<p>Secrétaire</p>
</div>
</div>
<div class="carousel-cell">
<div class="imgBx"><img src="images/thaddee.jpg" alt=""></div>
<div class="text-center py-2 content">
<h2 class="md">Thaddée BRICOUT</h2>
<p>Trésorerier</p>
</div>
</div>
<div class="carousel-cell">
<div class="imgBx"><img src="images/DSC08754.jpg" alt=""></div>
<div class="text-center py-2 content">
<h2 class="md">Lucca SOLTNER</h2>
<p>Chargé d'Affaires</p>
</div>
</div>
<div class="carousel-cell">
<div class="imgBx"><img src="images/Image d’iOS.jpg" id="axel" alt=""></div>
<div class="text-center py-2 content">
<h2 class="md">Axel ATTIA</h2>
<p>Chargé Devco</p>
</div>
</div>
<div class="carousel-cell">
<div class="imgBx"><img src="images/1641645535346.jpg" id="nora" alt=""></div>
<div class="text-center py-2 content">
<h2 class="md">Nora ELABAD</h2>
<p>Chargé de Communications</p>
</div>
</div>
<div class="carousel-cell">
<div class="imgBx"><img src="images/_DSC7892.jpg" alt="" id="angelo"></div>
<div class="text-center py-2 content">
<h2 class="md">Angelo</h2>
<p>Chargé de Communications</p>
</div>
</div>
</div>
</section>
Images of the carrousel :
Good Images
Bad IMAGES
You could try resizing the problem images in MS Paint, GIMP, or Photoshop to be the same size. Backup the originals somewhere and get the height to width ratio the same as the others. Looks to me like the img is filling the horizontal dimensions of it's parent div. If you tried to make the bad images I see fill the vertical dimensions, it would stretch the image vertically to be out of proportion. If that doesn't work. Try putting different brightly colored borders on your carousel-cell and img to see where the problem lies.
I have a page divided in half. On one side I have a giant box and on the other side I have a set of cards. When I inspect the page or increase / reduce its size, the cards are no longer responsive. The small cards are above the large box. The goal is that when they cross, the cards will go down.
Does anyone help me make this responsive?
Thank you very much
HTML
<div class="col-md-6">
<div class="row">
<div class="col-6">
<div class="card" style="margin-left: 16px; margin-right: 16px; line-height: 1;">
<div class="card-header header">
<h1> M </h1>
</div>
<div class="card-body">
</div>
</div>
</div>
<div class="col-6">
<div class="card" style="margin-left: 8px; margin-right: 16px;">
<div class="card-header header">
<h1> I </h1>
</div>
<div class="card-body">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="card card-small" style="margin-left: 16px; margin-right: 16px; margin-top: 16px;">
<div class="card-header header">
<h1> C </h1>
</div>
<div class="card-body" style="overflow: auto;">
</div>
</div>
</div>
<div class="col-6">
<div class="card card-small" style="margin-left: 8px; margin-right: 16px; margin-top: 16px;">
<div class="card-header header">
<h1> D </h1>
</div>
<div class="card-body" style="overflow: auto;">
</div>
</div>
</div>
<div class="col-6">
<div class="card card-small" style="margin-left: 16px; margin-right: 16px; margin-top: 16px;">
<div class="card-header header">
<h1> S </h1>
</div>
<div class="card-body" style="overflow: auto;">
</div>
</div>
</div>
<div class="col-6">
<div class="card card-small" style="margin-left: 8px; margin-right: 16px; margin-top: 16px;">
<div class="card-header header">
<h1> T </h1>
</div>
<div class="card-body" style="overflow: auto;">
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.Title{
width: 150px;
height: 30px;
font-family: 'Noto Sans';
font-size: 20px;
letter-spacing: 0;
color: #4D4F5C;
}
.header{
width: 435px;
height: 40px;
background: #ECF2F9 0% 0% no-repeat padding-box;
border-radius: 8px 8px 0px 0px;
}
.header h1{
text-align: center;
font-family:'Noto Sans';
font-size: 14px;
letter-spacing: 0;
color: #4D4F5C;
}
The reason they aren't responsive is because you have the cards and the .drop item set to fix widths using px's. Try setting the width of the items using percentages.
I am trying to vertically center h5 in a div but I want to do it responsively, so those solutions where you set the parent's height to a certain amount of pixels aren't a solution for me.
The h5 with id "channelName" is what I am trying to vertically center in the parent div.
<div class="col-10 text-left channelTab"><h5 id="channelName">Name</h5></div>
#greyBox {
background-color: grey;
}
#title {
color: white;
}
.logo {
max-height: 50px;
max-width: 50px;
border-radius: 50%;
border: 3px solid white;
}
#channelName {
vertical-align: middle;
display: inline-block;
}
#channelRow {
background-color: red;
}
<div class="container-fluid">
<div class="row">
<div class="col-4"></div>
<div id="greyBox" class="col-4 text-center">
<div class="row">
<div class="col-12 text-center">
<h1 id="title">TITLE</h1>
<div class="row" id="channelRow">
<div class="col-2">
<img src="image.png" class="logo"></div>
<div class="col-10 text-left channelTab">
<h5 id="channelName">Name</h5>
</div>
</div>
<div class="col-6">
</div>
</div>
</div>
</div>
</div>
</div>
If this could be done more easily with some more changes to my code, any such tips would be welcome as I am really new to this and still learning.
Add this class to parent of h5 d-flex align-items-center and remove bottom margin of h5
This class (d-flex) will make the display of parent of h5 flex and the align-items-center will vertically center it.
#greyBox {
background-color: grey;
}
#title {
color: white;
}
.logo {
max-height: 50px;
max-width: 50px;
border-radius: 50%;
border: 3px solid white;
}
#channelName {
margin:0;
}
#channelRow {
background-color: red;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-4"></div>
<div id="greyBox" class="col-4 text-center">
<div class="row">
<div class="col-12 text-center">
<h1 id="title">TITLE</h1>
<div class="row" id="channelRow">
<div class="col-2">
<img src="image.png" class="logo"></div>
<div class="col-10 text-left d-flex align-items-center channelTab">
<h5 id="channelName">Name</h5>
</div>
</div>
<div class="col-6">
</div>
</div>
</div>
</div>
</div>
</div>
I have certain images and when I click on it then a green checked icon is appearing. but i can't make its position to be proper.
.p-t-md{
padding-top:20px;
}
.p-l-md{
padding-left:20px;
}
.speakers_list {
width: 605px;
margin: 0 auto;
height: 245px;
overflow-x: hidden;
overflow-y: auto;
}
.speakers_list .speaker_div {
width: 75px;
height: 75px;
margin: 0 auto;
}
.speakers_list .speaker_div img {
height: 100%;
width: 100%;
}
.speakers_list .speaker_div .speaker_name {
color: #999999;
font-size: 10.61px;
}
.speakers_list .selected_div {
position: absolute;
width: 20px;
height: 20px;
background: #27c24c;
border: thin white solid;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
<div class="row speakers_list p-t-md p-l-md" >
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
<div class="selected_div">
<i class="fa fa-check text-white"></i>
</div>
<div class="speaker_div">
<img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
</div>
<div class="speaker_name text-center m-t-xs">
<span> 1 </span>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
<div class="speaker_div">
<img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
</div>
<div class="speaker_name text-center m-t-xs">
<span> 2 </span>
</div>
</div>
</div>
I want the green div to be right top and check mark to be centre of the green div and should be responsive , too.
Any help would be great.
Thank You.
See this code:
.p-t-md{
padding-top:20px;
}
.p-l-md{
padding-left:20px;
}
.speakers_list {
width: 605px;
margin: 0 auto;
height: 245px;
overflow-x: hidden;
overflow-y: auto;
}
.speakers_list .speaker_div {
width: 75px;
height: 75px;
margin: 0 auto;
position: relative;
}
.speakers_list .speaker_div img {
height: 100%;
width: 100%;
}
.speakers_list .speaker_div .speaker_name {
color: #999999;
font-size: 10.61px;
}
.speakers_list .selected_div {
position: absolute;
width: 20px;
height: 20px;
background: #27c24c;
border: thin white solid;
border-radius: 50%;
right: 0px;
padding-left: 3px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
<div class="row speakers_list p-t-md p-l-md" >
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
<div class="speaker_div">
<div class="selected_div">
<i class="fa fa-check text-white"></i>
</div>
<img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
</div>
<div class="speaker_name text-center m-t-xs">
<span> 1 </span>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
<div class="speaker_div">
<img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
</div>
<div class="speaker_name text-center m-t-xs">
<span> 2 </span>
</div>
</div>
</div>
below is updated snippet
.p-t-md{
padding-top:20px;
}
.p-l-md{
padding-left:20px;
}
.speakers_list {
width: 605px;
margin: 0 auto;
height: 245px;
overflow-x: hidden;
overflow-y: auto;
}
.speakers_list .speaker_div {
width: 75px;
height: 75px;
margin: 0 auto;
}
.speakers_list .speaker_div img {
height: 100%;
width: 100%;
}
.speakers_list .speaker_div .speaker_name {
color: #999999;
font-size: 10.61px;
}
.speakers_list .selected_div {
position: absolute;
width: 20px;
height: 20px;
background: #27c24c;
border: thin white solid;
right: 5px;
top: 5px;
border-radius: 50%;
text-align: center;
color: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
<div class="row speakers_list p-t-md p-l-md" >
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
<div class="selected_div">
<i class="fa fa-check text-white"></i>
</div>
<div class="speaker_div">
<img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
</div>
<div class="speaker_name text-center m-t-xs">
<span> 1 </span>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
<div class="speaker_div">
<img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
</div>
<div class="speaker_name text-center m-t-xs">
<span> 2 </span>
</div>
</div>
</div>
Add right: 0; to .speakers_list .selected_div
.p-t-md{
padding-top:20px;
}
.p-l-md{
padding-left:20px;
}
.speakers_list {
width: 605px;
margin: 0 auto;
height: 245px;
overflow-x: hidden;
overflow-y: auto;
}
.speakers_list .speaker_div {
width: 75px;
height: 75px;
margin: 0 auto;
}
.speakers_list .speaker_div img {
height: 100%;
width: 100%;
}
.speakers_list .speaker_div .speaker_name {
color: #999999;
font-size: 10.61px;
}
.speakers_list .selected_div {
position: absolute;
right: 0;
width: 20px;
height: 20px;
background: #27c24c;
border: thin white solid;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
<div class="row speakers_list p-t-md p-l-md" >
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
<div class="selected_div">
<i class="fa fa-check text-white"></i>
</div>
<div class="speaker_div">
<img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
</div>
<div class="speaker_name text-center m-t-xs">
<span> 1 </span>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
<div class="speaker_div">
<img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
</div>
<div class="speaker_name text-center m-t-xs">
<span> 2 </span>
</div>
</div>
</div>
.p-t-md {
padding-top: 20px;
}
.p-l-md {
padding-left: 20px;
}
.speakers_list {
width: 605px;
margin: 0 auto;
height: 245px;
overflow-x: hidden;
overflow-y: auto;
position: relative;
text-align: center;
}
.speakers_list .speaker_div {
width: 75px;
height: 75px;
margin: 0 auto;
}
.speakers_list .speaker_div img {
height: 100%;
width: 100%;
}
.speakers_list .speaker_div .speaker_name {
color: #999999;
font-size: 10.61px;
}
.speakers_list .selected_div {
position: absolute;
right: 0;
top: 0;
width: 20px;
height: 20px;
background: #27c24c;
border: thin white solid;
color: #ffffff;
border-radius: 50%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
<div class="row speakers_list p-t-md p-l-md" >
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
<div class="selected_div">
<i class="fa fa-check text-white"></i>
</div>
<div class="speaker_div">
<img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
</div>
<div class="speaker_name text-center m-t-xs">
<span> 1 </span>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
<div class="selected_div">
<i class="fa fa-check text-white"></i>
</div>
<div class="speaker_div">
<img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
</div>
<div class="speaker_name text-center m-t-xs">
<span> 2 </span>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
<div class="selected_div">
<i class="fa fa-check text-white"></i>
</div>
<div class="speaker_div">
<img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
</div>
<div class="speaker_name text-center m-t-xs">
<span> 3 </span>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
<div class="selected_div">
<i class="fa fa-check text-white"></i>
</div>
<div class="speaker_div">
<img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
</div>
<div class="speaker_name text-center m-t-xs">
<span> 4 </span>
</div>
</div>
</div>
I hope this will help you.
Look this
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
<div class="row speakers_list p-t-md p-l-md" >
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
<div class="speaker_div">
<div class="selected_div">
<i class="fa fa-check text-white"></i>
</div>
<img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
</div>
<div class="speaker_name text-center m-t-xs">
<span> 1 </span>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
<div class="speaker_div">
<div class="selected_div">
<i class="fa fa-check text-white"></i>
</div>
<img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
</div>
<div class="speaker_name text-center m-t-xs">
<span> 2 </span>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
<div class="speaker_div">
<div class="selected_div">
<i class="fa fa-check text-white"></i>
</div>
<img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
</div>
<div class="speaker_name text-center m-t-xs">
<span> 2 </span>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
<div class="speaker_div">
<div class="selected_div">
<i class="fa fa-check text-white"></i>
</div>
<img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
</div>
<div class="speaker_name text-center m-t-xs">
<span> 2 </span>
</div>
</div>
</div>
</div>
.p-t-md{
padding-top:20px;
}
.p-l-md{
padding-left:20px;
}
.speakers_list {
margin: 0 auto;
height: 245px;
overflow-x: hidden;
overflow-y: auto;
}
.speakers_list .speaker_div {
width: 75px;
height: 75px;
margin: 0 auto;
position: relative;
}
.speakers_list .speaker_div img {
height: 100%;
width: 100%;
}
.speakers_list .speaker_div .speaker_name {
color: #999999;
font-size: 10.61px;
}
.speakers_list .selected_div {
position: absolute;
width: 20px;
height: 20px;
right: 0;
background: #27c24c;
border-radius: 50%;
border: thin white solid;
text-align: center;
}
Live Demo - https://jsfiddle.net/grinmax_/qn3jyhbb/