Good day to you!
I know that this is a common problem and have been solved many times but really I've tried every search solutions that search engine and stackoverflow returns to me but I really can't fix this one.
The problem is that the background image is cropped when the view is in smaller device.
I have tried setting the html and the body to 100% to no avail.
I have tried setting the background-size to 100% 100% to no avail.
I have tried this link CSS: Full Size background image but still to no avail.
Here's the css code:
body {
background-image: url(../img/bg2.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
font-family: Josefin Sans Regular;
color: white;
}
html {
height: 100%;
}
#content {
text-align: center;
text-shadow: 0px 4px 3px rgba(0,0,0,1),
0px 8px 13px rgba(0,0,0,0.1),
0px 18px 23px rgba(0,0,0,0.1);
padding-top: 25%;
}
#carHead {
text-align: center;
}
h1 {
font-weight: 700;
font-size: 5em;
}
hr {
width: 45%;
background-color: #f8f8f8;
border-top: 1px solid #f8f8f8;
border-bottom: 1px solid rgb(0,0,0.02)
}
.carousel-item {
padding: 20px;
}
and here's the body of the html code:
<body>
<!--head nav-->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">
<i class="fas fa-desktop"></i>
< logo
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item ">
<a class="nav-link " href="#">Contact Us</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Username" aria-label="Search">
<input class="form-control mr-sm-2" type="password" placeholder="Password" aria-label="Password">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">
<i class="fa fa-user" aria-hidden="true"></i> Login
</button>
</form>
</div>
</div>
</nav>
<!--end of head nav-->
<div class="container">
<div class="row">
<div class="col-xs-12 col-lg-12">
<div id="carHead">
<h1>Example of our works</h1>
</div>
</div>
</div>
<!-- featured item carousel -->
<div id="testcar" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#testcar" data-slide-to="0" class="active"></li>
<li data-target="#testcar" data-slide-to="1"></li>
<li data-target="#testcar" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="assets/img/w1.jpg" height="350px" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h5>Work/Template 1</h5>
<p>Use/What for</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/img/w2.jpg" height="350px" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h5>Work/Template 2</h5>
<p>Use/What for</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/img/w3.jpg" height="350px" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h5>Work/Template 3</h5>
<p>Use/What for</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#testcar" 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="#testcar" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- end of carousel-->
<div class="row">
<div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<img class="img-thumbnail"src="assets/img/1.jpg">
</div>
<div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<img class="img-thumbnail"src="assets/img/2.jpg">
</div>
<div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<img class="img-thumbnail"src="assets/img/3.jpg">
</div>
<div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<img class="img-thumbnail"src="assets/img/1.jpg">
</div>
</div>
</div>
<script type="text/javascript" src="assets/js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.js"></script>
</body>
finally the output:
Try using a min-height so it will not crop from the bottom of the background image. Check the sample code given below. I have given min-height:745px in the body css tag.
body {
background-image: url(https://images.pexels.com/photos/236047/pexels-photo-236047.jpeg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
font-family: Josefin Sans Regular;
color: white;
min-height: 725px;
}
html {
height: 100%;
}
#content {
text-align: center;
text-shadow: 0px 4px 3px rgba(0,0,0,1),
0px 8px 13px rgba(0,0,0,0.1),
0px 18px 23px rgba(0,0,0,0.1);
padding-top: 25%;
}
#carHead {
text-align: center;
}
h1 {
font-weight: 700;
font-size: 5em;
}
hr {
width: 45%;
background-color: #f8f8f8;
border-top: 1px solid #f8f8f8;
border-bottom: 1px solid rgb(0,0,0.02)
}
.carousel-item {
padding: 20px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<body>
<!--head nav-->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">
<i class="fas fa-desktop"></i>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item ">
<a class="nav-link " href="#">Contact Us</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Username" aria-label="Search">
<input class="form-control mr-sm-2" type="password" placeholder="Password" aria-label="Password">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">
<i class="fa fa-user" aria-hidden="true"></i> Login
</button>
</form>
</div>
</div>
</nav>
<!--end of head nav-->
<div class="container">
<div class="row">
<div class="col-xs-12 col-lg-12">
<div id="carHead">
<h1>Example of our works</h1>
</div>
</div>
</div>
<!-- featured item carousel -->
<div id="testcar" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#testcar" data-slide-to="0" class="active"></li>
<li data-target="#testcar" data-slide-to="1"></li>
<li data-target="#testcar" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg" height="350px" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h5>Work/Template 1</h5>
<p>Use/What for</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg" height="350px" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h5>Work/Template 2</h5>
<p>Use/What for</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg" height="350px" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h5>Work/Template 3</h5>
<p>Use/What for</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#testcar" 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="#testcar" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- end of carousel-->
<div class="row">
<div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<img class="img-thumbnail"src="https://image.freepik.com/free-vector/modern-technological-elements-with-transparent-background_1035-7108.jpg">
</div>
<div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<img class="img-thumbnail"src="https://image.freepik.com/free-vector/modern-technological-elements-with-transparent-background_1035-7108.jpg">
</div>
<div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<img class="img-thumbnail"src="https://image.freepik.com/free-vector/modern-technological-elements-with-transparent-background_1035-7108.jpg">
</div>
<div class="col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12">
<img class="img-thumbnail"src="https://image.freepik.com/free-vector/modern-technological-elements-with-transparent-background_1035-7108.jpg">
</div>
</div>
</div>
<script type="text/javascript" src="assets/js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.js"></script>
</body>
You can use the object-fit property (with growing support) to have the image resize in its container. Example below:
.banner-image {
overflow: hidden;
object-fit: contain;
height: 100%;
width: 100%;
max-height: 460px;
}
The solution I found out for this is removing the 100% set height for both the body and the html. The background displays fine in the mobile view but on tablet devices, the background image will scale on the content inside the body as long as you have a high resolution background image (e.g. 6k x 4K reso).
Related
Profile hover is not working properly.
same this is working on the other page but not on the home page I have a share code snippet to check.
and if I remove the bootstrap carousel then the same code is working perfectly.
I have attached code with bootstrap carousel so you can check by removing that.
not working URL : https://pcbmagic.com/
working URL : https://pcbmagic.com/member/dashboard/cart.php
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://pcbmagic.com/assets/style.css">
<link rel="stylesheet" href="assets/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<section class="bg-light">
<div class="row pl-4 pr-4 pt-2 pb-2" style="align-items: center; box-shadow: 1px 0.5px 9px 0px rgb(188 193 192);">
<div class="col-md-2" style="align-self: center;">
<img src="https://pcbmagic.com/logo_s.png" style="height:75px;">
</div>
<div class="col-md-7">
<nav class="navbar navbar-light navbar-expand-md nav-bg-custom main-menu-bar">
<!-- Brand -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar3">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse w-100" id="collapsingNavbar3">
<ul class="navbar-nav w-100 justify-content-center">
<li class="nav-item active">
<a class="nav-link" href="/"><!--<i class="fas fa-home"></i> -->Home</a>
</li>
<!--<li class="nav-item dropdown active">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-calculator"></i> Instant Quote
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="pcb-order.php"><i class="fas fa-microchip"></i> PCB Laout</a>
<a class="dropdown-item" href="pcb-fabrication.php"><i class="fas fa-microchip"></i> PCB FABRICATION</a>
<a class="dropdown-item" href="#"><i class="fas fa-microchip"></i> PCB ASSEMBLY</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="stencil.php"><i class="fas fa-microchip"></i> STENCIL FABRICATION</a>
</div>
</li>-->
<li class="nav-item active">
<a class="nav-link" href="https://pcbmagic.com/pcb-quote.php"><!--<i class="fas fa-puzzle-piece"></i> -->PCB Assembly</a>
</li>
<!--<li class="nav-item active">-->
<!-- <a class="nav-link" href="/about-us.php">About us</a>-->
<!--</li>-->
<li class="nav-item active">
<a class="nav-link" href="/contact.php"><!--<i class="fas fa-address-book"></i>--> Contact</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="col-md-3 pr-3" style="align-self: center;">
<div class="float-right header-op">
<a href="https://pcbmagic.com/member/dashboard/cart.php" class="btn btn-sm cart-a" style="z-index: 999999;color: white !important;margin-bottom: 5px;"><img src="https://pcbmagic.com/assets/img/cart.png" class="cart">
<span class="cart-number" id="cart_count">
2 </span>
</a>
<div class="dropdown-log">
<span>Hi,Vishal<i class="pl-2 fas fa-chevron-down"></i></span>
<div class="dropdown-log-content">
<div class="bg-dark py-2 mb-2">
<div class="p-img">
</div>
<h6 class="text-center text-light">Vishal Vishwakarma</h6>
<p class="text-center text-light" style="font-size:12px;">webadmin#championsemi.com</p>
</div>
<p>Dashboard</p>
<p>My Order</p>
<p>Production Status</p>
<p>Help Center</p>
<p>Logout</p>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html><!DOCTYPE html>
<html>
<head>
</head>
<body>
<section class="">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<!--<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>-->
</ol>
<div class="carousel-inner" style="border: 1px solid #dedede;">
<div class="carousel-item active">
<img class="d-block w-100" src="assets/img/s1.png" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="assets/img/t2.png" alt="Second slide">
</div>
<!--<div class="carousel-item">
<img class="d-block w-100" src="https://pcbwayfile.s3-us-west-2.amazonaws.com/banner/21/03/25/1808173691783t.jpg" alt="Third slide">
</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>
</section>
</body>
</html>
<style>
#media screen and (max-width: 767px) {
.mobile-space {margin-top:35px;}
.carousel-inner img {height: 135px;}
.dropdown-log-content{z-index:999999;}
}
</style>
<section class="pt-5 ft-text-link" style="background:#1b1b1b;color:white;font-size:14px;box-shadow: 0px -3px 2px #1b1b1b;">
<div class="container-fluid pl-5 pr-5">
<div class="row">
<div class="col-md-3">
<h6>Business</h6>
<ul class="ft-list">
<li class="">Electronics / Semiconductors</li>
<li class="">Industrial Design Services</li>
<li class="">PCB/PCB-A</li>
<li class="">Display and Signage Systems</li>
<li class="">IoT Solutions</li>
<li class="">Medical Electronics</li>
</ul>
</div>
<div class="col-md-3">
<h6>Important Links</h6>
<ul class="ft-list">
<li class="">Careers # ChampionSemi</li>
<li class="">Ecosystem</li>
<li class="">For Investors</li>
<li class="">Legals</li>
<li class="">Contact us</li>
</ul>
</div>
<div class="col-md-3">
</div>
<div class="col-md-3 newsletter">
<p class="text-center">Would you like to know what’s happening at the forefront of semiconductor and electronics at ChampionSemi? Sign up and receive the latest updates.</p>
<div class="mt-2" style="height:36px;">
<center><input class="m-width-100 m-mb-5 w-50" type="text" name="">
<a href="#" class="btn btn-o btn-sm m-width-100 w-50" style="font-size: 12px;
padding: 4px !important;">Subscribe Now</a></center>
</div>
</div>
</div>
<div class="row mobile-space">
<div class="col-md-3">
<p class="mb-1">Payment Methods</p>
<img style="height:23.5px;" src="https://pcbmagic.com/assets/img/payment-mode.png">
</div>
<div class="col-md-3">
<p class="mb-1">Delivery Services</p>
<img style="height:23.5px;" src="https://pcbmagic.com/assets/img/delivery-mode.png">
</div>
<div class="col-md-4">
</div>
</div>
</div>
<div class="container-fluid pl-4 pb-2 pr-4">
<hr style="background:#ffffff21;width:100% !important;margin-top: 10px;">
<div class="row">
<div class="col-md-6">
<!--<center class="m-display" style="display:none;"><img class="m-display-block" src="https://geocon.in/smartnet/logo-ft.png" style="height:27px;"></center> -->
<p class="pl-1 m-text-center"><!--<img class="m-hide" src="https://geocon.in/smartnet/logo-ft.png" style="height:27px;">--> PCBMagic © 2021 | Champion Semiconductor LLP | Terms of use | Privacy Policy </p>
</div>
<div class="col-md-6 ft-fa text-right follow-ft">
<p class="m-text-center">Follow us
<i class="fab fa-facebook"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</p>
</div>
</div>
</div>
</section>
you have to add z-index property to your .dropdown-log-content class. as below
.dropdown-log-content
{
z-index: 9999999 !important;
}
I'm trying to do a footer for my page, but I wanted to do this footer with the dynamic height attribute, this to better accommodate the content in smaller windows, I found that I should use flex for this. Everything works fine in Chrome and Edge but IE breaks the design, the footer is pushed so far down.
This is an example of how the page looks like in Chrome and Edge
And this in IE
I am using the bootstrap 4.5 carousel and this is the CSS that I am using for the footer.
html{
display:flex;
}
body{
min-height: 100vh;
width:100%;
display:flex;
flex-direction:column;
}
.header{
flex-shrink: 0;
}
.footer {
flex-shrink: 0;
background: #000000;
}
.content{
flex-grow:1;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="header">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="content">
<div class="ml-5 mr-5 mb-3">
<!--Carousel-->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://cp12.nevsepic.com.ua/2-1/1358115669-1037168-www.nevsepic.com.ua.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://cp12.nevsepic.com.ua/2-1/1358115669-1037168-www.nevsepic.com.ua.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://cp12.nevsepic.com.ua/2-1/1358115669-1037168-www.nevsepic.com.ua.jpg" alt="Third slide">
</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>
<!--Cards-->
<div class="card-deck">
<div class="card">
<img src="https://lh3.googleusercontent.com/proxy/VrXfgT75SzZSdv4_fUbujEBcWspapF079o24SolSQXCa2SS6ZV5TGxosjjj5DUJEco351bmm1HfHdMo7c3P9vTTP2ZUO0bVlxs4s9SeVKu7OavwktBNL" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="https://lh3.googleusercontent.com/proxy/VrXfgT75SzZSdv4_fUbujEBcWspapF079o24SolSQXCa2SS6ZV5TGxosjjj5DUJEco351bmm1HfHdMo7c3P9vTTP2ZUO0bVlxs4s9SeVKu7OavwktBNL" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="https://lh3.googleusercontent.com/proxy/VrXfgT75SzZSdv4_fUbujEBcWspapF079o24SolSQXCa2SS6ZV5TGxosjjj5DUJEco351bmm1HfHdMo7c3P9vTTP2ZUO0bVlxs4s9SeVKu7OavwktBNL" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row text-center justify-content-center pt-3">
<div class="col-md-3 mb-3">
<h6>
<a class="text-smr" href="#">Ohter Sites:</a>
</h6>
</div>
<div class="col-md-2 mb-3">
<h6 class="font-weight-bold">
<a class="link-f" href="#">Site 1</a>
</h6>
</div>
<div class="col-md-2 mb-3">
<h6>
<a class="link-f" href="#">Site 2</a>
</h6>
</div>
<div class="col-md-2 mb-3">
<h6>
<a class="link-f" href="#">Site 3</a>
</h6>
</div>
<div class="col-md-2 mb-3">
<h6>
<a class="link-f" href="#">Site 4</a>
</h6>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
Hay.
When you open this page on mobile phone footer is not on the bottom of the page. When I open inspect on browser i see that tag goes on, not stopping on footer. I tried add HTML {height:100%;} and HTML {max-height:100%;} in CSS file but nothing happen. On the image you can see what is the problem. >This is only happening on this page, I have other pages on website and I don't have this problem.
Preview on mobile version
This is my code:
CSS
.map-container {
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
height: 0;
}
.map-container iframe {
left: 0;
top: 0;
height: 100%;
width: 100%;
position: absolute;
}
.navigacija-link {
color: #dcfd50 !important;
font-weight: 700;
font-size: larger;
}
.navigacija-link:hover {
color: white !important;
font-weight: 700;
font-size: larger;
text-decoration: underline !important;
}
.navigacija-podlink {
color: #dcfd50 !important;
font-weight: 500;
font-size: large;
}
.navigacija-podlink:hover {
color: black !important;
font-weight: 500;
font-size: large;
text-decoration: underline !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vijest | TK Pazin</title>
<link href="css/style.css" rel="stylesheet" />
<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">
</head>
<body style="background-color: #dcfd50;">
<nav class="navbar navbar-expand-lg fixed-top navbar-light" style="background-color: #ba3631;">
<a class="navbar-brand" href="index.html">
<img src="img/logo.jpg" width="50" height="50" class="d-inline-block align-top" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link navigacija-link" href="index.html">Novosti</a>
</li>
<li class="nav-item">
<a class="nav-link navigacija-link" href="pojedinacni-turniri.html">Pojedinačni turniri</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle navigacija-link" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Rang liste
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink" style="background-color: #ba3631;">
<a class="dropdown-item navigacija-podlink" href="rang-liste/pojedinacni-turniri.html">Pojedinačni turniri</a>
<a class="dropdown-item navigacija-podlink" href="rang-liste/piramida.html">Piramida</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link navigacija-link" href="o-klubu.html">O klubu</a>
</li>
<li class="nav-item">
<a class="nav-link navigacija-link" href="galerija.html">Galerija</a>
</li>
<li class="nav-item">
<a class="nav-link navigacija-link" href="kontakt.html">Kontakt</a>
</li>
</ul>
</div>
<span class="navbar-text">
<b style="font: italic bold 2vw Georgia, serif; color: whitesmoke;">TK Pazin</b>
</span>
</nav>
<div style="margin-bottom: 75px;"></div>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/karosel/2.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/karosel/3.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/karosel/4.jpg" class="d-block w-100" alt="...">
</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">Prethodni</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">Sljedeći</span>
</a>
</div>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-4" style="margin-top: 25px; max-width: 184px;">Povratak na početnu stranicu</div>
</div>
<div class="row">
<div class="col-12">
<h1 class="my-4" style="text-align:center; color: #ba3631;">Vijest</h1>
</div>
</div>
<div class="col-12 mb-4">
<div class="card h-100">
<img class="card-img-top" src="img/vijesti.jpg" alt="vijest">
<div class="card-body">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
<h6>Izrađeno: 5.5.2016.</h6>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<footer id="sticky-footer" class="py-4 bg-dark text-white-50">
<div class="container text-center">
<small>Rezervacija terena: 098 434 133</small>
<br>
<small>Copyright © 2019 Tenis klub Pazin - Sva prava pridržana</small>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Try this flex-direction: column; for body and margin-top: auto; for footer
.map-container {
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
height: 0;
}
body{
min-height: 100vh;
display: flex;
flex-direction: column;
}
footer{
margin-top: auto;
}
.map-container iframe {
left: 0;
top: 0;
height: 100%;
width: 100%;
position: absolute;
}
.navigacija-link {
color: #dcfd50 !important;
font-weight: 700;
font-size: larger;
}
.navigacija-link:hover {
color: white !important;
font-weight: 700;
font-size: larger;
text-decoration: underline !important;
}
.navigacija-podlink {
color: #dcfd50 !important;
font-weight: 500;
font-size: large;
}
.navigacija-podlink:hover {
color: black !important;
font-weight: 500;
font-size: large;
text-decoration: underline !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vijest | TK Pazin</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/style.css" rel="stylesheet" />
<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">
</head>
<body style="background-color: #dcfd50;">
<nav class="navbar navbar-expand-lg fixed-top navbar-light" style="background-color: #ba3631;">
<a class="navbar-brand" href="index.html">
<img src="img/logo.jpg" width="50" height="50" class="d-inline-block align-top" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link navigacija-link" href="index.html">Novosti</a>
</li>
<li class="nav-item">
<a class="nav-link navigacija-link" href="pojedinacni-turniri.html">Pojedinačni turniri</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle navigacija-link" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Rang liste
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink" style="background-color: #ba3631;">
<a class="dropdown-item navigacija-podlink" href="rang-liste/pojedinacni-turniri.html">Pojedinačni turniri</a>
<a class="dropdown-item navigacija-podlink" href="rang-liste/piramida.html">Piramida</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link navigacija-link" href="o-klubu.html">O klubu</a>
</li>
<li class="nav-item">
<a class="nav-link navigacija-link" href="galerija.html">Galerija</a>
</li>
<li class="nav-item">
<a class="nav-link navigacija-link" href="kontakt.html">Kontakt</a>
</li>
</ul>
</div>
<span class="navbar-text">
<b style="font: italic bold 2vw Georgia, serif; color: whitesmoke;">TK Pazin</b>
</span>
</nav>
<div style="margin-bottom: 75px;"></div>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/karosel/2.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/karosel/3.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/karosel/4.jpg" class="d-block w-100" alt="...">
</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">Prethodni</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">Sljedeći</span>
</a>
</div>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-4" style="margin-top: 25px; max-width: 184px;">Povratak na početnu stranicu</div>
</div>
<div class="row">
<div class="col-12">
<h1 class="my-4" style="text-align:center; color: #ba3631;">Vijest</h1>
</div>
</div>
<div class="col-12 mb-4">
<div class="card h-100">
<img class="card-img-top" src="img/vijesti.jpg" alt="vijest">
<div class="card-body">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
<h6>Izrađeno: 5.5.2016.</h6>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<footer id="sticky-footer" class="py-4 bg-dark text-white-50">
<div class="container text-center">
<small>Rezervacija terena: 098 434 133</small>
<br>
<small>Copyright © 2019 Tenis klub Pazin - Sva prava pridržana</small>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Add this meta tag in your html file in head section.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Please add this code in css:
footer {
position: absolute;
bottom: 0;
width: 100%;
}
I want to have a nav-bar at the top of my page. Below that I want my carousel which should always take up the entire remaining screen.
This is my navbar:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/artworks">Artworks</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/collection">Fashion Collection</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/blog">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">About me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">Contact me</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<a class="navbar-brand" href="/">
<img src="/images/logo.png" height="30" class="d-inline-block align-top" alt="">
</a>
</form>
</div>
</nav>
and this is my carousel:
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel" data-interval="5000">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="3"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="4"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="/images/test.jpg" class="d-block w-100" alt="...">
<a href="/artworks">
<div class="carousel-caption d-none d-md-block carousel-title ">
<h1>Get to my artworks...</h1>
<p>Lorem ipsum dolor sit amet</p>
</div>
</a>
</div>
<div class="carousel-item">
<img src="/images/test.jpg" class="d-block w-100" alt="...">
<a href="/collection">
<div class="carousel-caption d-none d-md-block carousel-title">
<h1>Get to my fashion collection...</h1>
<p>Lorem ipsum dolor sit amet </p>
</div>
</a>
</div>
<div class="carousel-item">
<img src="/images/test.jpg" class="d-block w-100" alt="...">
<a href="/blog">
<div class="carousel-caption d-none d-md-block carousel-title">
<h1>Get to my blog...</h1>
<p>Lorem ipsum dolor sit amet</p>
</div>
</a>
</div>
<div class="carousel-item">
<img src="/images/test.jpg" class="d-block w-100" alt="...">
<a href="/about">
<div class="carousel-caption d-none d-md-block carousel-title">
<h1>Read some stuff about me...</h1>
<p>Lorem ipsum dolor sit amet</p>
</div>
</a>
</div>
<div class="carousel-item">
<img src="/images/test.jpg" class="d-block w-100" alt="...">
<a href="/contact">
<div class="carousel-caption d-none d-md-block carousel-title">
<h1>Contact me...</h1>
<p>Lorem ipsum dolor sit amet</p>
</div>
</a>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" 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="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
More or less these snippets are directly taken from the bootstrap website. Those are just adjusted for my purposes. So how do I make the carousel take up the entire screen below the nav-bar? Any ideas?
Add this css
.carousel { height: calc(100vh - 56px);}
.carousel-inner,.carousel-item { height: 100%;}
.carousel-item { background-color: #000;}
.carousel-item img { height: 100%; object-fit: cover; object-position: center;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/artworks">Artworks</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/collection">Fashion Collection</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/blog">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about">About me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">Contact me</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<a class="navbar-brand" href="/">
<img src="/images/logo.png" height="30" class="d-inline-block align-top" alt="">
</a>
</form>
</div>
</nav>
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel" data-interval="5000">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="3"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="4"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://via.placeholder.com/600" class="d-block w-100" alt="...">
<a href="/artworks">
<div class="carousel-caption d-none d-md-block carousel-title ">
<h1>Get to my artworks...</h1>
<p>Lorem ipsum dolor sit amet</p>
</div>
</a>
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/600" class="d-block w-100" alt="...">
<a href="/collection">
<div class="carousel-caption d-none d-md-block carousel-title">
<h1>Get to my fashion collection...</h1>
<p>Lorem ipsum dolor sit amet </p>
</div>
</a>
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/600" class="d-block w-100" alt="...">
<a href="/blog">
<div class="carousel-caption d-none d-md-block carousel-title">
<h1>Get to my blog...</h1>
<p>Lorem ipsum dolor sit amet</p>
</div>
</a>
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/600" class="d-block w-100" alt="...">
<a href="/about">
<div class="carousel-caption d-none d-md-block carousel-title">
<h1>Read some stuff about me...</h1>
<p>Lorem ipsum dolor sit amet</p>
</div>
</a>
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/600" class="d-block w-100" alt="...">
<a href="/contact">
<div class="carousel-caption d-none d-md-block carousel-title">
<h1>Contact me...</h1>
<p>Lorem ipsum dolor sit amet</p>
</div>
</a>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" 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="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Image ratio isn't the same viewport ratio. It very difficult to make this work without using background images...
You need to consider what happens when the viewport and image ratios are not equal...
Do you want the images to be clipped off screen?
Shrink to fit screen width or height (required to maintain aspect ratio)?
Stretch to fit (resulting in warped images that lose aspect ratio)?
Option 1
In order to make the carousel fill the remaining height under that navbar, use flex-grow:1. Then, clip the image sides when they're too wide for the screen (viewport width). This allows the images to fill height, but not lose their aspect ratio.
Demo: https://www.codeply.com/p/5QnXTjbOFL
CSS
/* make active item container fill height of viewport using flexbox */
.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
flex: 1 0 100%;
}
/* fix transitioning item height */
.carousel-item-next:not(.carousel-item-left),
.active.carousel-item-right,
.carousel-item-prev:not(.carousel-item-right),
.active.carousel-item-left {
flex: 0 0 0;
}
/* make images fill height and width or clip */
.carousel-item {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.img-1 {
background-image: url(..);
}
.img-2 {
background-image: url(..);
}
HTML
<div class="container-fluid d-flex min-vh-100 flex-column px-0 justify-content-center">
<nav class="navbar navbar-expand-md navbar-light bg-light flex-shrink-0">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar1">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbar1">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
<div id="carouselExampleControls" class="carousel slide flex-fill d-flex flex-column justify-content-center" data-ride="carousel">
<div class="carousel-inner flex-fill d-flex flex-column">
<div class="carousel-item active img-1">
</div>
<div class="carousel-item mg-2">
</div>
</div>
</div>
</div>
Option 2
If you must use images, you can get object-fit to work without using the flexbox that was used in Option 1. Use calc to determine the height of the carousel (minus the Navbar height of 56px). This will prevent vertical scrollbar...
/* make images fill height and width or clip */
.carousel-item > img {
object-fit: cover;
height: calc(100vh - 56px);
width: 100%;
}
Demo 2: https://www.codeply.com/p/HR6phylC7q
Also see: Bootstrap Carousel Full Screen
I am learning Bootstrap 3 and have a simple page I am working on that only consist of a top nav bar, carousel, and footer.
The page looks OK at desktop size. When it shrinks to mobile size I have too much white space. If I have to add more content to fill it I will but is there an alternative to avoid doing that. I like the simpleness with just the carousel.
Is there a way to make it look nice on a mobile the way I have it?
<div class="container">
<div class="row clearfix">
<div class="col-xs-12 column">
<!-- Fixed navbar -->
<div class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">About
</li>
<li>Contact
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>
</div>
</div>
<div class="container">
<br />
<!-- Begin page content -->
<div class="row clearfix">
<div class="col-xs-12 column">
<div class="carousel slide" id="carousel-491568">
<!-- <ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#carousel-491568">
</li>
<li data-slide-to="1" data-target="#carousel-491568">
</li>
<li data-slide-to="2" data-target="#carousel-491568">
</li>
</ol> -->
<div class="carousel-inner">
<div class="item">
<img src="http://placehold.it/1200x315" alt="...">
<!--<div class="carousel-caption">
<h2>NEW Client!</h2>
<p></p>
</div> --></div>
<div class="item">
<img src="http://placehold.it/1200x315" alt="...">
<!-- <div class="carousel-caption">
<h4>Second Thumbnail label</h4>
<p></p>
</div> --></div>
<div class="item active">
<img src="http://placehold.it/1200x315" alt="...">
<!-- <div class="carousel-caption">
<h4>Third Thumbnail label</h4>
<p> </p>
</div> --></div>
</div> <a class="left carousel-control" href="#carousel-491568" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> <a class="right carousel-control" href="#carousel-491568" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row clearfix">
<div class="col-xs-12 column">
<div id="footer">
<div class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
<div class="navbar-text pull-left">
<!--<p class="footer-block">Footer</p> -->
<p><i class="fa fa-envelope fa-1x"> Questions?</i> | <i class="fa fa-mobile fa-1x"> (740) 564-9876</i>
</p>
<p>Copy Here</p>
</div>
<div class="navbar-text pull-right"> <a class="btn btn-social-icon btn-facebook" href="#" target="_blank">
<i class="fa fa-facebook"></i>
</a>
<a class="btn btn-social-icon btn-linkedin" href="#" target="_blank">
<i class="fa fa-linkedin"></i>
</a>
<a class="btn btn-social-icon btn-twitter" href="#" target="_blank">
<i class="fa fa-twitter"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
Fiddle demo
I suggest to modify the classic carousel html script using a background image and adjusting the size in your css file accordingly.
here you will find an html example:
<div class="container">
<!-- Header Carousel -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="fill" style="background-image:url('https://placeimg.com/1440/810/any');"></div>
<div class="carousel-caption">
</div>
</div>
<div class="item">
<div class="fill" style="background-image:url('https://placeimg.com/1440/810/any');"></div>
<div class="carousel-caption">
</div>
</div>
<div class="item">
<div class="fill" style="background-image:url('https://placeimg.com/1440/810/any');"></div>
<div class="carousel-caption">
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
</div>
and your css example code:
/* CSS used here will be applied after bootstrap.css */
/* -------carousel slides----*/
.carousel-control.right, .carousel-control.left {
background-image: none;
}
.carousel-indicators {
bottom:-50px;
}
.carousel-indicators li {
border-color: #C0C0C0;
}
.carousel-indicators .active {
background-color: #c0c0c0;
}
.carousel-inner {
margin-bottom:50px;
}
.carousel .item{
height: 400px;
}
.item img {
position: absolute;
top: 0;
left: 0;
min-height: 400px;
}
.carousel .fill {
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
}
Bootply example