Div move vertically after window resize - html

Question

How do i make these divs to move down when window resizes and on mobile devices to be a width of 100%; Subject class = "project-cards"
Heres the Code...
Resize window.
Theres alot of things going on here, first when the window resizes i want the three divs to move down into a vertical row. When the window gets to about the size of a mobile phone i want the three divs to still be vertical with a width of 100%; so that it is covering the the whole page width wise. You can see alot of things going wrong with the content inside the divs when it resizes. For example the text and button overlap. I know i cant ask two questions but if you could help me get the three divs to be responsive, that will help me so much. Visit site Xlaeo.tk
.mainCenter{
width:100%;
padding-right:100px;
padding-left:100px;
padding-top: 50px;
height:700px;
}
.project-wrapper{
margin-top: 420px;
}
.headerProjects{
font-size: 25px;
font-weight: BOLD;
margin-left: 52px;
margin-bottom: 20px;
color: #d80068;
}
.projectholders{
height:auto;
width:100%;
margin:0 auto;
display: flex;
justify-content: center;
margin-bottom: 100px;
min-width: 200px;
}
.projects-cards{
border:.9px solid #f7f7f7;
border-radius: 2rem;
display: block;
width: 30%;
margin-left:25px;
}
.projects-cards:hover{
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
transition-delay: 1s;
transition-duration: .5s;
}
.media-top{
width:100%;
height:300px;
border-bottom: 1.9px solid gray;
position: relative;
}
.media-top img{
border-top-left-radius: 2rem;
border-top-right-radius: 2rem;
}
.project-info{
width:100%;
}
.progress-left{
float: left;
width: 150px;
height: 150px;
}
.project-money{
float: right;
width: 170px;
border-bottom: 1px solid #c7c8c9;
}
.project-money h1{
font-size: 16.9px;
color: gray;
font-weight: bold;
width:900%;
}
.visitProject-button-H{
padding: 20px;
float:right;
}
.visi-project{
height:50px;
width:135px;
background-color: #ff0043;
font-size: 20px;
font-weight: bold;
border:none;
border-top-left-radius: 1rem;
border-bottom-left-radius: 1rem;
}
.under{
display: flex;
margin:0 auto;
justify-content: center;
font-size: 60px;
color: #ff0043;
}
<div class="projectholders">
<div class="projects-cards">
<div class="media-top" >
<img src="http://cdn.pcwallart.com/images/mercedes-benz-biome-seed-wallpaper-1.jpg" width="100%" height="100%" />
</div>
<div class="project-info">
<div class="progress-left">
<img src="https://camo.githubusercontent.com/40a03a2e27517edee74b177b7d48f1632b31c693/687474703a2f2f692e696d6775722e636f6d2f414a30364157452e706e67"
width="100%" height="100%;" />
</div>
<div class="project-money">
<h1>Backed by $102,323 </h1>
</div>
<div class="visitProject-button-H">
<button class="visi-project" type="button">Visit</button>
</div>
</div>
</div>
<div class="projects-cards">
<div class="media-top">
<img src="https://cdn.dribbble.com/users/149817/screenshots/1436337/speedcam.gif" width="100%" height="100%" />
</div>
<div class="project-info">
<div class="progress-left">
<img src="https://camo.githubusercontent.com/40a03a2e27517edee74b177b7d48f1632b31c693/687474703a2f2f692e696d6775722e636f6d2f414a30364157452e706e67"
width="100%" height="100%;" />
</div>
<div class="project-money">
<h1>Backed by $9,564 </h1>
</div>
<div class="visitProject-button-H">
<button class="visi-project" type="button">Visit</button>
</div>
</div>
</div>
<div class="projects-cards">
<div class="media-top">
<img src="http://coolwallpaperz.info/user-content/uploads/wall/o/27/girl-motorcycle-streamlined-cool-sumer-370761.jpg" width="100%" height="100%" />
</div>
<div class="project-info">
<div class="progress-left">
<img src="https://camo.githubusercontent.com/40a03a2e27517edee74b177b7d48f1632b31c693/687474703a2f2f692e696d6775722e636f6d2f414a30364157452e706e67"
width="100%" height="100%;" />
</div>
<div class="project-money">
<h1>Backed by $23,324 </h1>
</div>
<div class="visitProject-button-H">
<button class="visi-project" type="button">Visit</button>
</div>
</div>
</div>
</div>

Answer 1

If you really don't want to use any libraries,
Please go with CSS Media Query
<div>
<div class="block">
<p>Hello</p>
</div>
<div class="block">
<p>Hello</p>
</div>
<div class="block">
<p>Hello</p>
</div>
<div>
CSS
.block{
display: inline-block;
width: 30%;
}
#media screen and (max-width: 480px) {
.block{
display: inline-block;
width: 100%;
}
}
DEMO: https://codepen.io/mkarrfan/pen/WEOWpG

Answer 2

You can try this I have added bootstrap to your code and your can define your css accordingly.
Firstly add bootstrap CDN to your code and define each section with the columns size you want I have added col-sm-4 to the class.
Note : sm is for small screen similarly we have md, xs, lg for medium extra-small and large screen, you can define all at same time also depending how you want your view to look on different size of screen, you can devide screen into 12 parts so range will be from col-sm-1 to col-sm-12.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" >
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="projectholders row">
<div class="projects-cards col-sm-4">
<div class="media-top" >
<img src="http://cdn.pcwallart.com/images/mercedes-benz-biome-seed-wallpaper-1.jpg" width="100%" height="100%" />
</div>
<div class="project-info">
<div class="progress-left">
<img src="https://camo.githubusercontent.com/40a03a2e27517edee74b177b7d48f1632b31c693/687474703a2f2f692e696d6775722e636f6d2f414a30364157452e706e67"
width="100%" height="100%;" />
</div>
<div class="project-money">
<h1>Backed by $102,323 </h1>
</div>
<div class="visitProject-button-H">
<button class="visi-project" type="button">Visit</button>
</div>
</div>
</div>
<div class="projects-cards col-sm-4">
<div class="media-top">
<img src="https://cdn.dribbble.com/users/149817/screenshots/1436337/speedcam.gif" width="100%" height="100%" />
</div>
<div class="project-info">
<div class="progress-left">
<img src="https://camo.githubusercontent.com/40a03a2e27517edee74b177b7d48f1632b31c693/687474703a2f2f692e696d6775722e636f6d2f414a30364157452e706e67"
width="100%" height="100%;" />
</div>
<div class="project-money">
<h1>Backed by $9,564 </h1>
</div>
<div class="visitProject-button-H">
<button class="visi-project" type="button">Visit</button>
</div>
</div>
</div>
<div class="projects-cards col-sm-4">
<div class="media-top">
<img src="http://coolwallpaperz.info/user-content/uploads/wall/o/27/girl-motorcycle-streamlined-cool-sumer-370761.jpg" width="100%" height="100%" />
</div>
<div class="project-info">
<div class="progress-left">
<img src="https://camo.githubusercontent.com/40a03a2e27517edee74b177b7d48f1632b31c693/687474703a2f2f692e696d6775722e636f6d2f414a30364157452e706e67"
width="100%" height="100%;" />
</div>
<div class="project-money">
<h1>Backed by $23,324 </h1>
</div>
<div class="visitProject-button-H">
<button class="visi-project" type="button">Visit</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
you can find the working fiddle https://jsfiddle.net/rhmasm3t/
I hope this will help. and this does not change any thing to your css.

Answer 3

I have made few adjustments in your code, such as widths of some divs. You can play around and see what works best.
You have used 900% on width of project-money h1 thats why your overflow-x is so much.
.project-money h1{
font-size: 16.9px;
color: gray;
font-weight: bold;
width:900%;
}
Also I have used media queries, so that when the width gets smaller the content will be below each other. Read w3 queries.
#media screen and (max-width:500px) {
.projectholders {
flex-direction: column;
}
Code
.mainCenter {
width: 100%;
padding-right: 100px;
padding-left: 100px;
padding-top: 50px;
height: 700px;
}
.project-wrapper {
margin-top: 420px;
}
.headerProjects {
font-size: 25px;
font-weight: BOLD;
margin-left: 52px;
margin-bottom: 20px;
color: #d80068;
}
.projectholders {
height: auto;
width: 100%;
margin: 0 auto;
display: inline-flex;
justify-content: center;
margin-bottom: 100px;
min-width: 200px;
}
.projects-cards {
border: .9px solid #f7f7f7;
border-radius: 2rem;
display: block;
width: 150px;
margin-left: 25px;
}
.projects-cards:hover {
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
transition-delay: 1s;
transition-duration: .5s;
}
.media-top {
width: 100%;
height: 300px;
border-bottom: 1.9px solid gray;
position: relative;
}
.media-top img {
border-top-left-radius: 2rem;
border-top-right-radius: 2rem;
}
.project-info {
width: 100%;
}
.progress-left {
float: left;
width: 150px;
height: 150px;
}
.project-money {
float: right;
width: 150px;
border-bottom: 1px solid #c7c8c9;
}
.project-money h1 {
font-size: 16.9px;
color: gray;
font-weight: bold;
width: 900%;
}
.visitProject-button-H {
padding: 20px;
float: right;
}
.visi-project {
height: 50px;
width: 125px;
background-color: #ff0043;
font-size: 20px;
font-weight: bold;
text-align: center;
border: none;
border-top-left-radius: 1rem;
border-bottom-left-radius: 1rem;
}
.under {
display: flex;
margin: 0 auto;
justify-content: center;
font-size: 60px;
color: #ff0043;
}
#media screen and (max-width:500px) {
.projectholders {
flex-direction: column;
}
<div class="projectholders">
<div class="projects-cards">
<div class="media-top">
<img src="http://cdn.pcwallart.com/images/mercedes-benz-biome-seed-wallpaper-1.jpg" width="100%" height="100%" />
</div>
<div class="project-info">
<div class="progress-left">
<img src="https://camo.githubusercontent.com/40a03a2e27517edee74b177b7d48f1632b31c693/687474703a2f2f692e696d6775722e636f6d2f414a30364157452e706e67" width="100%" height="100%;" />
</div>
<div class="project-money">
<h1>Backed by $102,323 </h1>
</div>
<div class="visitProject-button-H">
<button class="visi-project" type="button">Visit</button>
</div>
</div>
</div>
<div class="projects-cards">
<div class="media-top">
<img src="https://cdn.dribbble.com/users/149817/screenshots/1436337/speedcam.gif" width="100%" height="100%" />
</div>
<div class="project-info">
<div class="progress-left">
<img src="https://camo.githubusercontent.com/40a03a2e27517edee74b177b7d48f1632b31c693/687474703a2f2f692e696d6775722e636f6d2f414a30364157452e706e67" width="100%" height="100%;" />
</div>
<div class="project-money">
<h1>Backed by $9,564 </h1>
</div>
<div class="visitProject-button-H">
<button class="visi-project" type="button">Visit</button>
</div>
</div>
</div>
<div class="projects-cards">
<div class="media-top">
<img src="http://coolwallpaperz.info/user-content/uploads/wall/o/27/girl-motorcycle-streamlined-cool-sumer-370761.jpg" width="100%" height="100%" />
</div>
<div class="project-info">
<div class="progress-left">
<img src="https://camo.githubusercontent.com/40a03a2e27517edee74b177b7d48f1632b31c693/687474703a2f2f692e696d6775722e636f6d2f414a30364157452e706e67" width="100%" height="100%;" />
</div>
<div class="project-money">
<h1>Backed by $23,324 </h1>
</div>
<div class="visitProject-button-H">
<button class="visi-project" type="button">Visit</button>
</div>
</div>
</div>
</div>

Answer 4

For the resizing functionality you should use bootstrap
It's simple and easy to use and provide responsiveness to your site.