ripped guy
Reputation: 115
Responsive Design Width Issue
Till Large BreakPoint everything works fine but as soon as I enter Medium & Small BreakPoints Cards that I have created doesn't take much space on the right side of the page leaving it blank.
I Tried col-sm-12, col-sm-6,col-md-12,col-md-6 .... everything but nothing worked. (I am New To this stuff)
I am using bootstrap version 4.5.0
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/9890999e8e.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,400;1,300&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Roboto Condensed', sans-serif;
}
.navbar-custom {
background-color: black !important;
}
.jumbotron {
text-align: center !important;
padding-top: 100px !important;
background: url(1.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
color: whitesmoke;
}
.card {
margin-bottom: 50px !important;
}
</style>
<title>Patterns</title>
</head>
<body>
<nav class="navbar fixed-top navbar-custom navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#" style="color: aliceblue;"><i class="fas fa-binoculars " ></i> Patterns</a>
</div>
</nav>
<div class="jumbotron">
<h1 class="display-4">Pattern</h1>
<p class="lead"> Beef ribs spare ribs andouille picanha ham hock ham.</p>
<button type="button" class="btn btn-primary">Do something</button>
<button type="button" class="btn btn-success">Do anotherthing</button>
</div>
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="card" style="width: 18rem;">
<img src="6.jpg" class="card-img-top" alt="laptop">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-outline-success">Download</a>
<a href="#" class="btn btn-outline-danger"><i class="far fa-heart"></i></a>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card" style="width: 18rem;">
<img src="6.jpg" class="card-img-top" alt="laptop">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-outline-success">Download</a>
<a href="#" class="btn btn-outline-danger"><i class="far fa-heart"></i></a>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card" style="width: 18rem;">
<img src="6.jpg" class="card-img-top" alt="laptop">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-outline-success">Download</a>
<a href="#" class="btn btn-outline-danger"><i class="far fa-heart"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>I made a test page before and it worked fine using col-md and col-sm, I don't know what is creating problem this time.
Upvotes: 0
Views: 42
Answers (1)
godfather
Reputation: 1563
the cards are taking 18rem width i just override it with width:100%;
.card {
width: 100%!important;
}<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/9890999e8e.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,400;1,300&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Roboto Condensed', sans-serif;
}
.navbar-custom {
background-color: black !important;
}
.jumbotron {
text-align: center !important;
padding-top: 100px !important;
background: url(1.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
color: whitesmoke;
}
.card {
margin-bottom: 50px !important;
}
</style>
<title>Patterns</title>
</head>
<body>
<nav class="navbar fixed-top navbar-custom navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#" style="color: aliceblue;"><i class="fas fa-binoculars " ></i> Patterns</a>
</div>
</nav>
<div class="jumbotron">
<h1 class="display-4">Pattern</h1>
<p class="lead"> Beef ribs spare ribs andouille picanha ham hock ham.</p>
<button type="button" class="btn btn-primary">Do something</button>
<button type="button" class="btn btn-success">Do anotherthing</button>
</div>
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="card" style="width: 18rem;">
<img src="6.jpg" class="card-img-top" alt="laptop">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-outline-success">Download</a>
<a href="#" class="btn btn-outline-danger"><i class="far fa-heart"></i></a>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card" style="width: 18rem;">
<img src="6.jpg" class="card-img-top" alt="laptop">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-outline-success">Download</a>
<a href="#" class="btn btn-outline-danger"><i class="far fa-heart"></i></a>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card" style="width: 18rem;">
<img src="6.jpg" class="card-img-top" alt="laptop">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-outline-success">Download</a>
<a href="#" class="btn btn-outline-danger"><i class="far fa-heart"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>Upvotes: 3
Related Questions
- Responsive CSS Div Width
- Width attribute not acting properly on my webpage
- css responsive design having difficulty accessing width with javascript
- Cross-browser compatibility width issue
- Responsive screen size
- Responsive widths
- web page responsiveness issues, width not scaling
- Max-width responsive width issues
- Trouble defining width of a responsive div
- Problems with width, responsive mobile design