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/
Related
May I ask how to fix this? I need the second container to be at the bottom of the first container, and I do not know how to solve it. I have used display: flex but it seems it does not feel right and applicable in two containers, that is why I am having a trouble on how to fix it:
https://jsfiddle.net/0nv2oLqy/1/
.content {
display: flex;
}
aside {
border-right: 1px solid #000000;
}
aside {
height: 100vh;
width: 350px;
}
aside ul {
padding-top: 5%;
list-style-type: none;
text-align: center;
}
aside a {
text-decoration: none;
display: block;
font-size: 23px;
color: black;
margin: 40px;
font-family: $font1;
font-weight: lighter;
}
aside a:hover {
color: $color1;
}
.first {
margin: 50px;
}
.first a {
background-color: #ebe0dd;
padding: 4px;
}
.line {
padding: 8px;
border-bottom: 1px solid $color5;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.1/font/bootstrap-icons.css">
<div class="content">
<aside class="d-none d-md-block">
<ul>
<li class="first">All</li>
<li>To Pay</li>
<li>To Ship</li>
<li>To Receive</li>
<li>Completed</li>
<li>Cancelled</li>
</ul>
</aside>
<div class="container-fluid p-3 m-5 item1" height="20">
<div class="row">
<div class=" col col-lg-1 text-center">
<img src="/images/charrr.png" alt="" width="50">
</div>
<div class="col col-lg-10 my-2">
<h5>Charlotte Folk</h5>
</div>
<div class="col col-lg-1 my-2 text-center">
<h6>To Pay</h6>
</div>
</div>
<div class="row">
<div class=" col col-lg-1 text-center">
<img src="/images/charlottewhite.jpg" alt="" width="80">
</div>
<div class="col col-lg-10">
<h6>CFXXI Sweater</h6>
<h6>Large</h6>
<h6>x1</h6>
</div>
<div class="col col-lg-1 my-2 text-center">
<h6>P990</h6>
</div>
</div>
<div class="row">
<div class="col-lg text-center bottom1">Contact Seller</div>
</div>
</div>
<div class="container-fluid p-3 m-5 item2" height="20">
<div class="row">
<div class=" col col-lg-1 text-center">
<img src="/images/charrr.png" alt="" width="50">
</div>
<div class="col col-lg-10 my-2">
<h5>Charlotte Folk</h5>
</div>
<div class="col col-lg-1 my-2 text-center">
<h6>To Pay</h6>
</div>
</div>
<div class="row">
<div class=" col col-lg-1 text-center">
<img src="/images/charlottewhite.jpg" alt="" width="80">
</div>
<div class="col col-lg-10">
<h6>CFXXI Sweater</h6>
<h6>Large</h6>
<h6>x1</h6>
</div>
<div class="col col-lg-1 my-2 text-center">
<h6>P990</h6>
</div>
</div>
<div class="row">
<div class="col-lg text-center bottom1">Contact Seller</div>
</div>
</div>
</div>
Just wrap them inside a new div
.content {
display:flex;
}
aside {
border-right: 1px solid #000000;
}
aside {
height: 100vh;
width: 350px;
}
aside ul {
padding-top: 5%;
list-style-type: none;
text-align: center;
}
aside a {
text-decoration: none;
display: block;
font-size: 23px;
color: black;
margin: 40px;
font-family: $font1;
font-weight: lighter;
}
aside a:hover {
color: $color1;
}
.first {
margin: 50px;
}
.first a {
background-color: #ebe0dd;
padding: 4px;
}
.line {
padding: 8px;
border-bottom: 1px solid $color5;
}
.rightDiv {
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--Link for Font awesome icons-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/styles/try.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.1/font/bootstrap-icons.css">
</head>
<body>
<div class = "content">
<aside class = "d-none d-md-block">
<ul>
<li class = "first">All</li>
<li>To Pay</li>
<li>To Ship</li>
<li>To Receive</li>
<li>Completed</li>
<li>Cancelled</li>
</ul>
</aside>
<div class='rightDiv'>
<div class="container-fluid p-3 item1" height = "20">
<div class="row">
<div class=" col col-lg-1 text-center">
<img src="/images/charrr.png" alt="" width="50">
</div>
<div class="col col-lg-10 my-2">
<h5>Charlotte Folk</h5>
</div>
<div class="col col-lg-1 my-2 text-center">
<h6>To Pay</h6>
</div>
</div>
<div class="row">
<div class=" col col-lg-1 text-center">
<img src="/images/charlottewhite.jpg" alt="" width="80">
</div>
<div class="col col-lg-10">
<h6>CFXXI Sweater</h6>
<h6>Large</h6>
<h6>x1</h6>
</div>
<div class="col col-lg-1 my-2 text-center">
<h6>P990</h6>
</div>
</div>
<div class="row">
<div class="col-lg text-center bottom1">Contact Seller</div>
</div>
</div>
<div class="container-fluid p-3 item2" height = "20">
<div class="row">
<div class=" col col-lg-1 text-center">
<img src="/images/charrr.png" alt="" width="50">
</div>
<div class="col col-lg-10 my-2">
<h5>Charlotte Folk</h5>
</div>
<div class="col col-lg-1 my-2 text-center">
<h6>To Pay</h6>
</div>
</div>
<div class="row">
<div class=" col col-lg-1 text-center">
<img src="/images/charlottewhite.jpg" alt="" width="80">
</div>
<div class="col col-lg-10">
<h6>CFXXI Sweater</h6>
<h6>Large</h6>
<h6>x1</h6>
</div>
<div class="col col-lg-1 my-2 text-center">
<h6>P990</h6>
</div>
</div>
<div class="row">
<div class="col-lg text-center bottom1">Contact Seller</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
</html>
keep that .content {display: flex} but try to add a new container for that two price column or that two container you mentioned in question and then add this ruleset .your-class { display:flex; flex-direction: column; }
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>
Hi guys so i am making a simple diagram which has 5 boxes and then arrows after them so it should look like this :
- > - > - > - > -
However for some reason i have an extra arrow appearing after the fifth box and i dont want this, Any help on getting rid of the last arrow would be great
.work_process {
position: relative;
text-align: center;
margin: 0 auto;
}
.work_process:before {
font-family: FontAwesome;
content: '\f178';
margin-top: -10px;
position: absolute;
right: -10px;
top: 40%;
font-size: 32px;
}
.work_process .work_process-box {
outline: 4px solid #FFFFFF;
border-radius: 50%;
height: 120px;
margin: 2em auto 3em;
padding: 16px 10px;
width: 120px;
}
.work_process-box i {
font-size: 32px;
line-height: 52px;
width: 52px;
color: #FFFFFF;
}
.work_process-box h4 {
font-weight: 400;
margin: 0;
color: #FFFFFF;
}
<div class="parallax2">
<div class="info1">
<h1>DESGIN PROCESS</h1>
<span class="border"></span>
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-3">
<!-- work_process -->
<div class="work_process">
<div class="work_process-box">
<i class="fa fa-lightbulb-o"></i>
<h4>IDEA</h4>
</div>
</div>
<!-- work_process -->
</div>
<div class="col-xs-6 col-sm-4 col-md-2">
<!-- work_process -->
<div class="work_process">
<div class="work_process-box">
<i class="fa fa-bank"></i>
<h4>DESIGN</h4>
</div>
</div>
<!-- work_process -->
</div>
<div class="col-xs-6 col-sm-4 col-md-2">
<!-- work_process -->
<div class="work_process">
<div class="work_process-box">
<i class="fa fa-comments-o"></i>
<h4>DEVELOP</h4>
</div>
</div>
<!-- work_process -->
</div>
<div class="col-xs-6 col-sm-4 col-md-2">
<!-- work_process -->
<div class="work_process">
<div class="work_process-box">
<i class="fa fa-desktop"></i>
<h4>TEST</h4>
</div>
</div>
<!-- work_process -->
</div>
<div class="col-xs-6 col-sm-4 col-md-2">
<!-- work_process -->
<div class="work_process">
<div class="work_process-box">
<i class="fa fa-rocket"></i>
<h4>LAUNCH</h4>
</div>
</div>
<!-- work_process -->
</div>
</div>
</div>
</div>
This following code will fix it:
.row > div:last-child .work_process:before { content: ""; }
This code selects the last immediate child of the .row div, and selects the .work_process:before of that child, and sets the content to nothing.
.row > div:last-child .work_process:before { content: ""; }
.work_process {
position: relative;
text-align: center;
margin: 0 auto;
}
.work_process:before {
font-family: FontAwesome;
content: '\f178';
margin-top: -10px;
position: absolute;
right: -10px;
top: 40%;
font-size: 32px;
}
.work_process .work_process-box {
outline: 4px solid #FFFFFF;
border-radius: 50%;
height: 120px;
margin: 2em auto 3em;
padding: 16px 10px;
width: 120px;
}
.work_process-box i {
font-size: 32px;
line-height: 52px;
width: 52px;
color: #FFFFFF;
}
.work_process-box h4 {
font-weight: 400;
margin: 0;
color: #FFFFFF;
}
<div class="parallax2">
<div class="info1">
<h1>DESGIN PROCESS</h1>
<span class="border"></span>
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-3">
<!-- work_process -->
<div class="work_process">
<div class="work_process-box">
<i class="fa fa-lightbulb-o"></i>
<h4>IDEA</h4>
</div>
</div>
<!-- work_process -->
</div>
<div class="col-xs-6 col-sm-4 col-md-2">
<!-- work_process -->
<div class="work_process">
<div class="work_process-box">
<i class="fa fa-bank"></i>
<h4>DESIGN</h4>
</div>
</div>
<!-- work_process -->
</div>
<div class="col-xs-6 col-sm-4 col-md-2">
<!-- work_process -->
<div class="work_process">
<div class="work_process-box">
<i class="fa fa-comments-o"></i>
<h4>DEVELOP</h4>
</div>
</div>
<!-- work_process -->
</div>
<div class="col-xs-6 col-sm-4 col-md-2">
<!-- work_process -->
<div class="work_process">
<div class="work_process-box">
<i class="fa fa-desktop"></i>
<h4>TEST</h4>
</div>
</div>
<!-- work_process -->
</div>
<div class="col-xs-6 col-sm-4 col-md-2">
<!-- work_process -->
<div class="work_process">
<div class="work_process-box">
<i class="fa fa-rocket"></i>
<h4>LAUNCH</h4>
</div>
</div>
<!-- work_process -->
</div>
</div>
</div>
</div>
I made this complicated layout in bootstrap but, the point is when I remove to image below on the right side, all other images changing smaller.
How can I have this always same size?
I tried to work with numbers for width and height but the result was bad!
The number of images will change based on the titles so I might have 3 images or 2 or 5.
Please help me!
Before removing
After removing
.container-fluid .expo {
margin-left: 20px;
margin-right: 20px;
text-align: center;
float: none;
margin-bottom: 20px;
}
.expoinfo {
display: inline-block;
padding: 0;
}
.expoinfo h3 {
font-size: 22px;
margin-top: 0px;
padding-right: 20px;
text-align: left;
}
.bigimg {
padding: 0;
border-radius: 0;
margin: 0;
overflow: hidden;
text-align: center;
}
.bigimg img {
border-radius: 0;
width: 100%;
padding-left: 2px;
padding-right: 2px;
padding-top: 2px;
padding-bottom: 2px;
height: 100%;
}
.colthumb {
overflow: hidden;
margin: 0;
padding: 0;
float: left;
}
.thumbnail {
padding: 0;
margin: 0;
border-style: none;
}
.thumbnail img {
width: 100%;
padding-top: 2px;
padding-right: 2px;
padding-left: 2px;
padding-bottom: 2px;
border-radius: 0;
border-style: none;
height: 100%;
}
<div class="container-fluid expo">
<div class="row expoinfo">
<section class="col-lg-10 col-lg-offset-1">
<h3>title</h3>
<div class="bigimg col-sm-6 col-md-6 col-lg-6">
<a href="http://fakeimg.pl/700x400/" title="">
<img src="http://fakeimg.pl/600x600/" alt="">
</a>
</div>
<div class="colthumb col-sm-3 col-xs-6 col-md-3 col-lg-3">
<div class="thumbnail">
<a href="http://fakeimg.pl/700x400/" title="">
<img src="http://fakeimg.pl/300x300/" alt="">
</a>
</div>
</div>
<div class="colthumb col-sm-3 col-xs-6 col-md-3 col-lg-3">
<div class="thumbnail">
<a href="http://fakeimg.pl/700x400/" title="">
<img src="http://fakeimg.pl/300x300/" alt="">
</a>
</div>
</div>
<div class="colthumb col-sm-3 col-xs-6 col-md-3 col-lg-3">
<div class="thumbnail">
<a href="http://fakeimg.pl/700x400/" title="">
<img src="http://fakeimg.pl/300x300/" alt="">
</a>
</div>
</div>
<div class="colthumb col-sm-3 col-xs-6 col-md-3 col-lg-3">
<div class="thumbnail">
<a href="http://fakeimg.pl/700x400/" title="">
<img src="http://fakeimg.pl/300x300/" alt="">
</a>
</div>
</div>
</section>
</div>
</div>
The example you made didn't include bootstrap.css even though it was using bootstrap's classes.
See updated demo: https://jsfiddle.net/2aLdmvw4/
I just found my answer!
<div class="row">
<section class="col-lg-offset-2 col-lg-8">
<h3>title</h3>
<div class=" thumbcol col-md-4 col-lg-6">
<div class="thumbnail"><img src="http://fakeimg.pl/300x300/" alt="Thumbnail Image">
</div>
</div>
<div class=" thumbcol col-md-4 col-lg-3">
<div class="thumbnail"><img src="http://fakeimg.pl/300x300/" alt="Thumbnail Image"> </div>
</div>
<div class=" thumbcol col-md-4 col-lg-3">
<div class="thumbnail"><img src="http://fakeimg.pl/300x300/" alt="Thumbnail Image"></div>
</div>
<div class=" thumbcol col-md-4 col-lg-3">
<div class="thumbnail"><img src="http://fakeimg.pl/300x300/" alt="Thumbnail Image"></div>
</div>
</section>
</div>
there's some problems with responsive grid system to me.
http://imageshack.com/a/img537/9687/4H48G0.jpg
http://imageshack.com/a/img539/8265/ANvr0Y.jpg - problem is here
My source code:
CSS
<style type="text/css">
.wrapper {
height: 100%;
text-align: center;
margin: 0 auto;
}
img { max-width:100% !important;
height:auto;
display:block;
}
.text {
color: #fff;
text-shadow:0px 2px 10px #000;
height: 100%;
left: 0;
position: absolute;
text-align: center;
top: 0;
font-size: 22px;
width: 100%;}
.box {
border: 1px dashed #000;
overflow: hidden;
position: relative;
}
.tb_floater {
font-size: 1.5em;
margin-top: 20%;
padding-top: 10%;
}
.box.tall {
height: 300px;
}
.box.tall > a > img {
height: auto;
}
</style>
HTML
<div class="wrapper">
<div class="container">
<div class="row">
<div class="col-md-4 box tall">
<a href="#">
<img src="http://www.websailer.com/wp-content/uploads/2013/07/www_image.jpg">
</a>
<div class="text tall">
<div class="tb_floater">
<p>Loren ipsum shit amet<br/>Loren ipsum</p>
</div>
</div>
</div>
<div class="col-xs-6 col-md-6 box" style="height:150px;">.col-xs-6 .col-md-6</div>
<div class="col-xs-6 col-md-2 box" style="height:150px;">.col-xs-6 .col-md-2</div>
<div class="col-xs-6 col-md-2 box" style="height:150px;">.col-xs-6 .col-md-2</div>
<div class="col-xs-6 col-md-6 box" style="height:150px;">.col-xs-6 .col-md-6</div>
</div>
<div class="row">
<div class="pull-right col-xs-6 col-md-4 box tall">
<a href="#">
<img src="http://www.websailer.com/wp-content/uploads/2013/07/www_image.jpg">
</a>
<div class="text tall">
<div class="tb_floater">
<p>Loren ipsum shit amet<br/>Loren ipsum</p>
</div>
</div>
</div>
<div class="col-xs-6 col-md-2 box" style="height:150px;">.col-xs-6 .col-md-6</div>
<div class="col-xs-6 col-md-6 box" style="height:150px;">.col-xs-6 .col-md-2</div>
<div class="col-xs-6 col-md-2 box" style="height:150px;">.col-xs-6 .col-md-6</div>
<div class="col-xs-6 col-md-6 box" style="height:150px;">.col-xs-6 .col-md-2</div>
</div>
That empty field is problem when i resize the browser, any solution ?