Error related with #media query.
My HTML code--
<div class="Card">
<div class="FestivalPhoto"><img src="Image/test1.jpg" width="300px" alt="MusicFestivalImage"></div>
<div class="FestivalDetails">Hello World</div>
</div>
<div class="Card">
<div class="FestivalPhoto"><img src="Image/test1.jpg" width="300px" alt="MusicFestivalImage"></div>
<div class="FestivalDetails">Hello World</div>
</div>
<div class="Card">
<div class="FestivalPhoto"><img src="Image/test1.jpg" width="300px" alt="MusicFestivalImage"></div>
<div class="FestivalDetails">Hello World</div>
</div>
And this is my css--
.Card {
background: #fff;
border-radius: 2px;
display: inline-block;
height: 500px;
margin: 1rem;
position: relative;
width: 300px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
padding: 30px auto;
overflow: hidden;
justify-content: center;
}
.FestivalDetails {
position: absolute;
width:auto;
max-width: 500px;
height: auto;
display: block;
padding: 20px 20px;
}
.FestivalPhoto {
height: 200px;
width: auto;
position: relative;
top: 0;
display: block;
overflow: hidden;
margin: auto;
background-size: initial;
}
#media(max-width: 700) {
.Card {
background: #000;
border-radius: 2px;
display: block;
height: 500px;
margin: auto;
position: relative;
width: 80%;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
padding: 30px auto;
overflow: hidden;
}
}
I am trying the Card div to set "margin: auto;" on mobile but it does not work. I also added in head tag. Please suggest me. And now I am testing responsive on chrome and firefox developer console. Is there any better ways to test? Thank You.
Replace #media(max-width: 700) with #media screen and (max-width: 700)
add this in your head tag
<meta name="viewport" content="width=device-width, initial-scale=1">
also change #media (max-width: 700) to #media (max-width: 700px)
Media query looks okay, you can switch to #media screen and (max-width: 680px)
In Chrome , when you inspect element, "Toggle device Toolbar" option is available.
You can see how the application looks on different devices as well as application is responsive or not.`
div.logo-inline-div {
text-align: center;
margin: auto;
padding: 16px 24px 10px 10px;
border-radius: 8px;
background-color: white;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 2px 3px 0 rgba(0, 0, 0, 0.1);
}
.row {
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.col-1 {
width: 12.4%;
}
img {
width: 100px;
height: 200px;
object-fit: cover;
}
.Card {
background: #fff;
border-radius: 2px;
display: inline-block;
height: 500px;
margin: 1rem;
position: relative;
width: 300px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
padding: 30px auto;
overflow: hidden;
justify-content: center;
}
.FestivalDetails {
position: absolute;
width: auto;
max-width: 500px;
height: auto;
display: block;
padding: 20px 20px;
}
.FestivalPhoto {
height: 200px;
width: auto;
position: relative;
top: 0;
display: block;
overflow: hidden;
margin: auto;
background-size: initial;
}
/*#media screen and (max-width: 680px) {*/
#media (max-width: 700) {
.col-1 {
width: 100%;
margin: 0;
}
div.logo-inline-div {
padding: 5px;
display: block;
}
.Card {
background: #000;
border-radius: 2px;
display: block;
height: 500px;
position: relative;
width: 80%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
padding: 30px auto;
overflow: hidden;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="EightImages.css" />
<link rel="images" href="images" />
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12 col-1">
<div class="logo-inline-div">
<img src="images/sunset1.png" />
<label>Build an Empire</label>
<p>
Test
</p>
</div>
</div>
<div class="col-sm-12 col-1">
<div class="logo-inline-div">
<img src="images/sunset1.png" />
<label>Build an Empire</label>
<p>
Test
</p>
</div>
</div>
<div class="col-sm-12 col-1">
<div class="logo-inline-div">
<img src="images/sunset1.png" />
<label>Build an Empire</label>
<p>
Test
</p>
</div>
</div>
<div class="col-sm-12 col-1">
<div class="logo-inline-div">
<img src="images/sunset1.png" />
<label>Build an Empire</label>
<p>
Test
</p>
</div>
</div>
<div class="col-sm-12 col-1">
<div class="logo-inline-div">
<img src="images/sunset1.png" />
<label>Build an Empire</label>
<p>
Test
</p>
</div>
</div>
<div class="col-sm-12 col-1">
<div class="logo-inline-div">
<img src="images/sunset1.png" />
<label>Build an Empire</label>
<p>
Test
</p>
</div>
</div>
<div class="col-sm-12 col-1">
<div class="logo-inline-div">
<img src="images/sunset1.png" />
<label>Build an Empire</label>
<p>
Test
</p>
</div>
</div>
<div class="col-sm-12 col-1">
<div class="logo-inline-div">
<img src="images/sunset1.png" />
<label>Build an Empire</label>
<p>
Test
</p>
</div>
</div>
</div>
</div>
<div class="Card">
<div class="FestivalPhoto">
<img src="images/sunset1.png" width="300px" alt="MusicFestivalImage" />
</div>
<div class="FestivalDetails">Hello World</div>
</div>
<div class="Card">
<div class="FestivalPhoto">
<img src="images/sunset1.png" width="300px" alt="MusicFestivalImage" />
</div>
<div class="FestivalDetails">Hello World</div>
</div>
<div class="Card">
<div class="FestivalPhoto">
<img src="images/sunset1.png" width="300px" alt="MusicFestivalImage" />
</div>
<div class="FestivalDetails">Hello World</div>
</div>
</body>
</html>
`
Related
I created this product card slider but it's prev and nex buttons are not working. Also I tried some other ways but it affect my product card structure. So please, If there is any easy way to do this which does not affect my card structure it will be helpfull.
.container{
padding:80px 7%;
position: relative;
font-family: 'Open Sans', sans-serif;
}
.details{
display: flex;
justify-content: space-between;
margin: 20px 0px 30px 0px;
color: white;
}
.right{
max-width: 50%;
}
.container .box-container .box{
box-shadow: 0 5px 10px rgba(0,0,0,.3);
background:#0d1b2a;
padding:15px;
margin: 40px 0;
display: flex;
align-items: center;
flex-wrap: wrap;
gap:15px;
}
.container .box-container .box .image-container{
flex:1 1 500px;
display: flex;
align-items: center;
gap:15px;
}
.container .box-container .box .content{
flex:1 1 350px;
}
.container .box-container .box .image-container .small-image{
width:20%;
}
.container .box-container .box .image-container .big-image{
width:80%;
}
.container .box-container .box .image-container .small-image img{
width:100%;
padding:10px;
border:1px solid rgba(255, 255, 255, 0.3);
cursor: pointer;
}
.container .box-container .box .image-container .small-image img:hover{
background:rgba(167, 167, 167, 0.2);
}
.container .box-container .box .image-container .big-image img{
width:95%;
padding:20px;
filter: drop-shadow(0 5px 10px rgba(0,0,0,.2));
}
.container .box-container .box .content h3{
color:rgb(255, 255, 255);
font-size: 25px;
}
.hide-1{
background-color: transparent;
padding: 5px 10px;
border: 1px solid rgb(255, 255, 255);
color: rgb(255, 255, 255);
}
.product{
height: 100vh;
}
#media only screen and (max-width: 370px) {
.details{
flex-direction: column ;
}
.hide-1{
font-size: .8em;
}
}
/* --------------------------------------- */
html,
body {
height: 100%;
margin: 0px;
}
.slider {
width: 100%;
border-radius: 20px;
overflow: hidden;
}
.slides {
display: flex;
overflow-x: scroll;
position: relative;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
}
.slide:nth-of-type(even) {
background-color: rgb(250, 246, 212);
}
.slide {
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
width: 100%;
height: 400px;
scroll-snap-align: center;
margin-right: 0px;
box-sizing: border-box;
background: white;
transform-origin: center center;
transform: scale(1);
}
.slide__text {
font-size: 40px;
font-weight: bold;
font-family: sans-serif;
}
.slide a {
background: none;
border: none;
}
a.slide__prev,
.slider::before {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
left: 2%;
}
a.slide__next,
.slider::after {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
right: 2%;
}
.slider::before,
.slider::after,
.slide__prev,
.slide__next {
position: absolute;
top: 48%;
width: 35px;
height: 35px;
border: solid black;
border-width: 0 4px 4px 0;
padding: 3px;
box-sizing: border-box;
}
.slider::before,
.slider::after {
content: "";
z-index: 1;
background: none;
pointer-events: none;
}
.slider__nav {
box-sizing: border-box;
position: absolute;
bottom: 5%;
left: 50%;
width: 200px;
margin-left: -100px;
text-align: center;
}
.slider__navlink {
display: inline-block;
height: 15px;
width: 15px;
border-radius: 50%;
background-color: black;
margin: 0 10px 0 10px;
}
.read-article{
position: absolute;
top: 10px;
left: 10px;
z-index: 999;
color: #000;
background: white;
padding: 10px 20px;
border-radius: 10px;
font-family: arial;
text-decoration: none;
box-shadow: rgb(50 50 93 / 25%) 0 0 100px -20px, rgb(0 0 0 / 30%) 0 0 60px -15px;
}
.read-article:hover{
background: #d5d5d5;
box-shadow: rgb(50 50 93 / 25%) 0 0 100px -20px, rgb(0 0 0 / 30%) 0 0 60px 0px;
}
iframe[sandbox] .read-article{
display: none;
}
<div class="container slider-container">
<div class="box-container slider">
<div class="slides">
<div class="box slide" id="slides__1">
<div class="image-container">
<div class="small-image">
<img src="images/image_11.png" class="small-img-1" alt="">
<img src="images/image_12.png" class="small-img-1" alt="">
<img src="images/image_13.png" class="small-img-1" alt="">
<img src="images/image_14.png" class="small-img-1" alt="">
</div>
<div class="big-image">
<img src="images/image_11.png" class="big-img-1" alt="">
</div>
</div>
<div class="content">
<h3>Phillips</h3>
<div class="details">
<div class="left">
<p>ID: Mp2223-0</p>
<p>Modality: CT</p>
<p>Model: Ingenuity</p>
<p>YOM: 2016</p>
</div>
<div class="right">
<p>Slice: 128</p>
<p>Origin: UAE</p>
<p>Remark: System In Good Working Condition</p>
</div>
</div>
To Know more Call #8766474892
</div>
<a class="slide__prev" href="#slides__4" title="Prev"></a>
<a class="slide__next" href="#slides__2" title="Next"></a>
</div>
<div class="box slide" id="slides__2">
<div class="image-container">
<div class="small-image">
<img src="images/image_11.png" class="small-img-2" alt="">
<img src="images/image_12.png" class="small-img-2" alt="">
<img src="images/image_13.png" class="small-img-2" alt="">
<img src="images/image_14.png" class="small-img-2" alt="">
</div>
<div class="big-image">
<img src="images/image_11.png" class="big-img-2" alt="">
</div>
</div>
<div class="content">
<h3>Phillips</h3>
<div class="details">
<div class="left">
<p>ID: Mp2223-0</p>
<p>Modality: CT</p>
<p>Model: Ingenuity</p>
<p>YOM: 2016</p>
</div>
<div class="right">
<p>Slice: 128</p>
<p>Origin: UAE</p>
<p>Remark: System In Good Working Condition</p>
</div>
</div>
To Know more Call #8766474892
</div>
<a class="slide__prev" href="#slides__1" title="Prev"></a>
<a class="slide__next" href="#slides__3" title="Next"></a>
</div>
<div class="box slide" id="slides__3">
<div class="image-container">
<div class="small-image">
<img src="images/image_11.png" class="small-img-3" alt="">
<img src="images/image_12.png" class="small-img-3" alt="">
<img src="images/image_13.png" class="small-img-3" alt="">
<img src="images/image_14.png" class="small-img-3" alt="">
</div>
<div class="big-image">
<img src="images/image_11.png" class="big-img-3" alt="">
</div>
</div>
<div class="content">
<h3>Phillips</h3>
<div class="details">
<div class="left">
<p>ID: Mp2223-0</p>
<p>Modality: CT</p>
<p>Model: Ingenuity</p>
<p>YOM: 2016</p>
</div>
<div class="right">
<p>Slice: 128</p>
<p>Origin: UAE</p>
<p>Remark: System In Good Working Condition</p>
</div>
</div>
To Know more Call #8766474892
</div>
<a class="slide__prev" href="#slides__2" title="Prev"></a>
<a class="slide__next" href="#slides__4" title="Next"></a>
</div>
<div class="box slide" id="slides__4">
<div class="image-container">
<div class="small-image">
<img src="images/image_21.png" class="small-img-4" alt="">
<img src="images/image_22.png" class="small-img-4" alt="">
<img src="images/image_23.png" class="small-img-4" alt="">
<img src="images/image_24.png" class="small-img-4" alt="">
</div>
<div class="big-image">
<img src="images/image_11.png" class="big-img-4" alt="">
</div>
</div>
<div class="content">
<h3>Phillips</h3>
<div class="details">
<div class="left">
<p>ID: Mp2223-0</p>
<p>Modality: CT</p>
<p>Model: Ingenuity</p>
<p>YOM: 2016</p>
</div>
<div class="right">
<p>Slice: 128</p>
<p>Origin: UAE</p>
<p>Remark: System In Good Working Condition</p>
</div>
</div>
To Know more Call #8766474892
</div>
<a class="slide__prev" href="#slides__3" title="Prev"></a>
<a class="slide__next" href="#slides__1" title="Next"></a>
</div>
</div>
<div class="slider__nav">
<a class="slider__navlink" href="#slides__1"></a>
<a class="slider__navlink" href="#slides__2"></a>
<a class="slider__navlink" href="#slides__3"></a>
<a class="slider__navlink" href="#slides__4"></a>
</div>
</div>
</div>
Also I want to optimize my code so if it is possible let me know.
Thanks in advance.
You can use scrollIntoView() and based on the index of the slide which is currently in view ,the next and previous button will respond correctly.
Check the snippet below
var next=document.getElementsByClassName('slide__next')[0];
var prev=document.getElementsByClassName('slide__prev')[0];
var length= document.getElementsByClassName('slide').length;
var width_slide=document.getElementsByClassName('slides')[0].clientWidth;
var i=0,j=1;
var active=document.getElementsByClassName('active')[0];
var slide=Array.from(document.getElementsByClassName('slide'));
document.getElementsByClassName('slide')[0].classList.add('active');
next.addEventListener('click',function(){
let index=Array.from(document.getElementsByClassName('slide')).indexOf(document.getElementsByClassName('active')[0]);
if(index<(length-1))
{
document.getElementsByClassName('slide')[index].classList.remove('active');
document.getElementsByClassName('slide')[index+1].classList.add('active');
}
document.getElementsByClassName('active')[0].scrollIntoView();
})
prev.addEventListener('click',function(){
let index=Array.from(document.getElementsByClassName('slide')).indexOf(document.getElementsByClassName('active')[0]);
if(index>0)
{
document.getElementsByClassName('slide')[index].classList.remove('active');
document.getElementsByClassName('slide')[index-1].classList.add('active');
}
document.getElementsByClassName('active')[0].scrollIntoView();
})
.container{
padding:80px 7%;
position: relative;
font-family: 'Open Sans', sans-serif;
}
.details{
display: flex;
justify-content: space-between;
margin: 20px 0px 30px 0px;
color: white;
}
.right{
max-width: 50%;
}
.container .box-container .box{
box-shadow: 0 5px 10px rgba(0,0,0,.3);
background:#0d1b2a;
padding:15px;
margin: 40px 0;
display: flex;
align-items: center;
flex-wrap: wrap;
gap:15px;
}
.container .box-container .box .image-container{
flex:1 1 500px;
display: flex;
align-items: center;
gap:15px;
}
.container .box-container .box .content{
flex:1 1 350px;
}
.container .box-container .box .image-container .small-image{
width:20%;
}
.container .box-container .box .image-container .big-image{
width:80%;
}
.container .box-container .box .image-container .small-image img{
width:100%;
padding:10px;
border:1px solid rgba(255, 255, 255, 0.3);
cursor: pointer;
}
.container .box-container .box .image-container .small-image img:hover{
background:rgba(167, 167, 167, 0.2);
}
.container .box-container .box .image-container .big-image img{
width:95%;
padding:20px;
filter: drop-shadow(0 5px 10px rgba(0,0,0,.2));
}
.container .box-container .box .content h3{
color:rgb(255, 255, 255);
font-size: 25px;
}
.hide-1{
background-color: transparent;
padding: 5px 10px;
border: 1px solid rgb(255, 255, 255);
color: rgb(255, 255, 255);
}
.product{
height: 100vh;
}
#media only screen and (max-width: 370px) {
.details{
flex-direction: column ;
}
.hide-1{
font-size: .8em;
}
}
/* --------------------------------------- */
html,
body {
height: 100%;
margin: 0px;
}
.slider {
width: 100%;
border-radius: 20px;
overflow: hidden;
}
.slides {
display: flex;
overflow-x: scroll;
position: relative;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
}
.slide:nth-of-type(even) {
background-color: rgb(250, 246, 212);
}
.slide {
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
width: 100%;
height: 400px;
scroll-snap-align: center;
margin-right: 0px;
box-sizing: border-box;
background: white;
transform-origin: center center;
transform: scale(1);
}
.slide__text {
font-size: 40px;
font-weight: bold;
font-family: sans-serif;
}
.slide a {
background: none;
border: none;
}
a.slide__prev,
.slider::before {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
left: 2%;
}
a.slide__next,
.slider::after {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
right: 2%;
}
.slider::before,
.slider::after,
.slide__prev,
.slide__next {
position: absolute;
top: 48%;
width: 35px;
height: 35px;
border: solid black;
border-width: 0 4px 4px 0;
padding: 3px;
box-sizing: border-box;
}
.slider::before,
.slider::after {
content: "";
z-index: 1;
background: none;
pointer-events: none;
}
.slider__nav {
box-sizing: border-box;
position: absolute;
bottom: 5%;
left: 50%;
width: 200px;
margin-left: -100px;
text-align: center;
}
.slider__navlink {
display: inline-block;
height: 15px;
width: 15px;
border-radius: 50%;
background-color: black;
margin: 0 10px 0 10px;
}
.read-article{
position: absolute;
top: 10px;
left: 10px;
z-index: 999;
color: #000;
background: white;
padding: 10px 20px;
border-radius: 10px;
font-family: arial;
text-decoration: none;
box-shadow: rgb(50 50 93 / 25%) 0 0 100px -20px, rgb(0 0 0 / 30%) 0 0 60px -15px;
}
.read-article:hover{
background: #d5d5d5;
box-shadow: rgb(50 50 93 / 25%) 0 0 100px -20px, rgb(0 0 0 / 30%) 0 0 60px 0px;
}
iframe[sandbox] .read-article{
display: none;
}
<div class="container slider-container">
<div class="box-container slider">
<a class="slide__prev" href="#/" title="Prev"></a>
<a class="slide__next" href="#/" title="Next"></a>
<div class="slides check">
<div class="box slide" id="slides__1">
<div class="image-container">
<div class="small-image">
<img src="images/image_11.png" class="small-img-1" alt="">
<img src="images/image_12.png" class="small-img-1" alt="">
<img src="images/image_13.png" class="small-img-1" alt="">
<img src="images/image_14.png" class="small-img-1" alt="">
</div>
<div class="big-image">
<img src="images/image_11.png" class="big-img-1" alt="">
</div>
</div>
<div class="content">
<h3>Phillips</h3>
<div class="details">
<div class="left">
<p>ID: Mp2223-0</p>
<p>Modality: CT</p>
<p>Model: Ingenuity</p>
<p>YOM: 2016</p>
</div>
<div class="right">
<p>Slice: 128</p>
<p>Origin: UAE</p>
<p>Remark: System In Good Working Condition</p>
</div>
</div>
To Know more Call #8766474892
</div>
</div>
<div class="box slide" id="slides__2">
<div class="image-container">
<div class="small-image">
<img src="images/image_11.png" class="small-img-2" alt="">
<img src="images/image_12.png" class="small-img-2" alt="">
<img src="images/image_13.png" class="small-img-2" alt="">
<img src="images/image_14.png" class="small-img-2" alt="">
</div>
<div class="big-image">
<img src="images/image_11.png" class="big-img-2" alt="">
</div>
</div>
<div class="content">
<h3>Phillips</h3>
<div class="details">
<div class="left">
<p>ID: Mp2223-0</p>
<p>Modality: CT</p>
<p>Model: Ingenuity</p>
<p>YOM: 2016</p>
</div>
<div class="right">
<p>Slice: 128</p>
<p>Origin: UAE</p>
<p>Remark: System In Good Working Condition</p>
</div>
</div>
To Know more Call #8766474892
</div>
</div>
<div class="box slide" id="slides__3">
<div class="image-container">
<div class="small-image">
<img src="images/image_11.png" class="small-img-3" alt="">
<img src="images/image_12.png" class="small-img-3" alt="">
<img src="images/image_13.png" class="small-img-3" alt="">
<img src="images/image_14.png" class="small-img-3" alt="">
</div>
<div class="big-image">
<img src="images/image_11.png" class="big-img-3" alt="">
</div>
</div>
<div class="content">
<h3>Phillips</h3>
<div class="details">
<div class="left">
<p>ID: Mp2223-0</p>
<p>Modality: CT</p>
<p>Model: Ingenuity</p>
<p>YOM: 2016</p>
</div>
<div class="right">
<p>Slice: 128</p>
<p>Origin: UAE</p>
<p>Remark: System In Good Working Condition</p>
</div>
</div>
To Know more Call #8766474892
</div>
</div>
<div class="box slide" id="slides__4">
<div class="image-container">
<div class="small-image">
<img src="images/image_21.png" class="small-img-4" alt="">
<img src="images/image_22.png" class="small-img-4" alt="">
<img src="images/image_23.png" class="small-img-4" alt="">
<img src="images/image_24.png" class="small-img-4" alt="">
</div>
<div class="big-image">
<img src="images/image_11.png" class="big-img-4" alt="">
</div>
</div>
<div class="content">
<h3>Phillips</h3>
<div class="details">
<div class="left">
<p>ID: Mp2223-0</p>
<p>Modality: CT</p>
<p>Model: Ingenuity</p>
<p>YOM: 2016</p>
</div>
<div class="right">
<p>Slice: 128</p>
<p>Origin: UAE</p>
<p>Remark: System In Good Working Condition</p>
</div>
</div>
To Know more Call #8766474892
</div>
</div>
</div>
<div class="slider__nav">
<a class="slider__navlink" href="#slides__1"></a>
<a class="slider__navlink" href="#slides__2"></a>
<a class="slider__navlink" href="#slides__3"></a>
<a class="slider__navlink" href="#slides__4"></a>
</div>
</div>
</div>
The main problem is that the slides div have an overflow-x:scroll , which keeps the previous/next links inside the container while your arrow icons are on the outside, so when you click on them you don't click on the link at all.
Also it is not a good practice to have many previous/next links, you only need one.
This is what I updated
Added simple dynamic js function to handle prev/next clicks
Update a.slider prev/next styles including before/after
Previous/next links moved to to the box-container
Note: I didn't hide the next arrow icon when it is the last slide or hide the prev arrow icon when it is the first slide, but you can add it easily.
function nextPrev(type) {
const slides = document.querySelector(".slides");
const slideWidth = document.querySelector(".slide").offsetWidth;
const scrolLeft =
slides.scrollLeft + (type === "next" ? slideWidth : -slideWidth);
slides.scrollTo({
left: scrolLeft,
behavior: "smooth",
});
}
.container {
padding: 80px 7%;
position: relative;
font-family: "Open Sans", sans-serif;
}
.details {
display: flex;
justify-content: space-between;
margin: 20px 0px 30px 0px;
color: white;
}
.right {
max-width: 50%;
}
.container .box-container .box {
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
background: #0d1b2a;
padding: 15px;
margin: 40px 0;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 15px;
}
.container .box-container .box .image-container {
flex: 1 1 500px;
display: flex;
align-items: center;
gap: 15px;
}
.container .box-container .box .content {
flex: 1 1 350px;
}
.container .box-container .box .image-container .small-image {
width: 20%;
}
.container .box-container .box .image-container .big-image {
width: 80%;
}
.container .box-container .box .image-container .small-image img {
width: 100%;
padding: 10px;
border: 1px solid rgba(255, 255, 255, 0.3);
cursor: pointer;
}
.container .box-container .box .image-container .small-image img:hover {
background: rgba(167, 167, 167, 0.2);
}
.container .box-container .box .image-container .big-image img {
width: 95%;
padding: 20px;
filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.2));
}
.container .box-container .box .content h3 {
color: rgb(255, 255, 255);
font-size: 25px;
}
.hide-1 {
background-color: transparent;
padding: 5px 10px;
border: 1px solid rgb(255, 255, 255);
color: rgb(255, 255, 255);
}
.product {
height: 100vh;
}
#media only screen and (max-width: 370px) {
.details {
flex-direction: column;
}
.hide-1 {
font-size: 0.8em;
}
}
/* --------------------------------------- */
html,
body {
height: 100%;
margin: 0px;
}
.slider {
width: 100%;
border-radius: 20px;
overflow: hidden;
}
.slides {
display: flex;
overflow-x: scroll;
position: relative;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
}
.slide:nth-of-type(even) {
background-color: rgb(250, 246, 212);
}
.slide {
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
width: 100%;
height: 400px;
scroll-snap-align: center;
margin-right: 0px;
box-sizing: border-box;
background: white;
transform-origin: center center;
transform: scale(1);
}
.slide__text {
font-size: 40px;
font-weight: bold;
font-family: sans-serif;
}
.slide a {
background: none;
border: none;
}
a.slide__prev,
a.slide__next {
position: absolute;
border: solid black;
border-width: 0 4px 4px 0;
top: 48%;
width: 35px;
height: 35px;
}
a.slide__prev {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
left: 2%;
}
a.slide__next {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
right: 2%;
}
.slider::before,
.slider::after {
content: "";
z-index: 1;
background: none;
pointer-events: none;
}
.slider__nav {
box-sizing: border-box;
position: absolute;
bottom: 5%;
left: 50%;
width: 200px;
margin-left: -100px;
text-align: center;
}
.slider__navlink {
display: inline-block;
height: 15px;
width: 15px;
border-radius: 50%;
background-color: black;
margin: 0 10px 0 10px;
}
.read-article {
position: absolute;
top: 10px;
left: 10px;
z-index: 999;
color: #000;
background: white;
padding: 10px 20px;
border-radius: 10px;
font-family: arial;
text-decoration: none;
box-shadow: rgb(50 50 93 / 25%) 0 0 100px -20px,
rgb(0 0 0 / 30%) 0 0 60px -15px;
}
.read-article:hover {
background: #d5d5d5;
box-shadow: rgb(50 50 93 / 25%) 0 0 100px -20px,
rgb(0 0 0 / 30%) 0 0 60px 0px;
}
iframe[sandbox] .read-article {
display: none;
}
<div class="container slider-container">
<div class="box-container slider">
<div class="slides">
<div class="box slide" id="slides__1">
<div class="image-container">
<div class="small-image">
<img src="images/image_11.png" class="small-img-1" alt="" />
<img src="images/image_12.png" class="small-img-1" alt="" />
<img src="images/image_13.png" class="small-img-1" alt="" />
<img src="images/image_14.png" class="small-img-1" alt="" />
</div>
<div class="big-image">
<img src="images/image_11.png" class="big-img-1" alt="" />
</div>
</div>
<div class="content">
<h3>Phillips</h3>
<div class="details">
<div class="left">
<p>ID: Mp2223-0</p>
<p>Modality: CT</p>
<p>Model: Ingenuity</p>
<p>YOM: 2016</p>
</div>
<div class="right">
<p>Slice: 128</p>
<p>Origin: UAE</p>
<p>Remark: System In Good Working Condition</p>
</div>
</div>
To Know more Call #8766474892
</div>
</div>
<div class="box slide" id="slides__2">
<div class="image-container">
<div class="small-image">
<img src="images/image_11.png" class="small-img-2" alt="" />
<img src="images/image_12.png" class="small-img-2" alt="" />
<img src="images/image_13.png" class="small-img-2" alt="" />
<img src="images/image_14.png" class="small-img-2" alt="" />
</div>
<div class="big-image">
<img src="images/image_11.png" class="big-img-2" alt="" />
</div>
</div>
<div class="content">
<h3>Phillips</h3>
<div class="details">
<div class="left">
<p>ID: Mp2223-0</p>
<p>Modality: CT</p>
<p>Model: Ingenuity</p>
<p>YOM: 2016</p>
</div>
<div class="right">
<p>Slice: 128</p>
<p>Origin: UAE</p>
<p>Remark: System In Good Working Condition</p>
</div>
</div>
To Know more Call #8766474892
</div>
</div>
<div class="box slide" id="slides__3">
<div class="image-container">
<div class="small-image">
<img src="images/image_11.png" class="small-img-3" alt="" />
<img src="images/image_12.png" class="small-img-3" alt="" />
<img src="images/image_13.png" class="small-img-3" alt="" />
<img src="images/image_14.png" class="small-img-3" alt="" />
</div>
<div class="big-image">
<img src="images/image_11.png" class="big-img-3" alt="" />
</div>
</div>
<div class="content">
<h3>Phillips</h3>
<div class="details">
<div class="left">
<p>ID: Mp2223-0</p>
<p>Modality: CT</p>
<p>Model: Ingenuity</p>
<p>YOM: 2016</p>
</div>
<div class="right">
<p>Slice: 128</p>
<p>Origin: UAE</p>
<p>Remark: System In Good Working Condition</p>
</div>
</div>
To Know more Call #8766474892
</div>
</div>
<div class="box slide" id="slides__4">
<div class="image-container">
<div class="small-image">
<img src="images/image_21.png" class="small-img-4" alt="" />
<img src="images/image_22.png" class="small-img-4" alt="" />
<img src="images/image_23.png" class="small-img-4" alt="" />
<img src="images/image_24.png" class="small-img-4" alt="" />
</div>
<div class="big-image">
<img src="images/image_11.png" class="big-img-4" alt="" />
</div>
</div>
<div class="content">
<h3>Phillips</h3>
<div class="details">
<div class="left">
<p>ID: Mp2223-0</p>
<p>Modality: CT</p>
<p>Model: Ingenuity</p>
<p>YOM: 2016</p>
</div>
<div class="right">
<p>Slice: 128</p>
<p>Origin: UAE</p>
<p>Remark: System In Good Working Condition</p>
</div>
</div>
To Know more Call #8766474892
</div>
</div>
</div>
<a
class="slide__prev"
href="javascript:void(0);"
onclick="nextPrev('prev')"
title="Prev"
></a>
<a
class="slide__next"
href="javascript:void(0);"
onclick="nextPrev('next')"
title="Next"
></a>
<div class="slider__nav">
<a class="slider__navlink" href="#slides__1"></a>
<a class="slider__navlink" href="#slides__2"></a>
<a class="slider__navlink" href="#slides__3"></a>
<a class="slider__navlink" href="#slides__4"></a>
</div>
</div>
</div>
Wanted to know if a button can be displayed in the same position as the image.
.column {
float: left;
width: 33.33%;
padding: 5px;
}
<div class="column">
<img src="img_snow.jpg" alt="Snow" style="width:100%">
</div>
<div class="column">
<img src="img_forest.jpg" alt="Forest" style="width:100%">
</div>
<div class="column">
<img src="img_mountains.jpg" alt="Mountains" style="width:100%">
</div>
How can Image and text be displayed ina table format
I didn't really understand what you wanted, but I did it from the picture.
The code is wrong in my opinion you can read about gridd css so that in the future you can do it correctly css grid.
Or the cssportal website can help css-flexbox-generator/
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
}
img {
width: 100%;
height: 19rem;
}
button {
width: fit-content;
margin: 4rem auto 0rem auto;
background-color: #447bad;
border-style: none;
color: #fff;
cursor: pointer;
display: flex;
font-size: 100%;
padding: 10px 21px;
}
<div class="grid-container">
<div class="grid-item">
<img src="https://www.w3schools.com/howto/img_snow.jpg" alt="">
</div>
<div class="grid-item">
<img src="https://www.w3schools.com/howto/img_forest.jpg" alt="">
</div>
<div class="grid-item">
<img src="https://www.w3schools.com/howto/img_snow.jpg" alt="">
</div>
<div class="grid-item">
<button style="background: #4CAF4F;">Green</button>
<button>Blue</button>
</div>
<div class="grid-item"><img src="https://www.w3schools.com/howto/img_forest.jpg" alt=""></div>
<div class="grid-item">
<img src="https://www.w3schools.com/howto/img_snow.jpg" alt="">
</div>
</div>
The second method, click the image disappears, the buttons appear.
let child1 = document.querySelector("#child1");
child1.onclick = function () {
document.querySelector("#child1 > img").style.display = "none";
document.querySelector("#child1 > .btn-click").style.display = "block";
};
.grid-container {
display: flex;
grid-template-columns: auto auto auto;
}
.btn-click{
display:none;
}
img {
width: 100%;
height: 19rem;
}
button {
width: fit-content;
margin: 4rem auto 0rem auto;
background-color: #447bad;
border-style: none;
color: #fff;
cursor: pointer;
display: flex;
font-size: 100%;
padding: 10px 21px;
}
.grid-item{
width: 33%;
}
<div class="grid-container">
<div class="grid-item" id="child1">
<img src="https://www.w3schools.com/howto/img_snow.jpg" alt="">
<div class="btn-click">
<button style="background: #4CAF4F;">Green</button>
<button>Blue </button>
</div>
</div>
<div class="grid-item">
<img src="https://www.w3schools.com/howto/img_forest.jpg" alt="">
</div>
<div class="grid-item">
<img src="https://www.w3schools.com/howto/img_snow.jpg" alt="">
</div>
</div>
The code is not responsive.
if you mean you want the button be inside the picture here what it is
img {
position : relitive ;
}
button {
position : absolute ;
top : 0;
left : 0;
}
I dont know where is your button tag if it is inside your div class:"colume" get it out of there
I would go about it with flexbox usage rather than float. Check out the Codepen I setup with an example in it ->
https://codepen.io/martin_f/pen/vYdYPNp
-EDIT to include relevant code here-
With flexbox usage you can go about making use of flex-direction / justify-content / align-items CSS rules to get the effect you want here ->
.row {
display: inline-flex;
width: 100%;
}
.column,
.column-btn {
display: flex;
margin-right: 1rem;
width: 300px;
}
.column img {
max-width: 300px;
}
.column-btn {
flex-direction: column;
justify-content: center;
align-items: center;
}
.column-btn button {
margin-bottom: 2rem;
width: 10rem;
padding: 1rem;
border: none;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}
.column-btn button:hover {
cursor: pointer;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.column-btn button.blue-btn {
background-color: #008cba;
}
.column-btn button.green-btn {
background-color: #4caf50;
}
<div class="row">
<div class="column">
<img src="https://images.unsplash.com/photo-1483921020237-2ff51e8e4b22?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80" alt="Snow" style="width:100%">
</div>
<div class="column">
<img src="https://images.unsplash.com/photo-1448375240586-882707db888b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80" alt="Forest" style="width:100%">
</div>
<div class="column">
<img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80" alt="Mountains" style="width:100%">
</div>
</div>
<div class="row">
<div class="column-btn">
<button class="green-btn">Green</button>
<button class="blue-btn">Blue</button>
</div>
<div class="column">
<img src="https://images.unsplash.com/photo-1448375240586-882707db888b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80" alt="Forest" style="width:100%">
</div>
<div class="column">
<img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80" alt="Mountains" style="width:100%">
</div>
</div>
And you end up with something like ->
I am trying to create 3 cards that stand at the bottom of the webpage but the 3 cards are overlapping. Can you help me find my mistake please? :)
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.144);
transition: 0.3s;
border-radius: 13px;
width: 320px;
height: 455px;
cursor: pointer;
position: absolute;
margin-left: 4%;
bottom: 10px;
margin-right: 4%;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.397);
}
.container {
padding: 2px 16px;
font-family: 'Rubik', sans-serif;
cursor: pointer;
}
.row {
display: flex;
}
.row::after {
content: "";
clear: both;
display: table;
}
<div class="row">
<div class="card">
<img src="resources/images/Front1.png" style="width: 100%;" height="320px">
<div class="container">
<h3><b>Create checklists</b></h3>
<p>Make your own customizable checklist to remain happy and healthy</p>
</div>
</div>
<div class="card">
<img src="resources/images/Front2.jpeg" style="width: 100%;">
<div class="container">
<h3><b>Take notes</b></h3>
<p>Write your own notes with fun, colourful tools</p>
</div>
</div>
<div class="card">
<img src="resources/images/Front3.jpeg" style="width: 100%;" height="320px">
<div class="container">
<h3><b>Create calendars</b></h3>
<p>Add pictures to your calendars and customize according to your preferences</p>
</div>
</div>
</div>
The problem was caused by the position: absolute; style in your CSS. Basically, you set all 3 cards to the same position which is why they overlapped.
I also changed your card's height to min-height. This is because the text was flowing out of the card and min-height would prevent this.
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.144);
transition: 0.3s;
border-radius: 13px;
width: 320px;
min-height: 455px;
cursor: pointer;
margin-left: 4%;
margin-right: 4%;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.397);
}
.container {
padding: 2px 16px;
font-family: 'Rubik', sans-serif;
cursor: pointer;
}
.row {
display: flex;
}
.row::after {
content: "";
clear: both;
display: table;
}
<div class="row">
<div class="card">
<img src="resources/images/Front1.png" style="width: 100%;" height="320px">
<div class="container">
<h3><b>Create checklists</b></h3>
<p>Make your own customizable checklist to remain happy and healthy</p>
</div>
</div>
<div class="card">
<img src="resources/images/Front2.jpeg" style="width: 100%;">
<div class="container">
<h3><b>Take notes</b></h3>
<p>Write your own notes with fun, colourful tools</p>
</div>
</div>
<div class="card">
<img src="resources/images/Front3.jpeg" style="width: 100%;" height="320px">
<div class="container">
<h3><b>Create calendars</b></h3>
<p>Add pictures to your calendars and customize according to your preferences</p>
</div>
</div>
</div>
remove "position: absolute" and things would work fine. Or if you're trying to display somethign else?
i have jumbotron with a background image , i put a
-webkit-filter: brightness(30%); on the background image, but this effect also affects all other images and text in the jumbotron, i am trying to make only the background image dull, and all other text and images bright, can anyone please assist me
.jumbotron {
background-image: url("apartment.jpg");
height: 500px;
width: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
-webkit-filter: brightness(30%);
}
img#sub {
padding: 5px;
border: solid 1px #EFEFEF;
height: 100%;
width: 100%;
}
img.hover-shadow {
transition: 0.3s;
}
.hover-shadow:hover {
border: solid 1px #CCC;
-moz-box-shadow: 1px 1px 5px #999;
-webkit-box-shadow: 1px 1px 5px #999;
box-shadow: 1px 1px 5px #999;
}
<section>
<h2 class="section-title" style="word-wrap:break-word;"> <span id="section32"> </span> APARTMENTS</h2>
<div align="center">
<img id="divider" src="divide1.png">
</div>
<br></br>
<div class="jumbotron">
<h2 style="text-align:center">Apartments</h2>
<div align="center" class="container-fluid" id="ab">
<div id="sub" class="column">
<img id="sub" src="8.jpg" style="width:70%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
</div>
<div id="sub" class="column">
<img id="sub" src="10.jpg" style="width:70%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
</div>
</div>
</div>
</section>
below is an image showing the dark effect all over
image
Is this what you are looking for? Instead of styling the background image container, I added a :before pseudo element to it, and set it to have a black overlay with an opacity of 50% using rgba.
.jumbotron{background-image: url("http://placekitten.com/1000/700");
height: 500px;
width: 100%;
background-position: center center;background-repeat: no-repeat;background-size: cover;
position: relative;
}
.column {
display: inline-block;
margin: 5px;
}
img.subImg {
padding: 5px;
border: solid 1px #EFEFEF;
height: 100%;
width: 100%;
position: relative;
z-index: 10;
width: 300px;
}
.jumbotron:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,.5);
}
img.hover-shadow {
transition: 0.3s;
}
.hover-shadow:hover {
border: solid 1px #CCC;
-moz-box-shadow: 1px 1px 5px #999;
-webkit-box-shadow: 1px 1px 5px #999;
box-shadow: 1px 1px 5px #999;
}
<section >
<h2 class="section-title" style="word-wrap:break-word;" > <span
id="section32" > </span> APARTMENTS</h2>
<div align="center">
<img id="divider" src="divide1.png" >
</div>
<div class="jumbotron">
<h2 style="text-align:center">Apartments</h2>
<div align="center" class="container-fluid" id="ab">
<div id="sub1" class="column">
<img class="subImg" src="http://placekitten.com/500/300"
onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
</div>
<div id="sub2" class="column">
<img class="subImg" src="http://placekitten.com/500/300"
onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
</div>
</div>
</div>
</section>
How about overlapping background-image
background-image:
linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)) ,
url("Your URL");
.jumbotron {
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)), url("https://upload.wikimedia.org/wikipedia/commons/3/38/Tampa_FL_Sulphur_Springs_Tower_tall_pano01.jpg");
height: 500px;
width: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
-webkit-filter: brightness(100%);
}
.jumbotron img {
-webkit-filter: none;
}
img#sub {
padding: 5px;
border: solid 1px #efefef;
height: 100%;
width: 100%;
}
img.hover-shadow {
transition: 0.3s;
}
.hover-shadow:hover {
border: solid 1px #ccc;
-moz-box-shadow: 1px 1px 5px #999;
-webkit-box-shadow: 1px 1px 5px #999;
box-shadow: 1px 1px 5px #999;
}
.column {
position: relative;
}
.img-out {
position: relative;
}
.img-text {
position: absolute;
top: calc(45% - 24px);
right: 0;
bottom: 0;
left: 0;
font-size: 24px;
vertical-align: middle;
color: red;
font-weight: 900;
}
<section>
<h2 class="section-title" style="word-wrap:break-word;"> <span id="section32"> </span> APARTMENTS</h2>
<div align="center">
<img id="divider" src="http://www.gettyimages.in/gi-resources/images/Homepage/Hero/US/MAR2016/prestige-587705839_full.jpg">
</div>
<br></br>
<div class="jumbotron">
<h2 style="text-align:center">Apartments</h2>
<div align="center" class="container-fluid" id="ab">
<div id="sub" class="column">
<div class="img-out">
<img id="sub" src="https://html5box.com/html5lightbox/images/lakeandballoon.jpg" style="width:70%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
</div>
<div class="img-text">
<p>TEXT 1</p>
</div>
</div>
<div id="sub" class="column">
<div class="img-out">
<img id="sub" src="http://eskipaper.com/images/image-2.jpg" style="width:70%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
</div>
<div class="img-text">
<p>TEXT 1</p>
</div>
</div>
</div>
</div>
</section>
Try this.
background-image: rgba(0, 0, 0, 0.4), url("apartment.jpg");
background-image can take multiple values.
JSFiddle.
In this SSCCE, the first div.number-outer-container renders below its parent div.step-container.
The question is that why is this happening, and what can I do to make it render vertically at the right place?
I have tried to apply a top:0 to div.number-outer-container but it does not seem to affect anything.
Note: This is just an SSCCE, actually each div.step-container is added dynamically, and any number of div.step-containers can be added.
.wrapper-big {
height: 600px;
overflow-y: auto;
width: 100%;
}
.wrapper {
height: 100%;
width: 826px;
margin: 50px auto;
display: table;
background-color: #003b80;
}
.cell {
display: table-cell;
vertical-align: top;
}
.left-cell {
width: 50%;
background-color: chocolate;
}
.right-cell {
background-color: darkslategrey
}
.step-container {
max-height: 200px;
font-size: 0;
}
.right-cell .step-container {
margin-top: 125px;
direction: rtl;
}
.content-box {
display: inline-block;
width: 350px;
height: 200px;
/*border: 5px solid blue;*/
font-size: 0;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.69);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.69);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.69);
background-color: dodgerblue
}
.right-cell .content-box {
background-color: darkturquoise
}
.middle-cell {
height: 100%;
background-color: white;
width: 1.5px;
font-size: 0;
box-shadow: 0px 0px 10px black;
-moz-box-shadow: 0px 0px 10px black;
-webkit-box-shadow: 0px 0px 10px black;
}
.number-outer-container {
display: inline-block;
/*position:absolute;*/
position: relative;
left: 390px;
}
.left-cell .number-outer-container {
/*margin-left:39px;*/
}
.left-cell .number-outer-container {
left:390px;
}
.right-cell .number-outer-container {
right:390px;
}
.number-inner-container {
height: 200px;
display: flex;
flex-direction: column;
justify-content: center;
}
.number-banner {
width: 50px;
height: 50px;
background-color: crimson;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
font-size:22px;
font-weight:bold;
color:white;
line-height:50px;
text-align:center;
}
.notch-outer-container {
display: inline-block;
}
.left-cell .notch-outer-container {
/*margin-right: 24px;*/
}
.right-cell .notch-outer-container {
/*margin-left: 22px;*/
}
.notch-inner-container {
height: 200px;
display: flex;
flex-direction: column;
justify-content: center;
}
.notch {
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
}
.left-face-notch {
border-right: 15px solid #520f23;
}
.right-face-notch {
border-left: 15px solid #571780;
}
<div class="wrapper-big">
<div class="wrapper">
<div class="cell left-cell" align="left">
<!-- -->
<div class="step-container">
<div class="content-box"></div>
<div class="notch-outer-container">
<div class="notch-inner-container">
<div class="right-face-notch notch"></div>
</div>
</div>
<div class="number-outer-container">
<div class="number-inner-container">
<div class="number-banner">1</div>
</div>
</div>
</div>
<!-- -->
<div class="step-container" style="margin-top:50px;">
<div class="content-box"></div>
<div class="notch-outer-container">
<div class="notch-inner-container">
<div class="right-face-notch notch"></div>
</div>
</div>
<div class="number-outer-container">
<div class="number-inner-container">
<div class="number-banner">3</div>
</div>
</div>
</div>
<!-- -->
<div class="step-container" style="margin-top:50px;">
<div class="content-box"></div>
<div class="notch-outer-container">
<div class="notch-inner-container">
<div class="right-face-notch notch"></div>
</div>
</div>
<div class="number-outer-container">
<div class="number-inner-container">
<div class="number-banner">5</div>
</div>
</div>
</div>
<!-- -->
</div>
<div class="cell middle-cell"></div>
<div class="cell right-cell" align="right">
<!-- -->
<div class="step-container" style="margin-top:125px;">
<div class="content-box"></div>
<div class="notch-outer-container">
<div class="notch-inner-container">
<div class="left-face-notch notch"></div>
</div>
</div>
<div class="number-outer-container">
<div class="number-inner-container">
<div class="number-banner">2</div>
</div>
</div>
</div>
<!-- -->
<div class="step-container" style="margin-top:50px;">
<div class="content-box"></div>
<div class="notch-outer-container">
<div class="notch-inner-container">
<div class="left-face-notch notch"></div>
</div>
</div>
<div class="number-outer-container">
<div class="number-inner-container">
<div class="number-banner">4</div>
</div>
</div>
</div>
<!-- -->
<div class="step-container" style="margin-top:50px;">
<div class="content-box"></div>
<div class="notch-outer-container">
<div class="notch-inner-container">
<div class="left-face-notch notch"></div>
</div>
</div>
<div class="number-outer-container">
<div class="number-inner-container">
<div class="number-banner"></div>
</div>
</div>
</div>
<!-- -->
</div>
</div>
<!-- .wrapper -->
</div>
<!-- .wrapper-big -->
You could set position:relative to the parent container, and set position:absolute on the child element, so they will always stay together.
Read this post if you're interested in learning more about the details of how position works.
UPDATED DEMO
.cell .step-container {
position: relative;
}
.cell .number-outer-container {
position: absolute;
top: 0;
}
.left-cell .number-outer-container {
left: 390px;
}
.right-cell .number-outer-container {
left: -20px;
}
.left-face-notch,
.right-face-notch {
position: absolute;
top: 85px; /*200/2 - 30/2*/
}
Because of div.notch-outer-container and div.content-box, are taking up all the space. And since all the divs are inline-block.
If you set position:absolute; top:0; on div.number-outer-container and remove position:relative then it goes up.
http://jsfiddle.net/7dte3ru6/5/