Getting the right navigation and main left (without using float)

Getting the right navigation and main left (without using float) - html

trying to make a simple project where the left side will be navigating and the right main content. The problem is that I do not want to use the float: left, float: right function. Is there any other option to get this effect? Below is the photo:
enter image description here
* {
margin: 0;
padding: 0;
}
html {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
font-family: Arial, Arial, Helvetica, sans-serif;
}
/* product section */
.products {
display: flex;
flex-wrap: wrap;
max-width: 853px;
margin: 0 auto;
}
.product-card {
display: flex;
flex-direction: column;
padding: 2%;
flex: 1 16%;
background-color: #FFF;
box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.25);
}
.product-image img {
width: 100%;
}
.product-info {
margin-top: auto;
padding-top: 20px;
text-align: center;
}
h5 {
color: #C00;
font-size: 1.2rem;
font-weight: bold;
text-align: center;
text-transform: uppercase;
}
/* product section end */
.nav {
max-width: 853px;
margin: 0 auto;
}
.nav ul{
list-style: none;
width: 150px;
font-size: 1em;
padding: 0;
}
.nav li a{
text-decoration: none;
display: block;
}
.nav .parent li a{
padding: 10px 12px 10px 20px;
background: #429840;
color: white;
border-bottom:1px solid #eee;
}
.nav .child li a{ background: #ddd; color:#333;}
.nav .parent a:hover{ background: #429855;}
.nav .child a:hover{ background: #429855;}
ul.parent > li:hover > ul.child{
display: block;
position: absolute;
left: 150px; top: 0;
}
ul.parent > li{ position: relative;}
ul.child{ display: none; }
.plus{ float: right; }
<div class="nav">
<ul class="parent">
<li>Home</li>
<li>About <span class="plus">+</span>
<ul class="child">
<li>What We do?</li>
<li>Awords</li>
</ul>
</li>
<li>Products <span class="plus">+</span>
<ul class="child">
<li>Mobile</li>
<li>Desktop</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
<section class="products">
<div class="product-card">
<div class="product-image">
<img src="https://www.ayearofboxes.com/wp-content/themes/ayearofboxes/assets/svg/box-closed.svg" alt="90gsm">
</div>
<div class="product-info">
<h5>box1</h5>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="https://www.ayearofboxes.com/wp-content/themes/ayearofboxes/assets/svg/box-closed.svg" alt="90gsm">
</div>
<div class="product-info">
<h5>box2</h5>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="https://www.ayearofboxes.com/wp-content/themes/ayearofboxes/assets/svg/box-closed.svg" alt="90gsm">
</div>
<div class="product-info">
<h5>box3</h5>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="https://www.ayearofboxes.com/wp-content/themes/ayearofboxes/assets/svg/box-closed.svg" alt="90gsm">
</div>
<div class="product-info">
<h5>box4</h5>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="https://www.ayearofboxes.com/wp-content/themes/ayearofboxes/assets/svg/box-closed.svg" alt="90gsm">
</div>
<div class="product-info">
<h5>box5</h5>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="https://www.ayearofboxes.com/wp-content/themes/ayearofboxes/assets/svg/box-closed.svg" alt="90gsm">
</div>
<div class="product-info">
<h5>box6</h5>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="https://www.ayearofboxes.com/wp-content/themes/ayearofboxes/assets/svg/box-closed.svg" alt="90gsm">
</div>
<div class="product-info">
<h5>box7</h5>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="https://www.ayearofboxes.com/wp-content/themes/ayearofboxes/assets/svg/box-closed.svg" alt="90gsm">
</div>
<div class="product-info">
<h5>box8</h5>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="https://www.ayearofboxes.com/wp-content/themes/ayearofboxes/assets/svg/box-closed.svg" alt="90gsm">
</div>
<div class="product-info">
<h5>box9</h5>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="https://www.ayearofboxes.com/wp-content/themes/ayearofboxes/assets/svg/box-closed.svg" alt="90gsm">
</div>
<div class="product-info">
<h5>box10</h5>
</div>
</div>
</section>
I tried to use a flexbox, but everything starts break...

You just need to wrap everything and flex it too.
* {
margin: 0;
padding: 0;
}
html {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
font-family: Arial, Arial, Helvetica, sans-serif;
}
/* product section */
.wrapper {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
}
.products {
display: flex;
flex-wrap: wrap;
max-width: 853px;
margin: 0 auto;
}
.product-card {
display: flex;
flex-direction: column;
padding: 2%;
flex: 1 16%;
background-color: #FFF;
box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.25);
}
.product-image img {
width: 100%;
}
.product-info {
margin-top: auto;
padding-top: 20px;
text-align: center;
}
h5 {
color: #C00;
font-size: 1.2rem;
font-weight: bold;
text-align: center;
text-transform: uppercase;
}
/* product section end */
.nav {
max-width: 853px;
margin: 0 auto;
}
.nav ul {
list-style: none;
width: 150px;
font-size: 1em;
padding: 0;
}
.nav li a {
text-decoration: none;
display: block;
}
.nav .parent li a {
padding: 10px 12px 10px 20px;
background: #429840;
color: white;
border-bottom: 1px solid #eee;
}
.nav .child li a {
background: #ddd;
color: #333;
}
.nav .parent a:hover {
background: #429855;
}
.nav .child a:hover {
background: #429855;
}
ul.parent>li:hover>ul.child {
display: block;
position: absolute;
left: 150px;
top: 0;
}
ul.parent>li {
position: relative;
}
ul.child {
display: none;
}
.plus {
float: right;
}
<div class="wrapper">
<div class="nav">
<ul class="parent">
<li>Home</li>
<li>About <span class="plus">+</span>
<ul class="child">
<li>What We do?</li>
<li>Awords</li>
</ul>
</li>
<li>Products <span class="plus">+</span>
<ul class="child">
<li>Mobile</li>
<li>Desktop</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
<section class="products">
<div class="product-card">
<div class="product-image">
<img src="https://www.ayearofboxes.com/wp-content/themes/ayearofboxes/assets/svg/box-closed.svg" alt="90gsm">
</div>
<div class="product-info">
<h5>box1</h5>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="https://www.ayearofboxes.com/wp-content/themes/ayearofboxes/assets/svg/box-closed.svg" alt="90gsm">
</div>
<div class="product-info">
<h5>box2</h5>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="https://www.ayearofboxes.com/wp-content/themes/ayearofboxes/assets/svg/box-closed.svg" alt="90gsm">
</div>
<div class="product-info">
<h5>box3</h5>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="https://www.ayearofboxes.com/wp-content/themes/ayearofboxes/assets/svg/box-closed.svg" alt="90gsm">
</div>
<div class="product-info">
<h5>box4</h5>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="https://www.ayearofboxes.com/wp-content/themes/ayearofboxes/assets/svg/box-closed.svg" alt="90gsm">
</div>
<div class="product-info">
<h5>box5</h5>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="https://www.ayearofboxes.com/wp-content/themes/ayearofboxes/assets/svg/box-closed.svg" alt="90gsm">
</div>
<div class="product-info">
<h5>box6</h5>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="https://www.ayearofboxes.com/wp-content/themes/ayearofboxes/assets/svg/box-closed.svg" alt="90gsm">
</div>
<div class="product-info">
<h5>box7</h5>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="https://www.ayearofboxes.com/wp-content/themes/ayearofboxes/assets/svg/box-closed.svg" alt="90gsm">
</div>
<div class="product-info">
<h5>box8</h5>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="https://www.ayearofboxes.com/wp-content/themes/ayearofboxes/assets/svg/box-closed.svg" alt="90gsm">
</div>
<div class="product-info">
<h5>box9</h5>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="https://www.ayearofboxes.com/wp-content/themes/ayearofboxes/assets/svg/box-closed.svg" alt="90gsm">
</div>
<div class="product-info">
<h5>box10</h5>
</div>
</div>
</section>
</div>

If you use position absolute on each of the sections you will be able to use left:0 and right:0. See below and hope that helps.
.nav {
max-width: 853px;
margin: 0 auto;
width: 200px;
position: absolute;
left: 0;
z-index:2;
}
section.products {
width: calc(100% - 200px);
position: absolute;
right: 0;
z-index: 1;
}

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>

Why scroll-y doesn't show up?

I want to be able to scroll vertically in the .contacts-wrapper area, but the scroll bar doesn't show up. I tried different solutions to the problem, but nothing worked out. Can someone please help me?
HTML:
<div class="right-side">
<div class="sponsorship">
<p class="sponsored">Спонсорирано</p>
<div class="sponsor">
<img src="../imgs/coke.jpg" alt="">
<div class="info">
<p class="main">Купи Кока Кола в Маркет Церовище (евтинко)</p>
coca-cola.com
</div>
</div>
<div class="sponsor">
<img src="../imgs/audi.jpg" alt="">
<div class="info">
<p class="main">Новото Ауди на изгодна цена (чипосано, да са знай)</p>
audi.com
</div>
</div>
</div>
<div class="contacts-wrapper">
<div class="tools-wrapper">
<p>Контакти</p>
<div class="tools">
<i class="fas fa-video"></i>
<i class="fas fa-search"></i>
<i class="fas fa-ellipsis-h"></i>
</div>
</div>
<div class="contacts">
<div class="person">
<img src="../imgs/guy1.jpg" alt="">
<p>Aishe Buzgova</p>
</div>
<div class="person">
<img src="../imgs/guy1.jpg" alt="">
<p>Aishe Buzgova</p>
</div>
<div class="person">
<img src="../imgs/guy1.jpg" alt="">
<p>Aishe Buzgova</p>
</div>
<div class="person">
<img src="../imgs/guy1.jpg" alt="">
<p>Aishe Buzgova</p>
</div>
<div class="person">
<img src="../imgs/guy1.jpg" alt="">
<p>Aishe Buzgova</p>
</div>
<div class="person">
<img src="../imgs/guy1.jpg" alt="">
<p>Aishe Buzgova</p>
</div>
<div class="person">
<img src="../imgs/guy1.jpg" alt="">
<p>Aishe Buzgova</p>
</div>
<div class="person">
<img src="../imgs/guy1.jpg" alt="">
<p>Aishe Buzgova</p>
</div>
<div class="person">
<img src="../imgs/guy1.jpg" alt="">
<p>Aishe Buzgova</p>
</div>
<div class="person">
<img src="../imgs/guy1.jpg" alt="">
<p>Aishe Buzgova</p>
</div>
<div class="person">
<img src="../imgs/guy1.jpg" alt="">
<p>Aishe Buzgova</p>
</div>
<div class="person">
<img src="../imgs/guy1.jpg" alt="">
<p>Aishe Buzgova</p>
</div>
<div class="person">
<img src="../imgs/guy1.jpg" alt="">
<p>Aishe Buzgova</p>
</div>
<div class="person">
<img src="../imgs/guy1.jpg" alt="">
<p>Aishe Buzgova</p>
</div>
<div class="person">
<img src="../imgs/guy1.jpg" alt="">
<p>Aishe Buzgova</p>
</div>
</div>
</div>
</div>
CSS:
.right-side {
position: fixed;
right: 0;
top: 10vh;
z-index: 1;
height: 90vh;
width: 20%;
background-color: #f0f2f5;
}
.sponsor {
height: 20vh;
padding: 1em;
display: flex;
align-items: center;
border-radius: 10px;
cursor: pointer;
}
.sponsor:hover {
background-color: #d8dadf;
}
.sponsor img {
width: 50%;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: 10px;
}
.info {
width: 50%;
padding: 1em;
}
.main {
font-size: 1.2rem;
font-weight: 600;
margin: 0 0 10px;
}
.website {
text-decoration: none;
font-size: 1.2rem;
color: #7c7f82;
}
.sponsored {
font-size: 1.8rem;
margin: 1em 0 1em 1em;
color: #75767b;
font-weight: 600;
}
.contacts-wrapper {
width: 100%;
}
.tools-wrapper {
display: flex;
justify-content: space-between;
padding: 1.5em 1em;
border-top: 1px solid #ced0d4;
}
.tools-wrapper p {
font-size: 1.6rem;
color: #65676b;
font-weight: 600;
}
.tools {
width: 30%;
display: flex;
justify-content: space-between;
}
.tools i {
font-size: 1.6rem;
color: #606770;
}
.contacts {
width: 100%;
}
.person {
padding: 0.5em 1em;
width: 100%;
display: flex;
align-items: center;
}
.person img {
height: 5vh;
width: 5vh;
object-fit: cover;
object-position: center;
border-radius: 50%;
margin: 0 10px 0 0;
}
.person p {
font-size: 1.4rem;
}

Just swap these classes in. I think this is what you want
.right-side {
position: absolute;
right: 0;
top: 10vh;
z-index: 1;
height: 90vh;
width: 20%;
background-color: #f0f2f5;
overflow: hidden; // <-- remove this if you want the full sidebar to be scrollable
}
.contacts-wrapper {
width: 100%;
height: 100%;
overflow: auto;
}

Can't get buttons in the nav bar over the image, can't get logo over the image

I am trying to get three href links in the class nav-link-wrapper and class logo which is also a logo image over the class mainImage here is my CSS code , all the links and logo is below the image instead of on it at the top of the image , links on the to top left and logo on the top right
.nav-wrapper {
display: flex;
justify-content: space-between;
padding: 30px;
}
.left-side {
display: flex;
}
.mainImage {
position: relative;
width: 100%;
height: 60%;
}
.logo {
position: absolute;
top: 10px;
right: 10px;
position: relative;
}
.container>.nav-wrapper>.left-side>.nav-link-wrapper {
margin-right: 20px;
font-size: 0.9em;
justify-content: space-around;
}
<div class="container">
<img class="mainImage" src="https://via.placeholder.com/800" alt="Auckland, New Zealand" style="width:100%;height:60%;">
<div class="nav-wrapper">
<div class="left-side">
<div class="nav-link-wrapper">
Hlavní Stránka
</div>
<div class="nav-link-wrapper">
Naše Projekty
</div>
<div class="nav-link-wrapper">
Náš Kontakt
</div>
</div>
<div class="right-side">
<div class="logo">
<img src="https://via.placeholder.com/150" alt="investice do zahraničí" style="width: 150px;height: 150px;">
</div>
</div>
</div>
</div>

.container {
position: relative;
}
.nav-wrapper {
position: absolute;
top: 0;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%
}
.left-side {
display: flex
}
.nav-link-wrapper {
padding: 10px
}
.right-side {
border: 1px solid black
}
<div class="container">
<img class="mainImage" src="https://via.placeholder.com/800" alt="Auckland, New Zealand" style="width:100%;height:60%;">
<div class="nav-wrapper">
<div class="left-side">
<div class="nav-link-wrapper">
Hlavní Stránka
</div>
<div class="nav-link-wrapper">
Naše Projekty
</div>
<div class="nav-link-wrapper">
Náš Kontakt
</div>
</div>
<div class="right-side">
<div class="logo">
<img src="https://via.placeholder.com/150" alt="investice do zahraničí" style="width: 150px;height: 150px;">
</div>
</div>
</div>
</div>

Make grid elements take the whole grid

I am making a grid with cards:
/* #84a5a9 */
body {
font-family: 'Roboto' !important;
}
.navbar-brand,
.footer-text,
.page-link,
.form-input>label,
.checkbox {
color: #84a5a9 !important;
}
.wishes {
padding: 5px;
background: rgba(229, 229, 229, 0.4);
}
.wishes>span {
font-family: 'Roboto';
font-style: normal;
font-weight: bold;
font-size: 18px;
line-height: 21px !important;
/* identical to box height */
color: #84A5A9;
}
.container {
color: #84A5A9 !important;
}
.front-text {
font-family: 'Roboto';
font-style: normal;
font-weight: normal;
font-size: 32px;
line-height: 37px;
display: flex;
align-items: center;
text-align: center;
color: #84A5A9;
}
#media only screen and (max-width: 760px) {
.img {
height: 100px !important;
width: 100px !important;
}
.caption {
top: 30% !important;
}
.front-text {
font-size: 15px !important;
color: #84A5A9;
}
.bgimg-1 {
height: 700px !important;
}
.nav-title,
.wishes>span {
font-size: 14px !important;
}
.nav-logo {
height: 50px !important;
width: 50px !important;
}
.mobile {
padding: 0px 0px 0px 1px !important;
}
.form-input {
display: inline-grid !important;
}
.form-input>label,
input {
width: 100% !important;
}
.navbar-brand,
.footer-text {
font-size: 14px !important;
}
.footer-text {
width: 26% !important;
}
.footer-nav {
width: 40% !important;
}
}
.nav-logo {
height: 60px;
width: 60px;
}
.img {
height: 220px;
width: 220px;
}
.grid {
margin: 10px 20px 85px 20px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 20px;
align-items: stretch;
}
.grid-item:last-child {
grid-column: 1 / -1;
}
li:focus,
input:focus {
outline: none;
}
.grid img {
border: 1px solid #ccc;
max-width: 100%;
max-height: 162px;
}
.card {
max-height: 334px;
}
.card:hover {
cursor: pointer;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.card-inactive:hover {
cursor: pointer;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.card-inactive {
max-height: 334px;
filter: grayscale(90%);
border: 1px solid #ccc;
}
/*konteineriu issidestymas ekrane*/
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-column-gap: 50px;
grid-row-gap: 50px;
padding-left: 50px;
padding-top: 50px;
}
#keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
/*Naudojama submmito formos stulpeliams*/
label {
width: 150px;
padding-right: 20px;
display: inline-block;
}
.modal {
height: auto !important;
padding: 0 !important;
max-width: 800px!important;
max-height: 700px!important;
overflow-y: auto!important;
}
.container {
padding: 2px 16px;
}
.page-item.active .page-link {
z-index: 0 !important;
}
/* ----- NAVBAR ----- */
nav {
padding: 0px 5px 0px 20px !important;
position: fixed !important;
top: 0 !important;
width: 100% !important;
z-index: 1 !important;
}
nav .submit-button {
padding: 5px 10px;
margin: 5px;
}
/* ------- FOOTER ----- */
footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
}
.navbar {
padding-top: 0;
padding-bottom: 0;
}
/* -------- ICONS ------ */
.fa-instagram {
background: #125688;
color: white;
}
.fa {
padding: 10px;
font-size: 15px !important;
text-align: center;
text-decoration: none;
margin: 5px 2px;
border-radius: 50%;
width: 35px;
height: 35px;
}
.fa:hover {
opacity: 0.7;
}
.fa-facebook {
background: #3B5998;
color: white;
}
/* PARALLAX */
.front-sd {
position: fixed;
left: 24.65%;
right: 50%;
top: 15.82%;
bottom: 43.75%;
}
.front-logo {
position: fixed;
left: 50%;
right: 19.1%;
top: 15.82%;
bottom: 43.75%;
background: url('../images/logo.png');
}
.bgimg-1 {
background: url('../images/clouds.png');
min-height: 100%;
height: 1024px;
}
.front-text {
font-size: 20px;
width: 50%;
height: auto;
margin: 0 auto;
padding: 10px;
position: relative;
}
.bgimg-1,
.bgimg-2,
.bgimg-3 {
position: relative;
/* opacity: 0.65; */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.caption {
position: absolute;
left: 0;
top: 18%;
width: 100%;
text-align: center;
color: #000;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel=icon href=images/100sd.png type="image/png">
<link rel="stylesheet" href="css/style.css?v=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div>
<nav class="mobile navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="images/100sd.png" class="nav-logo d-inline-block align-middle" alt="">
<span class="nav-title">title</span>
</a>
<div class="wishes"><span>Done: 7</span></div>
<ul class="menu">
</ul>
</nav>
<script>
</script>
<div class="bgimg-1">
<div class="caption">
<div>
<img src="images/100sd.png" class="img d-inline-block align-middle" alt="">
<img src="images/logo.png" class="img d-inline-block align-middle" alt="">
</div>
<div class="front-text">
<span>
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
</span>
</div>
</div>
</div>
<div class="grid">
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Aleksandra, 22</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Vlad, 45</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Alex, 77</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Aleksandra, 22</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Vlad, 45</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Alex, 77</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Aleksandra, 22</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Tomas, 109</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Vlad, 45</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Alex, 77</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Aleksandra, 22</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Tomas, 109</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<ul class="pagination" id="pagination">
<li class="page-item active"><a class="page-link" href=" ?pageNr=1">1</a></li>
<li class="page-item"><a class="page-link" href=" ?pageNr=2">2</a></li>
<li class="page-item"><a class="page-link" href=" ?pageNr=3">3</a></li>
</ul>
</div>
</div>
<footer>
</footer>
</div>
</body>
</html>
since I have paging I want my elements take the whole grid so it wouldn't look like it's the end of data though there are next page. However on certain sizes it doesn't take the whole grid and looks like:
I tried using auto-fill and auto-fit but I am clearly doing something wrong here. Coul anyone help?

Set the min value of your minmax to 400px:
/* #84a5a9 */
body {
font-family: 'Roboto' !important;
}
.container {
color: #84A5A9 !important;
}
.img {
height: 220px;
width: 220px;
}
.grid {
margin: 10px 20px 85px 20px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
grid-gap: 20px;
align-items: stretch;
}
.grid img {
border: 1px solid #ccc;
max-width: 100%;
max-height: 162px;
}
.grid-item:last-child {
grid-column: 1 / -1;
}
.card {
max-height: 334px;
}
.card:hover {
cursor: pointer;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
/*konteineriu issidestymas ekrane*/
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-column-gap: 50px;
grid-row-gap: 50px;
padding-left: 50px;
padding-top: 50px;
}
/*Naudojama submmito formos stulpeliams*/
.container {
padding: 2px 16px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="grid">
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Aleksandra, 22</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Vlad, 45</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Alex, 77</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Aleksandra, 22</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Vlad, 45</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Alex, 77</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Aleksandra, 22</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Tomas, 109</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Vlad, 45</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Alex, 77</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Aleksandra, 22</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<div class="card">
<a><img src="https://www.publicdomainpictures.net/en/view-image.php?image=316756&picture=background-image" style="width:100%"></a>
<div class="container">
<h4>Tomas, 109</h4>
<p>slepetes</p>
</div>
</div>
</div>
<div class="grid-item">
<ul class="pagination" id="pagination">
<li class="page-item active"><a class="page-link" href=" ?pageNr=1">1</a></li>
<li class="page-item"><a class="page-link" href=" ?pageNr=2">2</a></li>
<li class="page-item"><a class="page-link" href=" ?pageNr=3">3</a></li>
</ul>
</div>
</div>
It still breaks at about 2200px but it depends on your use case as to whether that's an issue.
You can always set a max-width to prevent this:
.grid {
max-width: 1900px // Or whatever
}

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; }

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

Getting the right navigation and main left (without using float) - html

Related

Horizontal product card div slider not working

Why scroll-y doesn't show up?

Can't get buttons in the nav bar over the image, can't get logo over the image

Make grid elements take the whole grid

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

Categories

Resources