titles is exceeding the width of the div - html

Hello i am trying to replicate youtube. I am coding and aligning video list. I added video title. But the problem is video title is not showing properly. video title width alignment is not proper. the video title is showing on the top of other videos. video title exceed the width. i want the video title to fit with in the video. Kindly help me to fix this.
body{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.flexbox{
display: flex;
align-items: center;
}
nav{
padding: 10px 2%;
justify-content: space-between;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
background: #fff;
position: static;
top: 0;
z-index: 10;
}
.navright img{
width: 25px;
margin-right: 25px;
}
.navright .profile{
width: 30px;
border-radius: 30px;
}
.navleft .menuicon{
width: 25px;
}
.navleft .logo{
width: 130px;
padding-left: 20px;
}
.navmiddle .voice{
width: 16px;
}
.navmiddle .search{
width: 16px;
}
.navmiddle .searcharea{
border: 1px solid #ccc;
margin-right: 15px;
padding: 8px 12px;
border-radius: 25px;
}
.navmiddle .searchbox{
width: 400px;
}
.sidebar{
background: #fff;
width: 15%;
height: 100vh;
position: fixed;
padding-left: 2%;
padding-top: 20px;
z-index: -10;
}
.shortcuts a img{
width: 20px;
margin-right: 20px;
}
.shortcuts a{
display: flex;
align-items: center;
flex-wrap: wrap;
text-decoration: none;
width: fit-content;
}
.shortcuts a:first-child{
color: red;
}
.sidebar hr{
border: 0;
width: 85%;
height: 1px;
background: #ccc;
}
.small-sidebar{
width: 5%;
height: 200px;
}
.container{
padding-left: 17%;
padding-right: 2%;
padding-top: 20px;
padding-bottom: 20px;
}
.container .banner{
width: 100%;
}
.small-sidebar p{
display: none;
}
.flexbox .channelpic{
border-radius: 40px;
width: 50px;
}
.listcontainer{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
grid-column-gap: 16px;
grid-row-gap: 30px;
margin-top: 15px;
}
.vidlist .thumbnail{
width: 100%;
border-radius: 5px;
}
.vidlist .flexbox{
align-items: flex-start;
margin-top: 7px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="flexbox">
<div class="navleft flexbox">
<img src="/images/menu.png" alt="" class="menuicon" >
<img src="/images/logo.png" alt="" class="logo" >
</div>
<div class="navmiddle flexbox">
<div class="searcharea">
<input type="text" placeholder="Search" class="searchbox">
<img src="/images/search.png" alt="" class="search" >
</div>
<img src="/images/voice-search.png" alt="" class="voice" >
</div>
<div class="navright">
<img src="/images/upload.png" alt="" >
<img src="/images/notification.png" alt="" >
<img src="/images/simon.png" alt="" class="profile">
</div>
</nav>
<!---sidebar-->
<div class="sidebar">
<div class="shortcuts">
<img src="images/home.png" alt="" srcset=""><p>Home</p>
<img src="images/explore.png" alt="" srcset=""><p>Explore</p>
<img src="images/subscriprion.png" alt="" srcset=""><p>Subscription</p>
<img src="images/library.png" alt="" srcset=""><p>Library</p>
<img src="images/history.png" alt="" srcset=""><p>History</p>
<img src="images/playlist.png" alt="" srcset=""><p>Playlist</p>
<img src="images/messages.png" alt="" srcset=""><p>Messages</p>
<hr>
</div>
<div class="subscriptionlist">
<h1>Subscription</h1>
<img src="/images/tom.png" alt="" srcset=""><p>Tom Hardy</p>
<img src="/images/Jack.png" alt="" srcset=""><p>Jack Nichol</p>
<img src="/images/gerard.png" alt="" srcset=""><p>Gerard Pique</p>
<img src="/images/megan.png" alt="" srcset=""><p>Megan Steve </p>
</div>
</div>
<div class="container">
<div class="banner">
<img src="/images/banner.png" alt="" >
</div>
<div class="listcontainer">
<div class="vidlist">
<img src="/images/thumbnail1.png" alt="" class="thumbnail" >
<div class="flexbox">
<img src="/images/Jack.png" alt="" class="channelpic" >
<div class="vidinfo">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<p>Easy tutorials</p>
<p>15kview • 2 days ago</p>
</div>
</div>
</div>
<div class="vidlist">
<img src="/images/thumbnail2.png" alt="" class="thumbnail" >
<div class="flexbox">
<img src="/images/Jack.png" alt="" class="channelpic" >
<div class="vidinfo">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<p>Easy tutorials</p>
<p>15kview • 2 days ago</p>
</div>
</div>
</div>
<div class="vidlist">
<img src="/images/thumbnail3.png" alt="" class="thumbnail" >
<div class="flexbox">
<img src="/images/Jack.png" alt="" class="channelpic" >
<div class="vidinfo">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<p>Easy tutorials</p>
<p>15kview • 2 days ago</p>
</div>
</div>
</div>
<div class="vidlist">
<img src="/images/thumbnail4.png" alt="" class="thumbnail" >
<div class="flexbox">
<img src="/images/Jack.png" alt="" class="channelpic" >
<div class="vidinfo">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<p>Easy tutorials</p>
<p>15kview • 2 days ago</p>
</div>
</div>
</div>
<div class="vidlist">
<img src="/images/thumbnail5.png" alt="" class="thumbnail" >
<div class="flexbox">
<img src="/images/Jack.png" alt="" class="channelpic" >
<div class="vidinfo">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<p>Easy tutorials</p>
<p>15kview • 2 days ago</p>
</div>
</div>
</div>
<div class="vidlist">
<img src="/images/thumbnail6.png" alt="" class="thumbnail" >
<div class="flexbox">
<img src="/images/Jack.png" alt="" class="channelpic" >
<div class="vidinfo">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<p>Easy tutorials</p>
<p>15kview • 2 days ago</p>
</div>
</div>
</div>
<div class="vidlist">
<img src="/images/thumbnail7.png" alt="" class="thumbnail" >
<div class="flexbox">
<img src="/images/Jack.png" alt="" class="channelpic" >
<div class="vidinfo">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<p>Easy tutorials</p>
<p>15kview • 2 days ago</p>
</div>
</div>
</div>
<div class="vidlist">
<img src="/images/thumbnail8.png" alt="" class="thumbnail" >
<div class="flexbox">
<img src="/images/Jack.png" alt="" class="channelpic" >
<div class="vidinfo">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<p>Easy tutorials</p>
<p>15kview • 2 days ago</p>
</div>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>


Just add word-break:break-all to .vidinfo > a.
.vidinfo > a {
word-break: break-all;
}

Related

Do you know how to create this gallery box?

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>

How to stop content going out of website?

As you can see in the snippet bellow. I am trying to fit all the content but it is going out on the website, especially on the small devices (iphone x for example), parts of the content are not there. Any idea how to fix this? Thanks for any help as I dont know how to do this but presumebly something with flexbox
* {box-sizing: border-box;padding: 0;margin: 0;}
.row{
display: flex;
}
img{
width:450px;
height:350px;
display: block;
}
.container{
display: flex;
flex-direction: column;
align-items: center;
margin: auto;
margin-top:50px;
}
.column1{
margin-top: -30px;
margin-right: 7%;
position:relative;
height: 0%;
}
.column2{
margin-left: 6%;
margin-top: 70px;
position:relative;
}
.text h1{
width:450px;
}
.text h1{
font-family: muli, sans-serif;
font-size: 3.5rem;
font-weight:100;
}
.column2 .cover,.column1 .cover{
bottom:0px;
position:absolute;
opacity: 0.8;
font-family: muli, sans-serif;
font-weight:500;
width: 100%;
height:50px;
display: flex;
justify-content:center;
align-items: center;
color:white;
}
.dark{
background-color: #0E4C92;
}
.light{
background-color: #00B5FD;
}
.icon{
position:absolute;
right:-60px;
top:8%;
width:120px;
height:120px;
border-radius:50%;
box-shadow: 0 0 2px 1px gray;
}
#media (max-width: 960px) {
.row {
flex-wrap: wrap;
margin-top:10%;
margin-bottom: 15%;
justify-content: center;
}
.column1,.column2{
margin-left: 0%;
margin-right: 0%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.typekit.net/dsl6sbt.css">
</head>
<body>
<div class="container">
<div class="row1 row">
<div class="column1 text">
<h1>Solutions for<br> medical<br> applications</h1>
</div>
<div class="column2">
<img class="icon" src ="Datový zdroj 2.svg" alt="My Happy SVG"/>
<img src="Fluids.jpg" alt=""></img>
<div class="cover light"><h2>Fluids</h2></div>
</div>
</div>
<div class="row2 row">
<div class="column1">
<img class="icon" src ="Datový zdroj 5.svg" alt="My Happy SVG"/>
<img src="medical.jpg" alt="">
<div class="cover light"><h2>Medical device</h2></div>
</div>
<div class="column2">
<img class="icon" src ="Datový zdroj 6.svg" alt="My Happy SVG"/>
<img src="SurgicalTools.jpg" alt="">
<div class="cover dark"><h2>Surgical tools and instruments</h2></div>
</div>
</div>
<div class="row3 row">
<div class="column1">
<img class="icon" src ="Datový zdroj 1.svg" alt="My Happy SVG"/>
<img src="DrugDevice.jpg" alt="">
<div class="cover dark"><h2>Drug delivery device</h2></div>
</div>
<div class="column2">
<img class="icon" src ="Datový zdroj 1.svg" alt="My Happy SVG"/>
<img src="Packaging.jpg" alt="">
<div class="cover light"><h2>Packaging</h2></div>
</div>
</div>
<div class="row4 row">
<div class="column1">
<img class="icon" src ="Datový zdroj 3.svg" alt="My Happy SVG"/>
<img src="HomeCare.jpg" alt="">
<div class="cover light"><h2>Home care</h2></div>
</div>
<div class="column2">
<img class="icon" src ="Datový zdroj 4.svg" alt="My Happy SVG"/>
<img src="Labware.jpg" alt="">
<div class="cover dark"><h2>Labware</h2></div>
</div>
</div>
</div>
</body>
</html>

I think you can accomplish what you are looking for by adding some media queries and adjusting the width and height of the images and icons. I edited your code for a 320px screen, but you can also add one for 768px screens, etc. I also targeted your bigger images more specifically as just using img in your CSS rule, those properties were also affecting your icon images at times.
* {box-sizing: border-box;padding: 0;margin: 0;}
.row{
display: flex;
}
img[src$="jpg"]{
width:450px;
height:350px;
display: block;
}
.container{
display: flex;
flex-direction: column;
align-items: center;
margin: auto;
margin-top:50px;
}
.column1{
margin-top: -30px;
margin-right: 7%;
position:relative;
height: 0%;
}
.column2{
margin-left: 6%;
margin-top: 70px;
position:relative;
}
.text h1{
width:450px;
}
.text h1{
font-family: muli, sans-serif;
font-size: 3.5rem;
font-weight:100;
}
.column2 .cover,.column1 .cover{
bottom:0px;
position:absolute;
opacity: 0.8;
font-family: muli, sans-serif;
font-weight:500;
width: 100%;
height:50px;
display: flex;
justify-content:center;
align-items: center;
color:white;
}
.dark{
background-color: #0E4C92;
}
.light{
background-color: #00B5FD;
}
.icon{
position:absolute;
right:-60px;
top:8%;
width:120px;
height:120px;
border-radius:50%;
box-shadow: 0 0 2px 1px gray;
}
#media (max-width: 475px){
.text h1 {
width: 90%;
}
.icon {
width: 60px;
height: 60px;
right: -30px
}
img[src$="jpg"]{
width:250px;
height:250px;
display: block;
}
}
#media (max-width: 960px) {
.row {
flex-wrap: wrap;
margin-top:10%;
margin-bottom: 15%;
justify-content: center;
}
.column1,.column2{
margin-left: 0%;
margin-right: 0%;
}
}
<body>
<div class="container">
<div class="row1 row">
<div class="column1 text">
<h1>Solutions for<br> medical<br> applications</h1>
</div>
<div class="column2">
<img class="icon" src ="Datový zdroj 2.svg" alt="My Happy SVG"/>
<img src="Fluids.jpg" alt=""></img>
<div class="cover light"><h2>Fluids</h2></div>
</div>
</div>
<div class="row2 row">
<div class="column1">
<img class="icon" src ="Datový zdroj 5.svg" alt="My Happy SVG"/>
<img src="medical.jpg" alt="">
<div class="cover light"><h2>Medical device</h2></div>
</div>
<div class="column2">
<img class="icon" src ="Datový zdroj 6.svg" alt="My Happy SVG"/>
<img src="SurgicalTools.jpg" alt="">
<div class="cover dark"><h2>Surgical tools and instruments</h2></div>
</div>
</div>
<div class="row3 row">
<div class="column1">
<img class="icon" src ="Datový zdroj 1.svg" alt="My Happy SVG"/>
<img src="DrugDevice.jpg" alt="">
<div class="cover dark"><h2>Drug delivery device</h2></div>
</div>
<div class="column2">
<img class="icon" src ="Datový zdroj 1.svg" alt="My Happy SVG"/>
<img src="Packaging.jpg" alt="">
<div class="cover light"><h2>Packaging</h2></div>
</div>
</div>
<div class="row4 row">
<div class="column1">
<img class="icon" src ="Datový zdroj 3.svg" alt="My Happy SVG"/>
<img src="HomeCare.jpg" alt="">
<div class="cover light"><h2>Home care</h2></div>
</div>
<div class="column2">
<img class="icon" src ="Datový zdroj 4.svg" alt="My Happy SVG"/>
<img src="Labware.jpg" alt="">
<div class="cover dark"><h2>Labware</h2></div>
</div>
</div>
</div>
</body>

How to align divs in rows html css

I have so many divs in my website and I want to align them like this with CSS and HTML:
<div class="card" style="width: 18rem; margin: 16px;">
<img src="https://mdbootstrap.com/img/new/standard/nature/182.jpg" class="card-img-top" alt="..." />
<div class="card-body">
<p class="card-text">Music Name</p>
</div>
</div>

It looks like a Masonry Layout. Try the Below Code and make necessary modifications.
This snippet uses CSS-Grids. You will need to change basic styles on some grid-items to make it look exactly as yours :)
/* CSS reset */
*,
*::after,
*::before {
box-sizing: inherit;
margin: 0;
padding: 0;
}
body {
box-sizing: border-box;
position: relative;
}
html {
font-size: 62.5%;
}
/* Typography --------------------------------------------*/
body {
font-family: 'Helvetica Neue', sans-serif;
font-size: 2rem;
text-align: center;
}
.heading {
margin-bottom: 3rem;
}
.body-text {
font-size: 1.6rem;
line-height: 2.5rem;
margin: 0 auto;
width: 70%;
}
.footer-text {
color: #fff;
font-size: 1.5rem;
}
/* Grids --------------------------------------------*/
.container {
display: grid;
grid-gap: 2rem;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(12, 150px);
margin: 0 auto;
max-width: 90%;
padding: 3rem 0;
}
/* Grid images --------------------------------------------*/
.img {
border-radius: 1rem;
height: 100%;
width: 100%;
object-fit: cover;
}
/* Grid items --------------------------------------------*/
.item-4 {
grid-row: 2/5;
}
.item-5 {
grid-row: 2/6;
}
.item-6 {
grid-row: 2/4;
}
.item-7 {
grid-row: 5/6;
}
.item-8 {
grid-row: 4/6;
}
.item-9 {
grid-row: 6/11;
}
.item-10 {
grid-row: 6/7;
}
.item-11 {
grid-row: 6/9;
}
.item-12 {
grid-row: 7/12;
}
.item-13 {
grid-row: 9/13;
}
.item-14 {
grid-row: 11/13;
}
<body>
<main class="container">
<div class="item-1">
<img class="img" src="https://picsum.photos/500/300" alt="">
</div>
<div class="item-2">
<img class="img" src="https://picsum.photos/500/301" alt="">
</div>
<div class="item-3">
<img class="img" src="https://picsum.photos/500/302" alt="">
</div>
<div class="item-4">
<img class="img" src="https://picsum.photos/500/600" alt="">
</div>
<div class="item-5">
<img class="img" src="https://picsum.photos/500/800" alt="">
</div>
<div class="item-6">
<img class="img" src="https://picsum.photos/500/400" alt="">
</div>
<div class="item-7">
<img class="img" src="https://picsum.photos/500/304" alt="">
</div>
<div class="item-8">
<img class="img" src="https://picsum.photos/500/401" alt="">
</div>
<div class="item-9">
<img class="img" src="https://picsum.photos/500/900" alt="">
</div>
<div class="item-10">
<img class="img" src="https://picsum.photos/500/305" alt="">
</div>
<div class="item-11">
<img class="img" src="https://picsum.photos/500/500" alt="">
</div>
<div class="item-12">
<img class="img" src="https://picsum.photos/500/901" alt="">
</div>
<div class="item-13">
<img class="img" src="https://picsum.photos/500/700" alt="">
</div>
<div class="item-14">
<img class="img" src="https://picsum.photos/500/402" alt="">
</div>
<div class="item-15">
<img class="img" src="https://picsum.photos/500/306" alt="">
</div>
</main>
</body>

you can use grid layout
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
}
add this to a div and children of the div can be adjusted the way you want.

You can stack the card divs using display:flex property. Give display:flex property to your div container and flex-wrap:wrap so that the divs can wrap itself. Use any other flexbox properties you like on container after that. So your code might look like this.
<div class="card-container" style="display:flex;flex-wrap:wrap">
<div class="card" style="width: 18rem; margin: 16px;">
<img src="https://mdbootstrap.com/img/new/standard/nature/182.jpg" class="card-img-top" alt="..." />
<div class="card-body">
<p class="card-text">
Music Name
</p>
</div>
</div>
</div>

I tried I've fixed it, let me know if it is good for you:
This is also responsive..
<style>
.grid-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 10px;
}
.card {
margin: 5px;
font-size: 30px;
text-align: center;
flex: 1 1 150px; /* Stretching */
}
img{
width: 300px
}
</style>
<body>
<div class="grid-container">
<div class="card" >
<img src="https://mdbootstrap.com/img/new/standard/nature/182.jpg" class="card-img-top" alt="..." />
<div class="card-body">
<p class="card-text">
Music Name
</p>
</div>
</div>
<div class="card" >
<img src="https://mdbootstrap.com/img/new/standard/nature/182.jpg" class="card-img-top" alt="..." />
<div class="card-body">
<p class="card-text">
Music Name
</p>
</div>
</div>
<div class="card" >
<img src="https://mdbootstrap.com/img/new/standard/nature/182.jpg" class="card-img-top" alt="..." />
<div class="card-body">
<p class="card-text">
Music Name
</p>
</div>
</div>
<div class="card" >
<img src="https://mdbootstrap.com/img/new/standard/nature/182.jpg" class="card-img-top" alt="..." />
<div class="card-body">
<p class="card-text">
Music Name
</p>
</div>
</div>
<div class="card" >
<img src="https://mdbootstrap.com/img/new/standard/nature/182.jpg" class="card-img-top" alt="..." />
<div class="card-body">
<p class="card-text">
Music Name
</p>
</div>
</div>
<div class="card" >
<img src="https://mdbootstrap.com/img/new/standard/nature/182.jpg" class="card-img-top" alt="..." />
<div class="card-body">
<p class="card-text">
Music Name
</p>
</div>
</div>
<div class="card" >
<img src="https://mdbootstrap.com/img/new/standard/nature/182.jpg" class="card-img-top" alt="..." />
<div class="card-body">
<p class="card-text">
Music Name
</p>
</div>
</div>
</div>
</body>

Trying to get a mouse hover zoom transistion effect using html and css but image is getting overflowed, the images position are getting altered

I am new to HTML and CSS. i was trying to get the mouse hover zoom transition on the images. I am able to get the transition with no issue but i dont want it to overflow the size of the image which changes with the size of the page. here is both css and html code. I am having issues in the ".img-outer" part of the css code.
img {
width: 30%;
float: left;
margin: 1.66%;
}
/* .img-outer {
overflow: hidden;
max-width: 30%;
max-height: 30%;
} */
.img-inner {
position: relative;
}
img {
transition: 0.5s ease;
}
img:hover {
transform: scale(1.1);
}
p {
font-family: "Bebas Neue";
font-size: 18px;
margin-left: 1.6%;
margin-top: 3%;
color: rgb(77, 75, 75);
}
#name {
font-family: "Bebas Neue";
font-size: 23px;
color: black;
text-align: center;
margin-bottom: 3%;
border-bottom: 2px solid #f1f1f1;
padding-bottom: 2%;
padding-top: 1.5%;
width: 75%;
margin: 0 auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link
href="https://fonts.googleapis.com/css?family=Bebas+Neue&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="photostyle.css" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Photo Blog</title>
</head>
<body>
<p id="name">BLOG NAME</p>
<p>Mono Photographs</p>
<div class="img-outer">
<div class="img-inner">
<img
src="http://c1.staticflickr.com/9/8450/8026519634_f33f3724ea_b.jpg"
/>
</div>
</div>
<div class="img-outer">
<div class="img-inner">
<img
src="http://c2.staticflickr.com/8/7218/7209301894_c99d3a33c2_h.jpg"
/>
</div>
</div>
<div class="img-outer">
<div class="img-inner">
<img
src="http://c2.staticflickr.com/8/7231/6947093326_df216540ff_b.jpg"
/>
</div>
</div>
<div class="img-outer">
<div class="img-inner">
<img
src="http://c1.staticflickr.com/9/8788/17367410309_78abb9e5b6_b.jpg"
/>
</div>
</div>
<div class="img-outer">
<div class="img-inner">
<img
src="http://c2.staticflickr.com/6/5814/20700286354_762c19bd3b_b.jpg"
/>
</div>
</div>
<div class="img-outer">
<div class="img-inner">
<img
src="http://c2.staticflickr.com/6/5647/21137202535_404bf25729_b.jpg"
/>
</div>
</div>
<div class="img-outer">
<div class="img-inner">
<img
src="http://c2.staticflickr.com/6/5588/14991687545_5c8e1a2e86_b.jpg"
/>
</div>
</div>
<div class="img-outer">
<div class="img-inner">
<img
src="http://c2.staticflickr.com/4/3888/14878097108_5997041006_b.jpg"
/>
</div>
</div>
<div class="img-outer">
<div class="img-inner">
<img
src="http://c2.staticflickr.com/8/7579/15482110477_0b0e9e5421_b.jpg"
/>
</div>
</div>
</body>
</html>

Check the solution.
.img-outer {
overflow: hidden;
width: 30%;
float: left;
margin: 1.66%;
}
.img-inner {
position: relative;
}
img {
transition: 0.5s ease;
width:100%;
}
img:hover {
transform: scale(1.1);
}
p {
font-family: "Bebas Neue";
font-size: 18px;
margin-left: 1.6%;
margin-top: 3%;
color: rgb(77, 75, 75);
}
#name {
font-family: "Bebas Neue";
font-size: 23px;
color: black;
text-align: center;
margin-bottom: 3%;
border-bottom: 2px solid #f1f1f1;
padding-bottom: 2%;
padding-top: 1.5%;
width: 75%;
margin: 0 auto;
}
<p id="name">BLOG NAME</p>
<p>Mono Photographs</p>
<div class="img-outer">
<div class="img-inner">
<img
src="http://c1.staticflickr.com/9/8450/8026519634_f33f3724ea_b.jpg"
/>
</div>
</div>
<div class="img-outer">
<div class="img-inner">
<img
src="http://c2.staticflickr.com/8/7218/7209301894_c99d3a33c2_h.jpg"
/>
</div>
</div>
<div class="img-outer">
<div class="img-inner">
<img
src="http://c2.staticflickr.com/8/7231/6947093326_df216540ff_b.jpg"
/>
</div>
</div>
<div class="img-outer">
<div class="img-inner">
<img
src="http://c1.staticflickr.com/9/8788/17367410309_78abb9e5b6_b.jpg"
/>
</div>
</div>
<div class="img-outer">
<div class="img-inner">
<img
src="http://c2.staticflickr.com/6/5814/20700286354_762c19bd3b_b.jpg"
/>
</div>
</div>
<div class="img-outer">
<div class="img-inner">
<img
src="http://c2.staticflickr.com/6/5647/21137202535_404bf25729_b.jpg"
/>
</div>
</div>
<div class="img-outer">
<div class="img-inner">
<img
src="http://c2.staticflickr.com/6/5588/14991687545_5c8e1a2e86_b.jpg"
/>
</div>
</div>
<div class="img-outer">
<div class="img-inner">
<img
src="http://c2.staticflickr.com/4/3888/14878097108_5997041006_b.jpg"
/>
</div>
</div>
<div class="img-outer">
<div class="img-inner">
<img
src="http://c2.staticflickr.com/8/7579/15482110477_0b0e9e5421_b.jpg"
/>
</div>
</div>

move row of divs down when overflow

I have dynamic div boxes created in a website, I want to have 4 boxes in each row using bootstrap, that's working, but each box has some text at the bottom, the problem is that when the text is too long and it creates a new line, the div expands but the box underneath this div moves to the right, instead of moving all the row underneath down.
This is the html:
<div class="row">
<div ng-repeat=""class="col-sm-3 album-art"> //loop to create the boxes
<div class="thumb">
<div class="box">
<span class="play" ng-click="">&#9658</span>
<div class="overlay"></div>
</div>
<img src= height="200" width="200">
<p>text</p>
<p><i>text</i></p>
</div>
</div>
And this is the css I have:
.album-art{
padding-bottom: 20px;
padding-top: 20px;
margin-bottom: 10px;
}
.thumb {
position: relative;
}
.thumb .box {
position: absolute;
top: 0;
display: block;
width: 200px;
height: 200px;
text-align: center;
text-decoration: none;
cursor: pointer;
}
Basically what I'd need is that when the text overflows and creates a new line, the row below the current row moves down and not move every element to the right.The problem seems to be in the "album-art" class, since I removed all the other classes and the problem still there.
thanks
EDIT: I've added images for a better explanation
This is when everything is normal
But when the text is longer
EDIT2: I put an example here: jsfiddle.net/qgo7a701 you might have to expand the result area to the left in order to see 4 squares per row

I don't understand you question very well , but in bootstrap the row divided to 12 cell, and you can define divs in row with different sizes.and you can use col-[xl,lg,md,sm,xs]-[1 to 12] classes for that. you can look to this link :
http://getbootstrap.com/examples/grid/
for you example below i have tried to make two row with two boxes and i only break the text to prevent it to overflow to next div
.album-art{
padding-bottom: 20px;
padding-top: 20px;
margin-bottom: 10px;
}
p{
word-break: break-all;
}
.thumb {
position: relative;
}
.thumb .box {
position: absolute;
top: 0;
display: block;
width: 200px;
height: 200px;
text-align: center;
text-decoration: none;
cursor: pointer;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="row">
<div ng-repeat=""class="col-sm-3 album-art">
//loop to create the boxes
<div class="thumb">
<div class="box">
<span class="play" ng-click="">&#9658</span>
<div class="overlay">
</div>
</div>
<img src= height="200" width="200"/>
<p style="">text helooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</p>
<p><i>text</i></p>
</div>
</div>
<div ng-repeat=""class="col-sm-3 album-art">
//loop to create the boxes
<div class="thumb">
<div class="box">
<span class="play" ng-click="">&#9658</span>
<div class="overlay">
</div>
</div>
<img src= height="200" width="200"/>
<p style="">text heloooooooooooooooooooooooooooooooooooooooooo</p>
<p><i>text fffffffffffffffffffffffffffffffffffffffffffffffddddddddddddddsssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssdddddddddddddddddddddddddddddddddddd fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</i></p>
</div>
</div>
</div>
<div class="row">
<div ng-repeat=""class="col-sm-3 album-art">
//loop to create the boxes
<div class="thumb">
<div class="box">
<span class="play" ng-click="">&#9658</span>
<div class="overlay">
</div>
</div>
<img src= height="200" width="200"/>
<p style="">text helooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</p>
<p><i>text</i></p>
</div>
</div>
<div ng-repeat=""class="col-sm-3 album-art">
//loop to create the boxes
<div class="thumb">
<div class="box">
<span class="play" ng-click="">&#9658</span>
<div class="overlay">
</div>
</div>
<img src= height="200" width="200"/>
<p style="">text helooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</p>
<p><i>text</i></p>
</div>
</div>
</div>

I tested what you did and it was working as intended. You used 1 row for the complete collection of cols, so they behaved as intended. To change that, you must force a grouping of cols and you can do it like this:
(Resume here:
- Add div class="col-sm-12" style="display: table" and close it after 4 of your "col-sm-3 divs". Add another one for the rest of the "col-sm-3 divs". Everything should be inside the div class="row". (I would have used two rows every 4 "col-sm-3 divs" but, is your code).
- Change the "style" into a css, include it in your stylesheet, add the class to the div. End.
.album-art {
padding-bottom: 20px;
padding-top: 20px;
margin-bottom: 10px;
}
.thumb {
position: relative;
}
.thumb .box {
position: absolute;
top: 0;
display: block;
width: 200px;
height: 200px;
text-align: center;
text-decoration: none;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" type="text/css" rel="stylesheet">
<style>
.album-art {
padding-bottom: 20px;
padding-top: 20px;
margin-bottom: 10px;
}
.thumb {
position: relative;
}
.thumb .box {
position: absolute;
top: 0;
display: block;
width: 200px;
height: 200px;
text-align: center;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="row">
<div class="col-sm-12" style="display: table;">
<div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px">
<div class="thumb">
<div class="box">
<span class="play"></span>
<div class="overlay"></div>
</div>
<img src="#" height="50" width="50" />
<p style="color: black">tedddddddxxxx ewhuiofhew hfiuhiufw shidfshksdhxfffffffffffffxxxxxddddddxt</p>
</div>
</div>
<div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px">
<div class="thumb">
<div class="box">
<span class="play"></span>
<div class="overlay"></div>
</div>
<img src="#" height="50" width="50" />
<p style="color: black">text</p>
</div>
</div>
<div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px">
<div class="thumb">
<div class="box">
<span class="play"></span>
<div class="overlay"></div>
</div>
<img src="#" height="50" width="50" />
<p style="color: black">text</p>
</div>
</div>
<div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px">
<div class="thumb">
<div class="box">
<span class="play"></span>
<div class="overlay"></div>
</div>
<img src="#" height="50" width="50" />
<p style="color: black">text</p>
</div>
</div>
</div>
<div class="col-sm-12" style="display: table;">
<div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px">
<div class="thumb">
<div class="box">
<span class="play"></span>
<div class="overlay"></div>
</div>
<img src="#" height="50" width="50" />
<p style="color: black">text</p>
</div>
</div>
<div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px">
<div class="thumb">
<div class="box">
<span class="play"></span>
<div class="overlay"></div>
</div>
<img src="#" height="50" width="50" />
<p style="color: black">text</p>
</div>
</div>
<div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px">
<div class="thumb">
<div class="box">
<span class="play"></span>
<div class="overlay"></div>
</div>
<img src="#" height="50" width="50" />
<p style="color: black">text</p>
</div>
</div>
<div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px">
<div class="thumb">
<div class="box">
<span class="play"></span>
<div class="overlay"></div>
</div>
<img src="#" height="50" width="50" />
<p style="color: black">text</p>
</div>
</div>
</div>
</div>
</body>
</html>