Positioned divs spilling out of container - html

I'm trying to use this jquery grid plugin, but it's not working with my layout. The images are stacked on top of each other, they seem to be spilling out of .main, and they overlap the footer. Help? :C
body {
padding: 0;
margin: 0;
color: $fontcolor;
background-color: #eee;
font: 100% 'Open Sans', sans-serif;
background-color: $main-bg;
width: 100%;
height: 100%;
}
.container {
margin: 0 auto;
width: 80%;
height: 100%;
}
.main {
width: 100%;
background-color: $content-bg;
}
.grid-container {
background-color: #F9F9F9;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.15);
margin: 20px auto;
position: relative; }
.grid-item {
display: inline-block;
font-size: 0;
position: absolute;
}
.grid-item img {
cursor: pointer;
display: block;
width: 100%; }
<body>
<div class="container">
<div class="main">
<div class='grid-container'>
<div class='grid-item'>
<img alt='' src='stackgrid/example/img/short.jpg'>
</div>
<div class='grid-item'>
<img alt='' src='stackgrid/example/img/tall.jpg'>
</div>
<div class='grid-item'>
<img alt='' src='stackgrid/example/img/medium.jpg'>
</div>
<div class='grid-item'>
<img alt='' src='stackgrid/example/img/tall.jpg'>
</div>
<div class='grid-item'>
<img alt='' src='stackgrid/example/img/short.jpg'>
</div>
<div class='grid-item'>
<img alt='' src='stackgrid/example/img/medium.jpg'>
</div>
<div class='grid-item'>
<img alt='' src='stackgrid/example/img/medium.jpg'>
</div>
<div class='grid-item'>
<img alt='' src='stackgrid/example/img/short.jpg'>
</div>
<div class='grid-item'>
<img alt='' src='stackgrid/example/img/medium.jpg'>
</div>
</div>
</div>
</div>
</body>


Make sure you are initializing stackgrid in window load.
Also try the .reset() method.

Related

Horizontal product card div slider not working

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>

how to put the text below the images without {css}

Whenever I'm trying to change .tea to display: block; all the images change their position from being horizontal, to being vertical
How to position it the correct way so the images keep being horizontally aligned and the text will be underneath
.tea {
display: inline-flex;
margin-left: 225px;
padding: 20px;
justify-content: center;
}
.tea h4 {
display: inline-block;
position: relative;
text-align: center;
}
.tea2 {
display: inline-flex;
margin-left: 385px;
}
.tea img {
width: 300px;
height: 200px;
padding: 25px;
border-radius: 15px;
}
.tea2 img {
width: 300px;
height: 200px;
padding: 30px;
}
<div class="tea">
<img class="1" src="https://via.placeholder.com/150">
<h4>Myrtle Ave</h4>
<img class="2" src="https://via.placeholder.com/150">
<h4>Spiced rum</h4>
<img class="3" src="https://via.placeholder.com/150">
<h4>Berry Blitz</h4>
</div>
<div class="tea2">
<img class="1" src="https://via.placeholder.com/150">
<img class="2" src="https://via.placeholder.com/150">
</div>

You should do it like this
* {
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
}
#gallery {
display: flex;
flex-wrap: wrap;
}
#gallery .image-container {
width: 25%;
background-color: lightgreen;
border-radius: 5px;
padding: 5px;
box-shadow: 1px 1px 2px #000, -1px -1px 2px #000;
}
#gallery img {
width: 100%;
}
#gallery .title {
font: bold 24px monospace;
text-align: center;
color: white;
margin: 2%;
}
<div id="gallery">
<div class="image-container">
<img src="https://openclipart.org/image/800px/svg_to_png/321159/hotwork-sign-arvin61r58.png">
<p class="title">Image 1</p>
</div>
<div class="image-container">
<img src="https://openclipart.org/image/800px/svg_to_png/321159/hotwork-sign-arvin61r58.png">
<p class="title">Image 2</p>
</div>
<div class="image-container">
<img src="https://openclipart.org/image/800px/svg_to_png/321159/hotwork-sign-arvin61r58.png">
<p class="title">Image 3</p>
</div>
<div class="image-container">
<img src="https://openclipart.org/image/800px/svg_to_png/321159/hotwork-sign-arvin61r58.png">
<p class="title">Image 4</p>
</div>
<div class="image-container">
<img src="https://openclipart.org/image/800px/svg_to_png/321159/hotwork-sign-arvin61r58.png">
<p class="title">Image 5</p>
</div>
<div class="image-container">
<img src="https://openclipart.org/image/800px/svg_to_png/321159/hotwork-sign-arvin61r58.png">
<p class="title">Image 6</p>
</div>
<div class="image-container">
<img src="https://openclipart.org/image/800px/svg_to_png/321159/hotwork-sign-arvin61r58.png">
<p class="title">Image 7</p>
</div>
<div class="image-container">
<img src="https://openclipart.org/image/800px/svg_to_png/321159/hotwork-sign-arvin61r58.png">
<p class="title">Image 8</p>
</div>
</div>

You need to change you HTML to support what you want. Use a container wrapper around the image and image text.
Example: https://jsfiddle.net/Lqupmf5s/
<div class="tea">
<div class="img-container">
<img class="1" src="32131">
<h4>Myrtle Ave</h4>
</div>
<div class="img-container">
<img class="2" src="3213">
<h4>Spiced rum</h4>
</div>
<div class="img-container">
<img class="3" src="3213">
<h4>Berry Blitz</h4>
</div>
</div>
.tea {
display: inline-flex;
/* margin-left: 225px; */
padding: 20px;
justify-content: center; }
.tea h4{
display: inline-block;
position: relative;
text-align: center; }
.tea2 {
display: inline-flex;
margin-left: 385px; }
.tea img {
width: 300px;
height: 200px;
/* padding: 25px; */
border-radius: 15px; }
.tea2 img {
width: 300px;
height: 200px;
padding: 30px; }

Centering div elements disregarding screen size

I have used flexbox already to try this, but for some reason it isn't working. On a smaller screen size, everything's centered. I tried doing justify-content: center for flexbox, but that isn't working. I will put down the code snippet as well as screen shots showing what I'm seeing. You may look at snippet, but it uses a combination of percents and pixels, so it may look weird. Can I handle simple centering without media queries? Even if I did use one, I still can't get it to center on my desktop.
html {
height: 100%;
}
body{
height: 100%;
margin: 0;
font-family: courier;
font-size: 19px;
}
#container {
min-height: 100%;
margin-bottom: -150px;
width: 100%;
}
#container:after {
content: "";
display: block;
}
#content{
display:flex;
float:left;
width: 800px;
flex-wrap: wrap;
justify-content: center;
}
#footer, #container:after{
height: 150px;
}
#footer{
background-color: #006699;
clear: both;
}
.wrap {
margin: 0 auto;
width: 100%;
display: flex;
align-items: center;
flex-wrap: nowrap;
}
.sub {
padding: 12px;
width: 32%;
height: 120px;
color: white;
border-right: solid white 1px;
}
.sub:last-child{
border: 0px;
}
#leftbar{
width: 10%;
height: calc(100vh - 150px);
background-color: black;
float:left;
}
#rightbar{
width: 10%;
height: calc(100vh - 150px);
background-color: black;
float: right;
}
#nav {
list-style: none;
font-weight: bold;
width: 100%;
text-align: center;
background: rgba(0, 102, 153, 0.4);
height: 100px;
}
#nav ul {
list-style-type: none;
margin: 0px;
padding: 0;
overflow: auto;
// background-color: #006699;
text-align: center;
}
#nav li {
margin: 0px;
display: inline-block;
}
#nav li a {
padding: 10px;
display: inline-block;
text-decoration: none;
font-weight: bold;
font-size: 30px;
color: white;
// background-color: #006699;
}
#nav li a:hover {
color: white;
text-shadow: 2px 2px 4px white;
}
.clear {
clear: both;
}
div.img {
margin: 5px;
border: 1px solid #595959;
float: left;
width: 180px;
}
div.img:hover{
border: 1px solid #b3b3ff;
}
div.img img {
width: 100%;
height: auto;
}
div.desc{
padding: 15px;
text-align: center;
}
div.head{
text-align:center;
background-color:black;
color: orange;
}
<!DOCTYPE HTML>
<html>
<head lang="en">
<link rel="stylesheet" type="text/css" href="new.css" />
<meta charset="UTF-8">
<title></title>
<style>
</style>
<script>
</script>
</head>
<body>
<div id="container">
<div id="nav">
<ul>
<li>Home</li>
<li>Works</li>
<li>About</li>
</ul>
</div>
<div class="clear"></div>
<div class="upperbox">
<div id="leftbar"> </div>
<div id="rightbar"></div>
<div id="content">
<div class="img">
<div class="head">Color Palettes</div>
<img src="purple.png" alt="the color purple">
<div class="desc">Color</div>
</div>
<div class="img">
<div class="head">Color Palettes</div>
<img src="blue.png" alt="the color blue">
<div class="desc">Color</div>
</div>
<div class="img">
<div class="head">Color Palettes</div>
<img src="yellow.png" alt="the color yellow">
<div class="desc">Color</div>
</div>
<div class="img">
<div class="head">Color Palettes</div>
<img src="brown.jpg" alt="the color yellow">
<div class="desc">Color</div>
</div>
<div class="img">
<div class="head">Color Palettes</div>
<img src="grey.jpg" alt="the color yellow">
<div class="desc">Color</div>
</div>
<div class="img">
<div class="head">Color Palettes</div>
<img src="green.png" alt="the color yellow">
<div class="desc">Color</div>
</div>
<div class="img">
<div class="head">Color Palettes</div>
<img src="red.png" alt="the color yellow">
<div class="desc">Color</div>
</div>
<div class="img">
<div class="head">Color Palettes</div>
<img src="gold.jpg" alt="the color yellow">
<div class="desc">Color</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="wrap">
<div class="sub">Lorem Ipsum</div>
<div class="sub">Lorem Ipsum </div>
<div class="sub">Lorem Ipsum </div>
</div>
</div>
</body>
</html>

erase float:left; from #content and add margin: 0 auto to it.

You can either give your #content the CSS of margin: 0 auto;, like so:
#content {
margin: 0 auto;
}
(Maybe you will also have to not float it to the left)
Or you could take a look at other modern possibilities for centering an element:
https://css-tricks.com/centering-percentage-widthheight-elements/
https://css-tricks.com/centering-in-the-unknown/
https://codemyviews.com/blog/how-to-center-anything-with-css

Adding overlay to images in overflow box

Each image should have a transparent black overlay with a white number centered over it like "100", "200" etc. This number represents the amount of points needed to unlock the picture. How can I achieve this?
JSFiddle
HTML
<div class="wrapper">
<div class="scrolls">
<img src="http://placehold.it/150x150" style="height:100px"/>
<img src="http://placehold.it/150x150" style="height:100px"/>
<img src="http://placehold.it/150x150" style="height:100px"/>
<img src="http://placehold.it/150x150" style="height:100px"/>
<img src="http://placehold.it/150x150" style="height:100px"/>
<img src="http://placehold.it/150x150" style="height:100px"/>
<img src="http://placehold.it/150x150" style="height:100px"/>
<img src="http://placehold.it/150x150" style="height:100px"/>
</div>
</div>
CSS
.wrapper {
background:#f4f4f4;
margin: auto;
text-align: center;
position: relative;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-bottom: 20px !important;
width: 550px;
padding-top: 5px;
}
.scrolls {
overflow-x: scroll;
overflow-y: hidden;
height: 150px;
white-space:nowrap
}
.imageDiv img {
margin: 2px;
max-height: 150px;
cursor: pointer;
display:inline-block;
*display:inline;
*zoom:1;
vertical-align:top;
}

You need to wrap each image and overlay in an individual div. The overlay is then positioned absolutely over the image.
.wrapper {
background: #f4f4f4;
margin: auto;
text-align: center;
position: relative;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-bottom: 20px !important;
width: 550px;
padding-top: 5px;
}
.scrolls {
overflow-x: scroll;
overflow-y: hidden;
height: 150px;
white-space: nowrap;
padding-bottom: 25px;
}
.imageDiv {
margin: 2px;
max-height: 150px;
cursor: pointer;
display: inline-block;
*display: inline;
*zoom: 1;
vertical-align: top;
position: relative;
}
.imageDiv .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.25);
line-height: 150px;
color: transparent;
font-size: 2em;
text-align: center;
transition: all .5s ease;
}
.imageDiv:hover .overlay {
background: rgba(0, 0, 0, 0.55);
color: white;
;
}
.imgaDiv img {
display: block;
}
<div class="wrapper">
<div class="scrolls">
<div class="imageDiv">
<img src=" http://placehold.it/150x150 " />
<div class="overlay">100</div>
</div>
<div class="imageDiv">
<img src=" http://placehold.it/150x150 " />
<div class="overlay">100</div>
</div>
<div class="imageDiv">
<img src=" http://placehold.it/150x150 " />
<div class="overlay">100</div>
</div>
<div class="imageDiv">
<img src=" http://placehold.it/150x150 " />
<div class="overlay">100</div>
</div>
<div class="imageDiv">
<img src=" http://placehold.it/150x150 " />
<div class="overlay">100</div>
</div>
<div class="imageDiv">
<img src=" http://placehold.it/150x150 " />
<div class="overlay">100</div>
</div>
<div class="imageDiv">
<img src=" http://placehold.it/150x150 " />
<div class="overlay">100</div>
</div>
<div class="imageDiv">
<img src=" http://placehold.it/150x150 " />
<div class="overlay">100</div>
</div>
</div>
</div>
For a refinement/enhancement, you could do away with an actual overlay div and use a pseudo-element instead..if it's just styling. The technique remains the same.

How to box with div the propper way?

I am often using div to box in information but I have notice that the wrapping box might sometimes not fill out the space and this leads to elements from other wrappers entering the box area.
For example :
<div>
<div style="length:150px;">my info1</div>
<div style="length:50px;">my Info2</div>
</div>
Take a look at this example
.topic {
width: 500px;
background-color: green;
display: block;
}
.topic .tInfo {
float: left;
width: 460px;
background-color: blue;
}
.topic .tName {
width: 460px;
background-color: brown;
}
.topic .tTime {
width: 460px;
background-color: lime;
}
.topic .tUImgLnk {
width: 40px;
height: 40px;
float: left;
position: relative;
background: red;
}
.topic .tUImgLnk .tUImg {
margin: 0px auto;
display: block;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
position: absolute;
}
<div class="topic" data-reactid=".24rl768raww.$0">
<div class="tUImgLnk" data-reactid=".24rl768raww.$0.0">
<a title="Carl" target="_blank" href="http://www.bradspel.net" data-reactid=".24rl768raww.$0.0.0">
<img class="tUImg" src="" data-reactid=".24rl768raww.$0.0.0.0">
</a>
</div>
<div class="tInfo" data-reactid=".24rl768raww.$0.1">
<div class="tName" data-reactid=".24rl768raww.$0.1.0"><a title="Carl" target="_blank" href="http://www.bradspel.net" data-reactid=".24rl768raww.$0.1.0.0">Carl</a>
</div>
<div class="tTime" data-reactid=".24rl768raww.$0.1.1"><span data-reactid=".24rl768raww.$0.1.1.0">2015-02-20 18:43:03</span>
</div>
</div>
</div>
<div class="topic" data-reactid=".24rl768raww.$0">
<div class="tUImgLnk" data-reactid=".24rl768raww.$0.0">
<a title="Carl" target="_blank" href="http://www.bradspel.net" data-reactid=".24rl768raww.$0.0.0">
<img class="tUImg" src="" data-reactid=".24rl768raww.$0.0.0.0">
</a>
</div>
<div class="tInfo" data-reactid=".24rl768raww.$0.1">
<div class="tName" data-reactid=".24rl768raww.$0.1.0"><a title="Carl" target="_blank" href="http://www.bradspel.net" data-reactid=".24rl768raww.$0.1.0.0">Carl</a>
</div>
<div class="tTime" data-reactid=".24rl768raww.$0.1.1"><span data-reactid=".24rl768raww.$0.1.1.0">2015-02-20 18:43:03</span>
</div>
</div>
</div>
I have used <br style="clear:both"/> at the end of each wrapper box but is this really the best way to go?

This is happenning because you don't have a wrapper , and the elements are liberaly floating;
in the below snippet I wrapped your elements in rows with article selector and cleared floats:
.topic {
width: 500px;
background-color: green;
display: block;
}
.topic .tInfo {
float: left;
width: 460px;
background-color: blue;
}
.topic .tName {
width: 460px;
background-color: brown;
}
.topic .tTime {
width: 460px;
background-color: lime;
}
.topic .tUImgLnk {
width: 40px;
height: 40px;
float: left;
position: relative;
background: red;
}
.topic .tUImgLnk .tUImg {
margin: 0px auto;
display: block;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
position: absolute;
}
article:after {
content: "";
display: table;
clear: both;
}
<article>
<div class="topic" data-reactid=".24rl768raww.$0">
<div class="tUImgLnk" data-reactid=".24rl768raww.$0.0">
<a title="Carl" target="_blank" href="http://www.bradspel.net" data-reactid=".24rl768raww.$0.0.0">
<img class="tUImg" src="" data-reactid=".24rl768raww.$0.0.0.0">
</a>
</div>
<div class="tInfo" data-reactid=".24rl768raww.$0.1">
<div class="tName" data-reactid=".24rl768raww.$0.1.0"><a title="Carl" target="_blank" href="http://www.bradspel.net" data-reactid=".24rl768raww.$0.1.0.0">Carl</a>
</div>
<div class="tTime" data-reactid=".24rl768raww.$0.1.1"><span data-reactid=".24rl768raww.$0.1.1.0">2015-02-20 18:43:03</span>
</div>
</div>
</div>
<article>
</article>
<div class="topic" data-reactid=".24rl768raww.$0">
<div class="tUImgLnk" data-reactid=".24rl768raww.$0.0">
<a title="Carl" target="_blank" href="http://www.bradspel.net" data-reactid=".24rl768raww.$0.0.0">
<img class="tUImg" src="" data-reactid=".24rl768raww.$0.0.0.0">
</a>
</div>
<div class="tInfo" data-reactid=".24rl768raww.$0.1">
<div class="tName" data-reactid=".24rl768raww.$0.1.0"><a title="Carl" target="_blank" href="http://www.bradspel.net" data-reactid=".24rl768raww.$0.1.0.0">Carl</a>
</div>
<div class="tTime" data-reactid=".24rl768raww.$0.1.1"><span data-reactid=".24rl768raww.$0.1.1.0">2015-02-20 18:43:03</span>
</div>
</div>
</div>
</article>