i have come across a problem that i cant seem to solve,
on my 23" monitor the page shows the content, how ever on my laptop screen 14" it does not show all the content, i can scroll a bit but not all the way to see the res of the page, any thugs?
body {
font-family: Arial, Verdana, sans-serif;
background-color: #141414;
color: #fff;
font-size: 90%;
margin: 0px;
padding: 0px;
}
img#logo {
width: 250px;
position: relative;
bottom: 0px;
left: 10px;
border: none;
}
div#nav {
background-color: rgba(7, 7, 7, 0.7);
box-shadow: 0px 3px 10px #000;
height: 70px;
position: fixed;
top: 0px;
left: 0px;
padding: 10px;
margin: 0px;
width: 100%;
}
div#division {
margin-top: 120px;
}
.octo {
position: fixed;
right: 0px;
width: 100%;
height: 100%;
margin-bottom: 100px;
}
.wraper {
margin: 10px auto 10px auto;
width: 1200px;
padding-left: 100px;
}
.poster {
display: inline-block;
width: 273px;
}
figure {
background-color: rgba(106, 192, 69, 0.7);
border-radius: 5px;
padding-left: 3px;
}
img {
}
figcaption {
font-weight: bold;
padding-left: 5px;
}
figure:hover {
background-color: #1ba6e0;
border-radius: 5px;
}
<!DOCTYPE html>
<html>
<head>
<title>Rewind HD</title>
<link rel="stylesheet" type="text/css" href="CSS/rewind hd.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="nav">
<img id="logo" src="images/REWIND HD web.png">
</div>
<div id="division"></div>
<div class="wraper">
<div class="poster">
<figure>
<figcaption>James Bond<br /> Octopussy</figcaption>
<img src="images/octopussy.jpg">
</figure>
</div>
<div class="poster">
<figure>
<figcaption>James Bond<br /> A View To A Kill</figcaption>
<img src="images/JBAVTK.jpg">
</figure>
</div>
<div class="poster">
<figure>
<figcaption>James Bond<br /> For Your Eyes Only</figcaption>
<img src="images/James Bond For Your Eyes Only.jpg">
</figure>
</div>
<div class="poster">
<figure>
<figcaption>James Bond<br /> Licence To Kill</figcaption>
<img src="images/James Bond Licence To Kill.jpg">
</figure>
</div>
<div class="poster">
<figure>
<figcaption>James Bond<br /> Moonraker</figcaption>
<img src="images/James Bond Moonraker.jpg">
</figure>
</div>
<div class="poster">
<figure>
<figcaption>James Bond<br /> Never Say Never Again</figcaption>
<img src="images/James Bond Never Say Never Again.jpg">
</figure>
</div>
<div class="poster">
<figure>
<figcaption>James Bond<br /> Majestys Secret Service</figcaption>
<img src="images/James Bond On Her Majestys Secret Service.jpg">
</figure>
</div>
<div class="poster">
<figure>
<figcaption>James Bond<br /> The Living Daylights</figcaption>
<img src="images/James Bond The Living Daylights.jpg">
</figure>
</div>
<div class="poster">
<figure>
<figcaption>James Bond<br /> The Spy Who Loved</figcaption>
<img src="images/James Bond The Spy Who Loved.jpg">
</figure>
</div>
<div class="poster">
<figure>
<figcaption>ames Bond<br /> Licence To Kill</figcaption>
<img src="images/James Bond Licence To Kill.jpg">
</figure>
</div>
<div class="poster">
<figure>
<figcaption>James Bond<br /> Moonraker</figcaption>
<img src="images/James Bond Moonraker.jpg">
</figure>
</div>
<div class="poster">
<figure>
<figcaption>James Bond<br /> Never Say Never Again</figcaption>
<img src="images/James Bond Never Say Never Again.jpg" class="background_color">
</figure>
</div>
<div class="poster">
<figure>
<figcaption>ames Bond<br /> Licence To Kill</figcaption>
<img src="images/James Bond Licence To Kill.jpg">
</figure>
</div>
<div class="poster">
<figure>
<figcaption>James Bond<br /> Moonraker</figcaption>
<img src="images/James Bond Moonraker.jpg">
</figure>
</div>
<div class="poster">
<figure>
<figcaption>James Bond<br /> Never Say Never Again</figcaption>
<a href="James Bond Never Say Never Again.html"><img src="images/James Bond Never Say Never Again.jpg"
</figure>
</div>
</div>
</body>
</html>
***strong text***
I think you want something like this:
first, change width of wrapper to 85% for have fluid wrapper.
then add float:left to .poster class.
the code is here ( you have a little responsive page):
<!DOCTYPE html>
<html>
<head>
<title>Rewind HD</title>
<link rel="stylesheet" type="text/css" href="CSS/rewind hd.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial, Verdana, sans-serif;
background-color: #141414;
color: #fff;
font-size: 90%;
margin: 0px;
padding: 0px;
}
img#logo {
width: 250px;
position: relative;
bottom: 0px;
left: 10px;
border: none;
}
div#nav {
background-color: rgba(7, 7, 7, 0.7);
box-shadow: 0px 3px 10px #000;
height: 70px;
position: fixed;
top: 0px;
left: 0px;
padding: 10px;
margin: 0px;
width: 100%;
}
div#division {
margin-top: 120px;
}
.octo {
position: fixed;
right: 0px;
width: 100%;
height: 100%;
margin-bottom: 100px;
}
.wraper {
margin: 10px auto 10px auto;
width: 85%;
padding-left: 100px;
}
.poster {
display: inline-block;
width: 273px;
float:left;
}
figure {
background-color: rgba(106, 192, 69, 0.7);
border-radius: 5px;
padding-left: 3px;
}
img {
}
figcaption {
font-weight: bold;
padding-left: 5px;
}
figure:hover {
background-color: #1ba6e0;
border-radius: 5px;
}
</style>
</head>
<body>
<div id="nav">
<img id="logo" src="images/REWIND HD web.png">
</div>
<div id="division"></div>
<div class="wraper">
<div class="poster">
<figure>
<figcaption>James Bond<br /> Octopussy</figcaption>
<img src="images/octopussy.jpg">
</figure>
</div>
<div class="poster">
<figure>
<figcaption>James Bond<br /> A View To A Kill</figcaption>
<img src="images/JBAVTK.jpg">
</figure>
</div>
<div class="poster">
<figure>
<figcaption>James Bond<br /> For Your Eyes Only</figcaption>
<img src="images/James Bond For Your Eyes Only.jpg">
</figure>
</div>
<div class="poster">
<figure>
<figcaption>James Bond<br /> Licence To Kill</figcaption>
<img src="images/James Bond Licence To Kill.jpg">
</figure>
</div>
<div class="poster">
<figure>
<figcaption>James Bond<br /> Moonraker</figcaption>
<img src="images/James Bond Moonraker.jpg">
</figure>
</div>
<div class="poster">
<figure>
<figcaption>James Bond<br /> Never Say Never Again</figcaption>
<img src="images/James Bond Never Say Never Again.jpg">
</figure>
</div>
<div class="poster">
<figure>
<figcaption>James Bond<br /> Majestys Secret Service</figcaption>
<img src="images/James Bond On Her Majestys Secret Service.jpg">
</figure>
</div>
<div class="poster">
<figure>
<figcaption>James Bond<br /> The Living Daylights</figcaption>
<img src="images/James Bond The Living Daylights.jpg">
</figure>
</div>
<div class="poster">
<figure>
<figcaption>James Bond<br /> The Spy Who Loved</figcaption>
<img src="images/James Bond The Spy Who Loved.jpg">
</figure>
</div>
<div class="poster">
<figure>
<figcaption>ames Bond<br /> Licence To Kill</figcaption>
<img src="images/James Bond Licence To Kill.jpg">
</figure>
</div>
<div class="poster">
<figure>
<figcaption>James Bond<br /> Moonraker</figcaption>
<img src="images/James Bond Moonraker.jpg">
</figure>
</div>
<div class="poster">
<figure>
<figcaption>James Bond<br /> Never Say Never Again</figcaption>
<img src="images/James Bond Never Say Never Again.jpg" class="background_color">
</figure>
</div>
<div class="poster">
<figure>
<figcaption>ames Bond<br /> Licence To Kill</figcaption>
<img src="images/James Bond Licence To Kill.jpg">
</figure>
</div>
<div class="poster">
<figure>
<figcaption>James Bond<br /> Moonraker</figcaption>
<img src="images/James Bond Moonraker.jpg">
</figure>
</div>
<div class="poster">
<figure>
<figcaption>James Bond<br /> Never Say Never Again</figcaption>
<a href="James Bond Never Say Never Again.html"><img src="images/James Bond Never Say Never Again.jpg"
</figure>
</div>
</div>
</body>
</html>
Related
Does anyone of you know how to create this gallery box and text (with the line) from the image?
Can you help me, please?
I want to learn how to create this gallery box and add a magnifier icon when I hover over the image.
I also want to open the image when I click on it, in full size if possible.
May you please help me with this?
Thank you all for trying to help me, I did this, and it's working. Although I didn't add a magnifier icon on hover.
<div id="portfolio">
<div class="container-fluid w-75">
<div class="row">
<h3 style="color: #bb9754;"> Spoljašnost zgrade </h3>
<hr style="background-color: #bb9754;">
<div class="col-lg-2 col-md-4 col-6 my-3">
<a class="portfolio-box" href="assets/img/portfolio/fullsize/1.jpg" title="Project Name">
<img class="img-fluid" src="https://via.placeholder.com/200x200" alt="..." />
</a>
</div>
</div>
</div>
</div>
Hope this helps:
.container {
width: "80vw";
margin: "0 auto";
}
.heading {
display: flex;
align-items: center;
}
.text {
flex-basis: 15%;
}
.divider {
content: "";
height: 4px;
background: #000;
width: 100%;
}
.gallery {
display: flex;
flex-wrap: wrap;
}
.gallery img {
height: 100px;
max-width: 100px;
margin: 20px;
}
<div class="container">
<div class="heading">
<div class="text">
TEXT
</div>
<div class="divider"></div>
</div>
<div class="gallery">
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
<img src="https://via.placeholder.com/350x150" alt="" />
</div>
</div>
#title{
font-size:20px;
color:#A5A195;
display:flex;
justify-content:center;
}
#item{
display:flex;
flex-flow:row wrap;
}
.img{
width:150px;
border-radius:15px;
margin-right: 50px;
margin-top: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
</head>
<body>
<div id="title">
SPOLJASNJOST ZGRADE
</div>
<hr>
<div id="item">
<img class="img" src="https://via.placeholder.com/350x300">
<img class="img" src="https://via.placeholder.com/350x300">
<img class="img" src="https://via.placeholder.com/350x300">
<img class="img" src="https://via.placeholder.com/350x300">
<img class="img" src="https://via.placeholder.com/350x300">
<img class="img" src="https://via.placeholder.com/350x300">
<img class="img" src="https://via.placeholder.com/350x300">
</div>
</body>
</html>
I am trying to push a div with images underneath a couple of arrow icons, that do not take up a whole row, as seen below. However, the images underneath keep wrapping in between the arrows, which is not the desired result. I was wondering if someone can please advise how to fix this? The example I inserted only works in narrower viewports because I pulled it from my mobile site I am working on. I am confused why two separate divs are overlapping in this way. Thanks in advance.
#photo-viewer-outer-wrap div {
display: inline;
}
#photo-viewer-inner-wrap-left img {
max-width: 100%;
}
#photo-viewer-inner-wrap-right {
display: flex;
overflow-y: scroll;
max-height: 300px;
clear: both;
}
#photo-viewer-inner-wrap-right img {
max-width: 30%;
}
#left-arrow {
float: left;
width: 30px;
margin-left: 10px;
}
#right-arrow {
float: right;
width: 30px;
margin-right: 10px;
}
<div id="photo-viewer-outer-wrap">
<div id="photo-viewer-inner-wrap-left">
<img src="https://www.russorizio.com/wp-content/uploads/2016/07/ef3-placeholder-image.jpg" />
<img src="https://www.iconpacks.net/icons/2/free-arrow-right-icon-2817-thumb.png" id="right-arrow" title="Next image" alt="next image" />
<img src="https://static.vecteezy.com/system/resources/thumbnails/000/365/868/small/Basic_Elements__28113_29.jpg" id="left-arrow" title="Previous image" alt="previous image" />
</div>
<div id="photo-viewer-inner-wrap-right">
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
</div>
</div>
I used flex for you. No need to float and display: inline:
#photo-viewer-inner-wrap-left {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#photo-viewer-inner-wrap-left img:first-child {
width: 100%;
}
#left-arrow {
width: 30px;
height: 30px;
margin: 20px 0 20px 10px;
}
#right-arrow {
width: 30px;
height: 30px;
margin: 20px 10px 20px 0;
}
#photo-viewer-inner-wrap-right {
display: flex;
flex-wrap: wrap;
overflow-y: scroll;
max-height: 300px;
}
#photo-viewer-inner-wrap-right img {
width: 33.33%;
}
<div id="photo-viewer-outer-wrap">
<div id="photo-viewer-inner-wrap-left">
<img src="https://s4.uupload.ir/files/7560b48482bfae5c-02b97ffc647f-3822363654_tji3.jpg" />
<img src="https://static.vecteezy.com/system/resources/thumbnails/000/365/868/small/Basic_Elements__28113_29.jpg" id="left-arrow" title="Previous image" alt="previous image" />
<img src="https://www.iconpacks.net/icons/2/free-arrow-right-icon-2817-thumb.png" id="right-arrow" title="Next image" alt="next image" />
</div>
<div id="photo-viewer-inner-wrap-right">
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
<img src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" />
</div>
</div>
you are using display inline property in a div which force div to take as much as space it needs and allows another div to join it. check these for learning display properties link2
check this also
#photo-viewer-outer-wrap div {
display: block;
}
#photo-viewer-inner-wrap-left img {
max-width: 100%;
}
#photo-viewer-inner-wrap-right {
display: flex;
overflow-y: scroll;
max-height: 300px;
clear: both;
}
#photo-viewer-inner-wrap-right img {
max-width: 30%;
}
#left-arrow {
float: left;
width: 30px;
margin-left: 10px;
}
#right-arrow {
float: right;
width: 30px;
margin-right: 10px;
}
<div id="photo-viewer-outer-wrap">
<div id="photo-viewer-inner-wrap-left">
<img src="https://www.russorizio.com/wp-content/uploads/2016/07/ef3-placeholder-image.jpg" />
<img src="https://www.iconpacks.net/icons/2/free-arrow-right-icon-2817-thumb.png" id="right-arrow" title="Next image" alt="next image" />
<img src="https://static.vecteezy.com/system/resources/thumbnails/000/365/868/small/Basic_Elements__28113_29.jpg" id="left-arrow" title="Previous image" alt="previous image" />
</div>
<div id="photo-viewer-inner-wrap-right">
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
<img src="https://buildyourspechere.com/wp-content/uploads/2020/10/placeholder-image-person-jpg.jpg" />
</div>
</div>
I'm trying to have 3 figures side by side, each containing an image (that has a link in it), and a caption that's centered on the top of the image.
So far, I've got this:
figure {
display: table;
width: 50%;
margin:0;
}
figcaption {
display: table-caption;
caption-side: top;
}
#content {
max-width: 80%;
height: 80%;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: auto;
text-align: center;
}
<div id="content" class="center">
<div>
<figure style="float:left;">
<a href="#">
<img src="https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=445&quality=45&auto=format&fit=max&dpr=2&s=42132184edabf489cb379824f3da6f61" loading="lazy" alt="cat" width="30%">
</a>
<figcaption style="text-align:center">Cute cat </figcaption>
</figure>
<figure>
<a href="#">
<img src="https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=445&quality=45&auto=format&fit=max&dpr=2&s=42132184edabf489cb379824f3da6f61" loading="lazy" alt="cat 2" width="30%">
</a>
<figcaption style="text-align:center">Cute cat 2 </figcaption>
</figure>
</div>
</div>
But when I try to add a third (or fourth, for that matter) image, the whole thing malfunctions.
I've tried using style="float:right; on the third image, which leads to it being below the other 2 figures on another line(of course, after reducing the width of figure first).
Essentially what I want the end result to be is to be able to put any number of images (3 and 4 for my use, but generalizing the solution will help people with the same problem) side by side, while each image has some text over it (hence the figure and figcaption CSS rules, which display the figcaption above the picture)
.flex{display: flex;}
figure {
display: table;
width: 50%;
margin:0;
}
figcaption {
display: table-caption;
caption-side: top;
}
#content {
max-width: 80%;
height: 80%;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: auto;
text-align: center;
}
<div id="content" class="center">
<div class="flex">
<figure >
<a href="#">
<img src="https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=445&quality=45&auto=format&fit=max&dpr=2&s=42132184edabf489cb379824f3da6f61" loading="lazy" alt="cat" width="30%">
</a>
<figcaption style="text-align:center">Cute cat </figcaption>
</figure>
<figure >
<a href="#">
<img src="https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=445&quality=45&auto=format&fit=max&dpr=2&s=42132184edabf489cb379824f3da6f61" loading="lazy" alt="cat" width="30%">
</a>
<figcaption style="text-align:center">Cute cat </figcaption>
</figure>
<figure >
<a href="#">
<img src="https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=445&quality=45&auto=format&fit=max&dpr=2&s=42132184edabf489cb379824f3da6f61" loading="lazy" alt="cat" width="30%">
</a>
<figcaption style="text-align:center">Cute cat </figcaption>
</figure>
<figure >
<a href="#">
<img src="https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=445&quality=45&auto=format&fit=max&dpr=2&s=42132184edabf489cb379824f3da6f61" loading="lazy" alt="cat" width="30%">
</a>
<figcaption style="text-align:center">Cute cat </figcaption>
</figure>
<figure>
<a href="#">
<img src="https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=445&quality=45&auto=format&fit=max&dpr=2&s=42132184edabf489cb379824f3da6f61" loading="lazy" alt="cat 2" width="30%">
</a>
<figcaption style="text-align:center">Cute cat 2 </figcaption>
</figure>
</div>
</div>
For 3-4 image you can provide width to the element. But you can show a defined number of images using width. To show n number of image you can show as table and use css property overflaw:scroll.
figure {
display: table;
width: 50%;
margin:0;
}
figcaption {
display: table-caption;
caption-side: top;
}
#content {
max-width: 80%;
height: 80%;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: auto;
text-align: center;
}
<div id="content" class="center">
<div>
<figure style="float:left; width:25%">
<a href="#">
<img src="https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=445&quality=45&auto=format&fit=max&dpr=2&s=42132184edabf489cb379824f3da6f61" loading="lazy" alt="cat" width="30%">
</a>
<figcaption style="text-align:center">Cute cat </figcaption>
</figure>
<figure style="float:left; width:25%">
<a href="#">
<img src="https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=445&quality=45&auto=format&fit=max&dpr=2&s=42132184edabf489cb379824f3da6f61" loading="lazy" alt="cat 2" width="30%">
</a>
<figcaption style="text-align:center">Cute cat 2 </figcaption>
</figure>
<figure style="float:left; width:25%">
<a href="#">
<img src="https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=445&quality=45&auto=format&fit=max&dpr=2&s=42132184edabf489cb379824f3da6f61" loading="lazy" alt="cat" width="30%">
</a>
<figcaption style="text-align:center">Cute cat </figcaption>
</figure>
<figure style="float:left; width:25%">
<a href="#">
<img src="https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=445&quality=45&auto=format&fit=max&dpr=2&s=42132184edabf489cb379824f3da6f61" loading="lazy" alt="cat 2" width="30%">
</a>
<figcaption style="text-align:center">Cute cat 2 </figcaption>
</figure>
</div>
</div>
firstly remove float and use display: flex;, it is very useful and highly recommended one.
and change the code to like this
#container {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.item {
width: 20%;
display: block;
align-items: center;
justify-content: center;
border: 1px solid;
}
.link {
text-decoration: none;
color: #000;
}
.image-container {
display: inline-block;
width: 100%;
}
.caption {
text-align: center;
}
<div id="container">
<div class="item">
<a href="#" class="link">
<h3 class="caption">Cute cat </h3>
<img src="https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=445&quality=45&auto=format&fit=max&dpr=2&s=42132184edabf489cb379824f3da6f61" loading="lazy" alt="cat" class="image-container">
</a>
</div>
<div class="item">
<a href="#" class="link">
<h3 class="caption">Cute cat </h3>
<img src="https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=445&quality=45&auto=format&fit=max&dpr=2&s=42132184edabf489cb379824f3da6f61" loading="lazy" alt="cat" class="image-container">
</a>
</div>
<div class="item">
<a href="#" class="link">
<h3 class="caption">Cute cat </h3>
<img src="https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=445&quality=45&auto=format&fit=max&dpr=2&s=42132184edabf489cb379824f3da6f61" loading="lazy" alt="cat 2" class="image-container">
</a>
</div>
</div>
I have boxes which size is 33.33% that is why 3 boxes are making 100% totaly.when I added fourth div and my 4th div is slipping whenever I putted .clearfix my problem is over..but I want to put clearfix every each 3rd div
thanks.
ok.. #AndreiGheorghiu my codes;
.ref-box {
position: relative;
width: 30%;
float: left;
margin: 10px 3.3% 10px 0;
}
.ref-item {
width: 100%;
position: absolute;
bottom: 0;
padding: 7px;
color: #FFFFFF;
background: rgba(242, 102, 81, .8);
}
.ref-box figure a img {
display: block;
max-height: 100%;
}
.ref-box:nth-child(3n+3):after {
content: "";
display: table;
clear: both;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="ref-box">
<figure>
<a href="works/Facebook/index.html" title="created html-css" target="_blank">
<img src="works/Facebook/thumbnail.jpg" height="451" width="500" alt="Facebook Clone" class="img-responsive">
</a>
</figure>
<div class="ref-item">
<span class="ref-head">Facebook Clone</span>
</div>
</div>
<!-- every ref item-->
copy this code more than one and see the result
.parent>.child:nth-child(3n) {
clear: both;
}
UPDATE, after question being completed:
Your clearfix is working fine. Here:
.ref-box {
position: relative;
width: 30%;
float: left;
margin: 10px 3.3% 10px 0;
}
.ref-item {
width: 100%;
position: absolute;
bottom: 0;
padding: 7px;
color: #FFFFFF;
background: rgba(242, 102, 81, .8);
}
.ref-box figure a img {
display: block;
max-height: 100%;
}
.ref-box:nth-child(3n+3):after {
content: "";
display: table;
clear: both;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="ref-box">
<figure>
<a href="works/Facebook/index.html" title="created html-css" target="_blank">
<img src="works/Facebook/thumbnail.jpg" height="451" width="500" alt="Facebook Clone" class="img-responsive">
</a>
</figure>
<div class="ref-item">
<span class="ref-head">Facebook Clone</span>
</div>
</div>
<div class="ref-box">
<figure>
<a href="works/Facebook/index.html" title="created html-css" target="_blank">
<img src="works/Facebook/thumbnail.jpg" height="451" width="500" alt="Facebook Clone" class="img-responsive">
</a>
</figure>
<div class="ref-item">
<span class="ref-head">Facebook Clone</span>
</div>
</div>
<div class="ref-box">
<figure>
<a href="works/Facebook/index.html" title="created html-css" target="_blank">
<img src="works/Facebook/thumbnail.jpg" height="451" width="500" alt="Facebook Clone" class="img-responsive">
</a>
</figure>
<div class="ref-item">
<span class="ref-head">Facebook Clone</span>
</div>
</div>
<div class="ref-box">
<figure>
<a href="works/Facebook/index.html" title="created html-css" target="_blank">
<img src="works/Facebook/thumbnail.jpg" height="451" width="500" alt="Facebook Clone" class="img-responsive">
</a>
</figure>
<div class="ref-item">
<span class="ref-head">Facebook Clone</span>
</div>
</div>
<div class="ref-box">
<figure>
<a href="works/Facebook/index.html" title="created html-css" target="_blank">
<img src="works/Facebook/thumbnail.jpg" height="451" width="500" alt="Facebook Clone" class="img-responsive">
</a>
</figure>
<div class="ref-item">
<span class="ref-head">Facebook Clone</span>
</div>
</div>
<div class="ref-box">
<figure>
<a href="works/Facebook/index.html" title="created html-css" target="_blank">
<img src="works/Facebook/thumbnail.jpg" height="451" width="500" alt="Facebook Clone" class="img-responsive">
</a>
</figure>
<div class="ref-item">
<span class="ref-head">Facebook Clone</span>
</div>
</div>
<div class="ref-box">
<figure>
<a href="works/Facebook/index.html" title="created html-css" target="_blank">
<img src="works/Facebook/thumbnail.jpg" height="451" width="500" alt="Facebook Clone" class="img-responsive">
</a>
</figure>
<div class="ref-item">
<span class="ref-head">Facebook Clone</span>
</div>
</div>
<!-- every ref item-->
Second update, after seeing the live page. Your problem is you are floating elements of uneven heights.
Updated again, after seeing the live example. Please not I added a custom class (.makeColumns) to your col-md-12 container. I also added this to CSS:
.makeColumns {
-webkit-columns: 300px 3;
-moz-columns: 300px 3;
columns: 300px 3;
}
h2 {
-webkit-column-span: all;
column-span: all;
}
You can see it working here:
.makeColumns {
-webkit-columns: 300px 3;
-moz-columns: 300px 3;
columns: 300px 3;
}
h2 {
-webkit-column-span: all;
column-span: all;
}
.ref-box {
position: relative;
margin: 10px 3.3% 10px 0;
}
.ref-item {
width: 100%;
position: absolute;
bottom: 0;
padding: 7px;
color: #FFFFFF;
background: rgba(242, 102, 81, .8);
}
.ref-box figure a img {
display: block;
max-height: 100%;
}
.ref-box:nth-child(3n+3):after {
content: "";
display: table;
clear: both;
}
<div class="section references" id="references">
<div class="row">
<div class="col-md-12 makeColumns">
<h2 class="head"><i class="fa fa-code"></i> References</h2>
<!-- <p>
This page will be designed soon. for now click here to see his references
</p>-->
<div class="ref-box">
<figure>
<a href="works/nartasarim/index.html" title="created with bootstrap" target="_blank">
<img src="http://cv.firatabak.com/works/nartasarim/thumbnail.jpg" alt="Nar Tasarım" class="img-responsive">
</a>
</figure>
<div class="ref-item">
<span class="ref-head">Nar Tasarım</span>
</div>
</div>
<!-- every ref item-->
<div class="ref-box">
<figure>
<a href="works/ElZero/index.html" title="created with bootstrap" target="_blank">
<img src="http://cv.firatabak.com/works/ElZero/thumbnail.jpg" alt="El Zero" class="img-responsive">
</a>
</figure>
<div class="ref-item">
<span class="ref-head">El Zero</span>
</div>
</div>
<!-- every ref item-->
<div class="ref-box">
<figure>
<a href="works/Singolo/index.html" title="created with bootstrap" target="_blank">
<img src="http://cv.firatabak.com/works/Singolo/thumbnail.jpg" alt="Singolo" class="img-responsive">
</a>
</figure>
<div class="ref-item">
<span class="ref-head">Singolo</span>
</div>
</div>
<!-- every ref item-->
<div class="ref-box">
<figure>
<a href="works/Facebook/index.html" title="created html-css" target="_blank">
<img src="http://cv.firatabak.com/works/Facebook/thumbnail.jpg" alt="Facebook Clone" class="img-responsive">
</a>
</figure>
<div class="ref-item">
<span class="ref-head">Facebook Clone</span>
</div>
</div>
<!-- every ref item-->
<div class="ref-box">
<figure>
<a href="works/nartasarim/index.html" title="created with bootstrap" target="_blank">
<img src="http://cv.firatabak.com/works/nartasarim/thumbnail.jpg" alt="Nar Tasarım" class="img-responsive">
</a>
</figure>
<div class="ref-item">
<span class="ref-head">Nar Tasarım</span>
</div>
</div>
<!-- every ref item-->
<div class="ref-box">
<figure>
<a href="works/nartasarim/index.html" title="created with bootstrap" target="_blank">
<img src="http://cv.firatabak.com/works/nartasarim/thumbnail.jpg" alt="Nar Tasarım" class="img-responsive">
</a>
</figure>
<div class="ref-item">
<span class="ref-head">Nar Tasarım</span>
</div>
</div>
<!-- every ref item-->
</div>
</div>
</div>
you can write css for that like given bellow
div:nth-child(3n+3) {
clear: both;
}
Alternatively, you can use overflow: hidden;
Sup guys. I can't make bew page with blocks to be in the same way as they are meant to be. I have problem with this high block, called "Bags". I tried flex-box, I tried float. Maybe someone can help me in placing everything in the way it was meant to be.
figcaption
{
position: absolute;
width: 100%;
height: 41px;
bottom: 0px;
padding-top: 13px;
padding-left: 20px;
font-size: 21.333px;
font-family: "SegoeUIBold";
opacity: 0.8;
background-color: #FFF;
}
figure
{
position: relative;
cursor: pointer;
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
<main>
<figure class="huge">
<img src="img/greenTshirt.png" alt="">
<figcaption>T-Shirts</figcaption>
</figure>
<figure class="normal">
<img src="img/cards.png" alt="">
<figcaption>Cards</figcaption>
</figure>
<figure class="normal">
<img src="img/pens.png" alt="">
<figcaption>Pens & Pencils</figcaption>
</figure>
<figure class="wide">
<img src="img/notebooks.png" alt="">
<figcaption>Notebooks</figcaption>
</figure>
<figure class="normal">
<img src="img/toys.png" alt="">
<figcaption>Toys</figcaption>
</figure>
<figure class="high">
<img src="img/bags.png" alt="">
<figcaption>Bags</figcaption>
</figure>
<figure class="normal">
<img src="img/scrum.png" alt="">
<figcaption>Scrum cards</figcaption>
</figure>
<figure class="normal">
<img src="img/magnets.png" alt="">
<figcaption>Magnets</figcaption>
</figure>
<figure class="big">
<img src="img/redCaps.png" alt="">
<figcaption>Caps</figcaption>
</figure>
<figure class="normal">
<img src="img/magnets.png" alt="">
<figcaption>Magnets</figcaption>
</figure>
<figure class="normal">
<img src="img/pens.png" alt="">
<figcaption>Pens & Pencils</figcaption>
</figure>
<figure class="normal">
<img src="img/toys.png" alt="">
<figcaption>Toys</figcaption>
</figure>
</main>
Images:
Model
Result
Try the code below instead the one you are trying.
CSS:
figcaption {
position: absolute;
width: 100%;
height: 41px;
bottom: 0px;
padding-top: 13px;
padding-left: 20px;
font-size: 21.333px;
font-family: "SegoeUIBold";
opacity: 0.8;
background-color: #FFF;
}
figure {
position: relative;
padding: 5em;
cursor: pointer;
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
HTML:
<main>
<figure>
<img src="img/greenTshirt.png" alt="">
<figcaption>T-Shirts</figcaption>
</figure>
<figure>
<img src="img/cards.png" alt="">
<figcaption>Cards</figcaption>
</figure>
<figure>
<img src="img/pens.png" alt="">
<figcaption>Pens & Pencils</figcaption>
</figure>
<figure>
<img src="img/notebooks.png" alt="">
<figcaption>Notebooks</figcaption>
</figure>
<figure>
<img src="img/toys.png" alt="">
<figcaption>Toys</figcaption>
</figure>
<figure>
<img src="img/bags.png" alt="">
<figcaption>Bags</figcaption>
</figure>
<figure>
<img src="img/scrum.png" alt="">
<figcaption>Scrum cards</figcaption>
</figure>
<figure>
<img src="img/magnets.png" alt="">
<figcaption>Magnets</figcaption>
</figure>
<figure>
<img src="img/redCaps.png" alt="">
<figcaption>Caps</figcaption>
</figure>
<figure>
<img src="img/magnets.png" alt="">
<figcaption>Magnets</figcaption>
</figure>
<figure>
<img src="img/pens.png" alt="">
<figcaption>Pens & Pencils</figcaption>
</figure>
<figure>
<img src="img/toys.png" alt="">
<figcaption>Toys</figcaption>
</figure>
</main>
and if you want to increase the size of the image, you can do it and then increase the padding in the css.