Hi and Thank you for checking in. I have a problem with my practise task.
My project is a web-application. I use Bootstrap lib for navbar and carosuel in particular. I want images to be fullscreen so there would be only navbar and images changing each other (as a starting screen).
But for some reason I have white borders around images. I applied multiple CSS styles, used different images with different resolutions, tried starting the app with different resolution and watched multiple guides but reached no desired effect. I checked my code many times and I don’t really think that there some parameters block each other.
I want images of my carousel to be fullscreen.
My CSS code:
/* Flexible elements on the screen */
#navbarSupportedContent {
display: flex;
}
/* Colors of navbar and text on it */
.nav-link {
color: #000000;
font-family: impact;
font-size: 20px;
text-shadow: -1px 0 #9f9f9f, 0 1px #9f9f9f, 1px 0 #9f9f9f, 0 -1px #9f9f9f;
padding-top: 25px;
}
/* Center the login fields */
.loginfields {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
/* Removes scroll */
.login {
overflow: hidden;
}
/* Change the stroke of the fields */
input[type="text"] {
border: 2px solid grey;
}
input[type="password"] {
border: 2px solid grey;
}
/* Change the color of the button */
.btn-primary {
background-color: grey;
}
.btn-primary {
border: 2px solid grey;
}
/* change the font of errors */
h1 {
font-family: impact;
font-size: 72px;
}
p1 {
font-family: impact;
font-size: 72px;
}
/* Fullscreen carousel images */
.carousel-item img {
height: 100vh;
width: 100vh;
object-fit: cover;
}
My layout.html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial scale=1, width=device-wdith">
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<link href="static/favicon.ico" rel="icon">
<link href="static/styles.css" rel="stylesheet">
<title></title>
</head>
<body>
<!--For now keeping this line like this-->
<nav class="navbar navbar-expand-lg" style="background-color:#555555;">
<div class="container-fluid">
{% if session["user_id"] %}
<a class="navbar-brand" href="/">
<img src="static/logosmall.png" ref="logo">
</a>
{% else %}
<a class="navbar-brand" href="/login">
<img src="static/logosmall.png" ref="logo">
</a>
{% endif %}
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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">
{% if session["user_id"] %}
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link" aria-current="page" href="/history"><b>History</b></a></li>
<li class="nav-item"><a class="nav-link" href="/pictures"><b>Pictures</b></a></li>
<li class="nav-item"><a class="nav-link" href="/videos"><b>Videos</b></a></li>
<li class="nav-item"><a class="nav-link" href="/quiz"><b>Quiz</b></a></li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="/logout"><b>Logout</b></a></li>
</ul>
{% else %}
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="/register"><b>Register</b></a></li>
<li class="nav-item"><a class="nav-link" href="/login"><b>Login</b></a></li>
</ul>
{% endif %}
</div>
</div>
</nav>
<main class="container py-5 text-center">
{% block main %}{% endblock %}
</main>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
</html>
My main page.html
{% extends "layout.html" %}
{% block title %}Main{% endblock %}
{% block head %}
<head>
</head>
{% endblock %}
{% block main %}
<body>
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="static/123.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="static/loginbackground.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="static/4k.jpg" class="d-block w-100" alt="...">
</div>
</div>
</div>
</body>
{% endblock %}
New contributor
Alexey is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.