---------//////Question starts here/////---------------
I am trying to make all of my Bootstrap 5 cards even in standard view and responsive to mobile devices, but adjusting the height in CSS does not seem to work. Right now it is responsive, but the pictures are all stretched out. As far as the card's height they are all different sizes. I tried grabbing the card-text "class" and using truncate but it doesn't seem to help either. I feel like I'm so close. Im almost positive it has to do with the card-text class. Any thoughts? I've attached a picture to this question, and here is my code below:
<!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>Portfolio Projects</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/bootstrap.min (15).css" />
</head>
<body>
<!-- ===================== NavBar Starts from here====================== -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">CHAZZY!</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-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">
<a
class="nav-link active"
aria-current="page"
href="../index.html"
>Home</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="../About/index.html"
>About</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="../Projects/index.html"
>Projects</a
>
</li>
<li class="nav-item">
<a class="nav-link" href="https://chaz-carothers.netlify.app"
>Tree.Link</a
>
</li>
<li class="nav-item">
<a
class="nav-link"
href="../Contact/index.html"
tabindex="-1"
aria-disabled="true"
>Contact</a
>
</li>
</ul>
</div>
</div>
</nav>
<!-- ================== NavBar Ends ========================== -->
<!-- ========================== Project Cards ======================== -->
<div class="container">
<div class="row">
<div class="col-sm mt-5 mb-5">
<div class="card" style="width: 18rem">
<img src="../Projects/img/weather.jpeg" alt="Weather" />
<div class="card-body">
<h5 class="card-title">Weather API</h5>
<p class="card-text">
This is a weather app I created using the ___ API. I added
several other weather resources to provide extra information.
</p>
<a
href="../WEATHER API/index.html"
class="
btn btn-primary
row
d-flex
justify-content-center
align-content-center
"
>CLICK HERE</a
>
</div>
</div>
</div>
<div class="col-sm mt-5 mb-5">
<div class="card" style="width: 18rem">
<img
src="../Projects/img/Skeletorrr.png"
class="card- img-top"
alt="skeletor"
/>
<div class="card-body">
<h5 class="card-title.text-truncate">Whack-A-Skeletor</h5>
<p class="card-text">
This is my version of a Whack-A-Mole game that I created using plain vanilla JavaScript.
Skeletor is the mole, and the game has background music to the Price Is Right. Once the user
is finished playing, Vincent Price's notorious laugh chimes in at the end.
</p>
<a
href="https://pedantic-swartz-521f4d.netlify.app"
class="
btn btn-primary
row
d-flex
justify-content-center
align-content-center
"
>CLICK HERE</a
>
</div>
</div>
</div>
<div class="col-sm mt-5 mb-5">
<div class="card" style="width: 18rem">
<img
src="./img/badguys.png"
class="card- img-top"
alt="villain"
/>
<div class="card-body">
<h5 class="card-title">Disney Villain Page</h5>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore.
</p>
<a
href="https://dizney.netlify.app"
class="
btn btn-primary
row
d-flex
justify-content-center
align-content-center
"
>CLICK HERE</a
>
</div>
</div>
</div>
<div class="col-sm mt-5 mb-5">
<div class="card" style="width: 18rem">
<img
src="../Projects/img/memory.jpeg"
class="card- img-top"
alt="memory"
/>
<div class="card-body">
<h5 class="card-title.text-truncate">Harry Potter Memory Game</h5>
<p class="card-text">
My 7 year old son's favorite movie is Harry Potter, so I programmed a memory game for him using JavaScript.
</p>
<a
href="../Projects/Memory Game/index.html"
class="
btn btn-primary
row
d-flex
justify-content-center
align-content-center
"
>CLICK HERE</a
>
</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"
></script>
<!-- JavaScript Bundle with Popper -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
</body>
</html>
-----------------/////And here is my CSS//// -------------
body {
background-color: gray;
}
.card {
transition: border-color 1s, box-shadow 0.5s;
}
.card:hover {
border-color: rgb(255, 0, 0);
box-shadow: 0px 0px 10px 2px rgb(255, 0, 0);
}
.card-title {
display: flex;
justify-content: center;
}
.film {
font-size: 3rem;
}
#media all and (max-width: 600px) {
.film {
font-size: 2rem;
}
.card {
width: 100%;
}
.card-title {
font-size: 1.5rem;
}
.img-card {
width: 100%;
}
}
Related
I'm trying to align these badges side by side but am having trouble doing so. inline-block doesn't seem to work and it's always stacked on top of eachother instead of side by side
How do I align it like the picture below?
this is what I'm trying to have it look like:
.tgr_card span {
display: block;
width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
<!doctype html>
<!-- <html lang="en" data-bs-theme="dark"> -->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.3/font/bootstrap-icons.css">
</head>
<body>
<div class="card tgr_card" style="width: 30rem;">
<div class="card-body">
<h5 class="card-title d-flex justify-content-between align-items-center">
Name
<div class="text-end">
<button type="button" class="btn-close" aria-label="Close"></button>
</div>
</h5>
<h6 class="card-subtitle mb-2 text-muted">#x</h6>
<br>
<ul class="list-group list-group-flush tgr_card_ul">
<li class="list-group-item d-flex justify-content-between align-items-center">
Name
<span class="badge bg-primary rounded-2">test</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Min Max
<div class="row">
<div class="col">
<span class="badge bg-primary rounded-2">1</span>
</div>
<div class="col">
<span class="badge bg-primary rounded-2">None</span>
</div>
</div>
<!-- <div>
<span class="badge bg-primary rounded-2">1</span>
<span class="badge bg-primary rounded-2">None</span>
</div> -->
<!-- <span class="badge bg-primary rounded-2">1 | None</span> -->
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Name
<span class="badge bg-primary rounded-2">test</span>
</li>
</ul>
</div>
<div class="card-footer text-muted text-center">
footer
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>
using bootstrap v5.3.0 alpha-1
edit: it's side by side in the snippet but what I mean is that it's side by side and the same size as the full width badge above/below (see attached picture) - so both badges are like 50% width and uniform with the above/below badges
.tgr_card span {
display: block;
width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.half{
width: 150px;
}
.half span{
width: 49%;
}
<!doctype html>
<!-- <html lang="en" data-bs-theme="dark"> -->
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.3/font/bootstrap-icons.css">
</head>
<body>
<div class="card tgr_card" style="width: 30rem;">
<div class="card-body">
<h5 class="card-title d-flex justify-content-between align-items-center">
Name
<div class="text-end">
<button type="button" class="btn-close" aria-label="Close"></button>
</div>
</h5>
<h6 class="card-subtitle mb-2 text-muted">#x</h6>
<br>
<ul class="list-group list-group-flush tgr_card_ul">
<li class="list-group-item d-flex justify-content-between align-items-center">
Name
<span class="badge bg-primary rounded-2">test</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Min Max
<div class="half d-flex justify-content-between align-items-center ">
<span class="badge bg-primary rounded-2">1</span>
<span class="badge bg-primary rounded-2">None</span>
</div>
<!-- <div>
<span class="badge bg-primary rounded-2">1</span>
<span class="badge bg-primary rounded-2">None</span>
</div> -->
<!-- <span class="badge bg-primary rounded-2">1 | None</span> -->
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Name
<span class="badge bg-primary rounded-2">test</span>
</li>
</ul>
</div>
<div class="card-footer text-muted text-center">
footer
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>
I'm working on an assignment and I'm only allowed to use HTML, CSS & Bootstrap. I started my project and everything went well until I noticed there's a gap on the right side of my container. Why is this and how can I remove it? Thanks in advance!
HTML:
<!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>Tarea Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Saira+Condensed&display=swap" rel="stylesheet">
</head>
<body>
<div class="container-fluid" style="padding-left: 0; padding-right: 0;">
<!-- Header -->
<header></header>
<nav class="navbar justify-content-center navbar-dark bg-dark">
<div>
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
Home
</li>
<li class="nav-item">
Pet Care
</li>
<li class="nav-item">
Volunteer
</li>
<li class="nav-item">
Adopt an friend!
</li>
<li class="nav-item">
Donate
</li>
<li class="nav-item">
Contact us
</li>
</ul>
</div>
</nav>
<main>
<div class="row row-cols-1 sec1 box">
<div class="col">
<img class="img-fluid rounded mx-auto mt-5 d-block" src="/img/logo.png">
</div>
</div>
<div class="row row-cols-1 sec2 box" style="width: 100%;">
<div class="col mt-3">
<h1>Who we are:</h1>
</div>
<div class="col mb-5 text-center">
<p>The New Hope Animal Shelter NHAS is a registered charity that has been operating for 150 years. The Society provides care, comfort and compassion to animals in need in communities across the country. It values all animals and advocates to treat them with respect and kindness. The Society strives to keep pets and families together and do so through a variety of community support services, such as sheltering and adoptions, including emergency sheltering, feral cat management programs, animal transfers, food distribution, humane education, animal advocacy, and spay/neuter services. The NHAS does not receive annual government funding and relies on donations to provide programs and services to help animals in need.</p>
</div>
</div>
<div class="row row-cols-1 sec3 box">
<div class="col align-self-center">
<h1>Compassion for animals is intimately connected with goodness of character; and it may be confidently asserted that he who is cruel to animals cannot be a good man.</h1>
<p>-S. Chopenhauer</p>
</div>
</div>
<div class="row row-cols-1 sec4 box">
<div class="col">
<h1>From our Supporters</h1>
</div>
<div id="carouselExampleControls" class="col carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/carousel1.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/carousel2.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://images.pexels.com/photos/540518/pexels-photo-540518.jpeg" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</main>
<section>
</section>
<footer>
<p></p>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>
CSS:
html{
height: 100%;
width: 100%;
}
body{
background-color: #116D44;
background-position: center;
}
header{
align-items: center;
}
nav{
font-family: 'Saira Condensed', sans-serif;
}
.box{
width: 100%;
height: 600px;
padding: 40px 60px;
color: white;
font-family: 'Saira Condensed', sans-serif;
text-align: center;
}
.box h1{
font-family: 'Anton', sans-serif;
font-size: 50px;
text-shadow: 0px 0px 5px #000;
}
.box p{
font-size: 25px;
margin-top: 100px;
}
.sec1{
height: 100vh;
background-image: url(/img/indexbg1.jpg);
background-attachment: fixed;
background-size: cover;
}
.sec2{
background: #28689c;
}
.sec3{
height: 100vh;
background-image: url(/img/indexbg2.jpg);
background-attachment: fixed;
background-size: cover;
}
.carousel{
width: 640px;
height: 360px;
margin: 0 auto;
}
.carousel-inner img{
width: 640px;
height: 360px;
}
.sec4{
background: #546C08;
}
In order to remove the gap on the right, I tried to set the "max-width: unset", "overflow-x: hidden; width: 100vw;" on the body, "padding-right: 0; margin-right: 0;" on my .row classes, adding "img-fluid" to the images in my carousel, setting margin, padding and width to 0, 0 & 100vw respectively, setting "box-sizing: border-box;" on my html and "margin: 0;" on the body but to no avail.
Just remove margin-left on the row class.
html {
height: 100%;
width: 100%;
}
body {
background-color: #116D44;
background-position: center;
}
header {
align-items: center;
}
nav {
font-family: 'Saira Condensed', sans-serif;
}
.box {
width: 100%;
height: 600px;
padding: 40px 60px;
color: white;
font-family: 'Saira Condensed', sans-serif;
text-align: center;
}
.box h1 {
font-family: 'Anton', sans-serif;
font-size: 50px;
text-shadow: 0px 0px 5px #000;
}
.box p {
font-size: 25px;
margin-top: 100px;
}
.sec1 {
height: 100vh;
background-image: url(/img/indexbg1.jpg);
background-attachment: fixed;
background-size: cover;
}
.sec2 {
background: #28689c;
}
.sec3 {
height: 100vh;
background-image: url(/img/indexbg2.jpg);
background-attachment: fixed;
background-size: cover;
}
.carousel {
width: 640px;
height: 360px;
margin: 0 auto;
}
.carousel-inner img {
width: 640px;
height: 360px;
}
.sec4 {
background: #546C08;
}
main .row {
margin-left: 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>Tarea Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Saira+Condensed&display=swap" rel="stylesheet">
</head>
<body>
<div class="container-fluid" style="padding-left: 0; padding-right: 0;">
<!-- Header -->
<header></header>
<nav class="navbar justify-content-center navbar-dark bg-dark">
<div>
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
Home
</li>
<li class="nav-item">
Pet Care
</li>
<li class="nav-item">
Volunteer
</li>
<li class="nav-item">
Adopt an friend!
</li>
<li class="nav-item">
Donate
</li>
<li class="nav-item">
Contact us
</li>
</ul>
</div>
</nav>
<main>
<div class="row row-cols-1 sec1 box">
<div class="col">
<img class="img-fluid rounded mx-auto mt-5 d-block" src="/img/logo.png">
</div>
</div>
<div class="row row-cols-1 sec2 box" style="width: 100%;">
<div class="col mt-3">
<h1>Who we are:</h1>
</div>
<div class="col mb-5 text-center">
<p>The New Hope Animal Shelter NHAS is a registered charity that has been operating for 150 years. The Society provides care, comfort and compassion to animals in need in communities across the country. It values all animals and advocates to treat
them with respect and kindness. The Society strives to keep pets and families together and do so through a variety of community support services, such as sheltering and adoptions, including emergency sheltering, feral cat management programs,
animal transfers, food distribution, humane education, animal advocacy, and spay/neuter services. The NHAS does not receive annual government funding and relies on donations to provide programs and services to help animals in need.</p>
</div>
</div>
<div class="row row-cols-1 sec3 box">
<div class="col align-self-center">
<h1>Compassion for animals is intimately connected with goodness of character; and it may be confidently asserted that he who is cruel to animals cannot be a good man.</h1>
<p>-S. Chopenhauer</p>
</div>
</div>
<div class="row row-cols-1 sec4 box">
<div class="col">
<h1>From our Supporters</h1>
</div>
<div id="carouselExampleControls" class="col carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/carousel1.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/carousel2.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://images.pexels.com/photos/540518/pexels-photo-540518.jpeg" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</main>
<section>
</section>
<footer>
<p></p>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>
Whenever I'm scrolling my mouse, all the listed admin cards come over the navbar. This is a very irritating flaw and I can't seem to understand where I went wrong. Any help would be appreciated. Thanks!
#mainsec {
height: 100vh;
width: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
#navv {
background-color: #333; /* Black background color */
position: fixed; /* Make it stick/fixed */
top: 0; /* Stay on top */
width: 100%; /* Full width */
transition: top 0.3s; /* Transition effect when sliding down (and up) */
}
#navv a:hover {
background-color: rgba(221, 221, 221, 0.568);
color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous" />
<link rel="stylesheet" type="text/css" href="../../css/admin_dash.css">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" id="navv">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="../../assets/logo.png" alt="" width="30" height="24" class="d-inline-block align-text-top"> Phemesoft
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#sec1">Admins</a>
<a class="nav-link" href="#sec2">Manage Admins</a>
<a class="nav-link" href="#sec3">Course Content</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="column">
<div id="sec1">
<div class="row" id="mainsec">
<div class="col-sm-6">
<h2>Admins</h2>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-5 cards-wrapper"></div>
</div>
</div>
</div>
</div>
<div id="sec2">
<div class="row" id="mainsec">
<div class="col-sm-6">
<h1>User to Admin</h1>
</div>
<div class="col-sm-6">
<form class="form" action="makeadmin" method="POST">
Enter email:
<input type="email" placeholder="Email" name="email">
<button type="submit" class="btn btn-light">Check</button>
</form>
</div>
</div>
</div>
<div id="sec3">
<div class="col-sm-6" id="mainsec">
<h1>Add course content</h1>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$.ajax({
url: "listadmins",
type: "GET",
success: function(response) {
var $results = $(".cards-wrapper");
for (var a = 0; a < response.length; a++) {
// console.log(response[a].Name);
$results.append(
'<div class="card"><div class="card-body"><h6 class="card-title">' +
response[a].Name +
'</h6></div></div>'
);
}
}
});
</script>
<script>
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navv").style.top = "0";
} else {
document.getElementById("navv").style.top = "-50px";
}
prevScrollpos = currentScrollPos;
};
</script>
</body>
</html>
Here's an image of the issue:
The card appears over then nav bar
Ps: I haven't posted the mapping of /listadmins because it;s just normal Database query
Thanks all of guys for responding. I found the answer in one the comments. It was to use a higher z-index value for the navbar.
#navv {
background-color: #333; /* Black background color */
position: fixed; /* Make it stick/fixed */
top: 0; /* Stay on top */
width: 100%; /* Full width */
transition: top 0.3s; /* Transition effect when sliding down (and up) */
z-index: 2;
}
remove 'position: relative' from the card class
This has nothing to do with the ajax directly but more the rest of the page.
Your html is invalid
head tag not closed
body tag not opened
duplicate id mainsec - not using them really so I made them a class and removed the id's
some other invalid markup
Hard to see the issue here so I adjusted the size slightly for this site
Now that we got that strait, you can adjust the margins and padding on the tops with mt-5 pt-4 however you wish, toy around with this and see where you get things to move.
.mainsec {
height: 5em;
width: 90%;
display: flex;
align-items: center;
justify-content: center;
}
#navv {
background-color: #333;
position: fixed;
top: 0;
width: 100%;
transition: top 0.3s;
}
#navv a:hover {
background-color: rgba(221, 221, 221, 0.568);
color: black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous" />
<link rel="stylesheet" type="text/css" href="../../css/admin_dash.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" id="navv">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="../../assets/logo.png" width="30" height="24" class="d-inline-block align-text-top" alt="Phemesoft logo">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#sec1">Admins</a>
<a class="nav-link" href="#sec2">Manage Admins</a>
<a class="nav-link" href="#sec3">Course Content</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</div>
</div>
</div>
</nav>
<div class="container mt-6">
<div class="">
<div id="sec1">
<div class="mainsec mt-5">
<div class="col-sm-3">
<h2>Admins</h2>
</div>
<div class="col-sm-7 mt-5 pt-4">
<div class="row">
<div class="col-sm-8 cards-wrapper">
<div class="cards-wrapper">
<div class="card">
<div class="card-body">
<h6 class="card-title">Pretend append
</h6>
</div>
</div>
<div class="card">
<div class="card-body">
<h6 class="card-title">Pretend append
</h6>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" id="sec2">
<div class="row mainsec">
<div class="col-sm-6">
<h1>User to Admin</h1>
</div>
<div class="col-sm-6">
<form class="form" action="makeadmin" method="POST">
Enter email:
<input type="email" placeholder="Email" name="email">
<button type="submit" class="btn btn-light">Check</button>
</form>
</div>
</div>
</div>
<div class="row" id="sec3">
<div class="col-sm-6 mainsec">
<h1>Add course content</h1>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$.ajax({
url: "listadmins",
type: "GET",
success: function(response) {
var $results = $(".cards-wrapper");
for (var a = 0; a < response.length; a++) {
$results.append(
'<div class="card"><div class="card-body"><h6 class="card-title">' +
response[a].Name +
'</h6></div></div>'
);
}
}
});
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navv").style.top = "0";
} else {
document.getElementById("navv").style.top = "-50px";
}
prevScrollpos = currentScrollPos;
};
</script>
</body>
</html>
I was trying to adjust the fonts in my html page according to the screen size.
I was using
body{
font-size:1vmax;
}
but when i decided to not use it anymore, the font is still changes according to the screen size. It seems fine when i not reference the css code though.. can anyone help me?
here is my html code:
<!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">
<title>Kokeru</title>
<!-- fonts -->
<!-- raleway for kokeru title -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght#1,600&display=swap" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<!-- custom styling -->
<link href="assets/css/custom-style.css" rel="stylesheet">
</head>
<body>
<!-- navbar -->
<nav class="navbar py-0">
<a class="navbar-brand " href="#" id="kokeruBrand">Kokeru</a>
<a class="my-0 ml-auto mr-5 py-0" href="#">
<button class="btn btn-outline-info" type="button">Login</button>
</a>
<!-- navbar -->
</nav>
<!-- penjelasan kokeru -->
<!-- beserta tanggal dan jam -->
<div class="text-center" id="penjelasanKokeru">
<h2>Monitoring Kebersihan dan Kerapihan Ruangan<br>Gedung Bersama Maju</h2>
<h3>Hari Minggu Tanggal 13 Desember 2020 Jam 11:11</h3>
</div>
<!-- ruangan2nya -->
<div class="container-fluid my-5">
<div class="row">
<a href="#" class="card-link col-lg-2">
<div class="card mx-3 px-0">
<div class="card-body text-center">
<h4 class="card-title text-center">R.123</h4>
BELUM<br>
Hilmi<br>
click for more detail
</div>
</div>
</a>
<a href="#" class="card-link col-lg-2">
<div class="card mx-3 px-0" style="width: 13rem;">
<div class="card-body text-center">
<h4 class="card-title text-center">R.123</h4>
BELUM<br>
Hilmi<br>
click for more detail
</div>
</div>
</a>
<a href="#" class="card-link col-lg-2">
<div class="card mx-3 px-0" style="width: 13rem;">
<div class="card-body text-center">
<h4 class="card-title text-center">R.123</h4>
BELUM<br>
Hilmi<br>
click for more detail
</div>
</div>
</a>
<a href="#" class="card-link col-lg-2">
<div class="card mx-3 px-0" style="width: 13rem;">
<div class="card-body text-center">
<h4 class="card-title text-center">R.123</h4>
BELUM<br>
Hilmi<br>
click for more detail
</div>
</div>
</a>
<a href="#" class="card-link col-lg-2">
<div class="card mx-3 px-0" style="width: 13rem;">
<div class="card-body text-center">
<h4 class="card-title text-center">R.123</h4>
BELUM<br>
Hilmi<br>
click for more detail
</div>
</div>
</a>
<a href="#" class="card-link col-lg-2">
<div class="card mx-3 px-0" style="width: 13rem;">
<div class="card-body text-center">
<h4 class="card-title text-center">R.123</h4>
BELUM<br>
Hilmi<br>
click for more detail
</div>
</div>
</a>
<!-- row -->
</div>
<!-- ruangan2nya -->
</div>
<!-- Option 2: jQuery, Popper.js, and 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/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
</body>
</html>
here is my custom-style.css code :
body{
background-color: #bed0ca;
/* font-size: 1vmax; */
}
#kokeruBrand{
font-family: 'Raleway', sans-serif;
}
nav{
background-color: #e3f2fd;
}
#penjelasanKokeru{
color: blue;
}
/* a.card-link,
a.card-link:hover {
color: inherit;
} */
/*
#media screen and (max-width : 320)
{
body
{
font:1.5rem;
}
}
#media screen and (max-width : 1204px)
{
body
{
font:2.5rem;
}
} */
according to the comment, it seems that i still use my cached version of my stylesheet.
According to the comment, and like the Wechuck's answer,
take a look at the styling used via your browsers inspector/developer-tools you are probably still using a cached version of your stylesheet. Ctrl+F5 should force a reload.
according to the comment, it seems that i still use my cached version of my stylesheet.
You should reload the browser with Ctrl + F5
Or Ctrl + Shift + R
I have 4 cards using bootstrap 4. However, when I scale down, the 4 cards overlap one another instead of going down to 2, then to 1 on mobile view.
My code: https://codepen.io/jehc10/pen/LKqRRQ
.navbar-nav {
background: #4287f5;
}
.navbar-brand {
background: #4287f5;
}
.navbar-brand.custom {
color: #FFFFFF;
font-size: 25px
/* border-right:2px solid black; */
}
.navbar {
background: #4287f5;
}
body {
font-family: 'Poppins', sans-serif;
background-image: url("attractive-backdrop-background-988872.jpg");
/* font-weight:700; */
}
.navbar-nav li a {
color: #FFFFFF;
font-size: 20px;
}
.card {
margin-left: 35px;
margin-top: 20px;
background: #f2f2f2;
}
form {
margin-left: 50px;
margin-top: 20px;
background: grey;
border: 2px solid black;
}
<!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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- My stylesheet -->
<link rel="stylesheet" href="website.css">
<!-- Google fonts -->
<link href="https://fonts.googleapis.com/css?family=Poppins:400,700&display=swap" rel="stylesheet">
<title>Jesse</title>
</head>
<body>
<!-- NAV bar -->
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand custom" href="#">Jesse</a>
<button class="navbar-toggler navbar-dark" 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="#">About me <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact me</a>
</li>
</ul>
</div>
</nav>
<!-- Portfolio cards -->
<div class=row>
<div class=col-sm-3>
<div class="card" style="width: 18rem;">
<img src="cat.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card 1</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>
Go somewhere
</div>
</div>
</div>
<div class=col-sm-3>
<div class="card" style="width: 18rem;">
<img src="cat.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card 2</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>
Go somewhere
</div>
</div>
</div>
<div class=col-sm-3>
<div class="card" style="width: 18rem;">
<img src="cat.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card 3</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>
Go somewhere
</div>
</div>
</div>
<div class=col-sm-3>
<div class="card" style="width: 18rem;">
<img src="cat.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card 4</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>
Go somewhere
</div>
</div>
</div>
</div>
<!-- Contact form -->
<div class=row>
<div class=col-lg-6>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
</html>
Remove the inline fixed width to solve this issue.
<div class="card" style="width: 18rem;">
Just add some classes in your card and it will solve your problem.
<div class="col-12 col-sm-3 mb-3">
<div class="card w-100">
<img src="cat.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card 1</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>
Go somewhere
</div>
</div>
</div>
It should solve the problem.
I added col-12 in card wrapper and w-100 in card for full width.
removed the inline style width from the card.
First don't set the width inline with style="width: 18rem;" or in a css file. The width should be determined by the col-x classes of Bootstrap. That is kind of the whole idea.
And if you want to put them below each other you can do this col col-sm-6 col-lg-3. Meaning a card will take up full width on XS, 2 next to each other from SM to MD and 4 next to each other on LG and XL
<div class="row">
<div class="col col-md-6 col-lg-3">
<div class="card">
</div>
</div>
<div class="col col-md-6 col-lg-3">
<div class="card">
</div>
</div>
If you remove the col-sm-3 from the parrent your should work just fine.
What is happening is that you force the parrent div's to fit in one line. But inside them you have a div with a fixed with style="width: 18rem;". So the inner div doesn't fit in the parrent div. That is why they are overlapping (and the flex-wrap property is not working as it should).