I made an html page and i managed to make it look like i want when i run it locally. I wanted to show it to my friends and put the code on codepen to get a link to send, but on codepen the pages dont look ok, nor like what i see when i run it locally. Here are the two print screens to show the difference: page when i run it locally vs page on codepen.
To give more details, what i wanted is that all the slides from bootstrap carousel that i'm using to be the same size..and how i sayed i managed to do that, but idk what is not working when i try to run it from a site.
I tried a lot of different things with height, min-height, overflow, position on html and body but didnt managed to do it.
Here is the link from codepen: codepen
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="/testdanco.css">
<title>2019 Fashion Trends</title>
</head>
<body>
<div id="fit">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<h1 class="slide1 display-1">
<div class="circle">2019 FASHION TRENDS</div>
</h1>
</div>
<div class="carousel-item">
<video autoplay muted controls loop>
<source src="trends.mp4" type="video/mp4">
</video>
</div>
<div class="carousel-item slide3">
<div class="container">
<div class="row align-items-center justify-content-center">
<div class="col-md-10 col-lg-9">
<div class="card">
<img class="card-img-top"
src="https://www.thetrendspotter.net/wp-content/uploads/2018/10/Bike-Shorts-with-Blazers.jpg"
alt="Card image cap">
<div class="card-body ">
<h5 class="card-title">Bike Shorts with Blazers</h5>
<p class="card-text">Athleisure is the trend that keeps giving, and its latest
offering is as unexpected as it is stylish. The bike shorts were worn with
blazerss by many style-savvy showgoerss this fashion month.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="carousel-item">
<div class="row align-items-center">
<div class="col-6">
<div class="card">
<img class="card-img-top"
src="https://www.thetrendspotter.net/wp-content/uploads/2018/10/Bike-Shorts-with-Blazers.jpg"
alt="Card image cap">
<div class="card-body ">
<h5 class="card-title">Bike Shorts with Blazers</h5>
<p class="card-text">Athleisure is the trend that keeps giving, and its latest offering is as unexpected as it is stylish. The bike shorts were worn with blazerss by many style-savvy showgoerss this fashion month.</p>
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<img class="card-img-top"
src="https://www.thetrendspotter.net/wp-content/uploads/2018/10/Animal-Instincts.jpg"
alt="Card image cap">
<div class="card-body ">
<h5 class="card-title">Animal Instincts</h5>
<p class="card-text">This season, street style stars let their animal instincts take over with bold and wild prints. In particular, loud leopard print was a favourite amongst the fashionistas and appeared on garments.</p>
</div>
</div>
</div>
</div>
</div> -->
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="/testdanco.js"></script>
</body>
</html>
html{
height: 100vh;
overflow-y: scroll;
position: absolute;
width: 100vw;
}
body {
height: 100%;
overflow-y: scroll;}
/* div#fit {
height: 100%;
overflow:auto; position:relative;
} */
h1 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 0;
color: black;
}
h1.slide1 {
height: 100%;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0.5))), url(https://images.unsplash.com/photo-1569851409587-7e3a27cbfe1b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=900&q=90) center no-repeat;
background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url(https://images.unsplash.com/photo-1569851409587-7e3a27cbfe1b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=900&q=90) center no-repeat;
background-size: cover;
font-weight: bold;
margin:0;
width: 100%;
min-height: 100%;
left: 0;
top: 0;
}
h1 div.circle {
margin: auto;
height: 500px;
width: 500px;
text-align: center;
border-radius: 100%;
border: 5px solid black;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0.5)));
background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5));
}
div video {
width: 100%;
height: 100%;
background: black;
}
div.row {
height: 100%;
background: black;
}
div.slide3 {
height: 100%;
background: black;
text-align: center;
}
div.card {
background: transparent;
color: white;
text-align: center;
}
a.carousel-control-prev {
height: 50px !important;
top: 50% !important;
width: 10% !important;
}
a.carousel-control-next {
height: 50px !important;
top: 50% !important;
width: 10% !important;
}