Problem: I am designing a page using bootstrap 5/html/css. I made it responsive so with a specific width the boostrap 5 menu with toggler navbar shows. On the rest of the page, I want to add an accordion style menu. I've done tests and I know that there is nothing wrong with the code seperatly, but when I put them both on the same page and I click on the accordion tab to show, the page scrolls back up to the head. I think it has to do with the toggler navbar code, but I'm a student so I don't really know how to solve this so I came to ask you guys for help! Thanks :)
Here is the HTML:
<html lang="en" dir="ltr">
<head>
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta charset="utf-8">
<title>eyo</title>
<!---CSS BOOTSTRAP--->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<!--FONTAWESOME-->
<script src="https://kit.fontawesome.com/9e552d07ce.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- NavBar -->
<nav class="navbar sticky-top navbar-expand-lg">
<div class=" container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-
target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-
label="Toggle navigation">
<span class="navbar-toggler-icon" src=""><i class="fas fa-sort-down fa-3x"></i></span>
</button>
<img src="logo.png" alt="" class=" logo d-inline-block align-top">
<a href=""><i class="user-mobile align-top fas fa-user fa-2x"></i>
</a>
<div class="collapse navbar-collapse justify-content-center" id="navbarTogglerDemo03">
<ul class="navbar-nav mb-2 mb-lg-0">
<li class="nav-item">
<button class="navbtn btn btn-lg me-2" type="button">Home</button>
</li>
<li class="nav-item">
<button class="navbtn btn btn-lg me-2" type="button">Serviços</button>
</li>
<li class="nav-item">
<button class="navbtn btn btn-lg me-2" type="button">Sobre</button>
</li>
<li class="nav-item">
<button class="navbtn btn btn-lg me-2" type="button">Contato</button>
</li>
<li class="nav-item">
<button class="navbtn btn btn-lg me-2" type="button">Minha Conta</button>
</li>
</ul>
</div>
</ul>
</div>
<a href=""><i class="user-desktop align-top fas fa-user fa-2x"></i>
</nav>
<div id="top">
<div class="thumbnail">
<img class="first" src="first-img.png" alt="">
<div class="caption">
<p class="nossos">Nossos serviços são</p>
<span>inteiramente </span><span style="color:green; background-color: white;">ONLINE</span>
<p class="confira">Confira abaixo!</p>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.1/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>
</body>
</html>
Here is the CSS:
overflow-x: hidden;
}
/*NAV BAR ELEMENTS*/
.navbar{
background-color: white;
}
.logo{
width: 50px;
height: 44px;
}
.user-desktop{
width: 50px;
height: 44px;
position: relative;
display: inline-block;
background-color: white;
}
.user-mobile{
width: 50px;
height: 44px;
position: relative;
display: inline-block;
background-color: white;
}
.navbtn{
background-color: green;
color: white;
font-weight: 700;
padding: 4px;
margin: 3px;
}
.navbar-toggler-icon{
color: green;
position: relative;
bottom: 30px;
}
.navbar-nav{
position: absolute;
}
/*TOP*/
.first{
display: block;
width: 100%;
}
p{
margin-bottom: 0;
}
.thumbnail {
position: relative;
display: inline-block;
}
.caption {
position: absolute;
top: 56%;
left: 70%;
transform: translate( -50%, -50% );
text-align: left;
color: white;
font-family: Ubuntu-Bold;
font-style: normal;
font-weight: normal;
font-size: 5vw;
color: rgba(255,255,255,1);
white-space: nowrap;
margin-top: -5.449396133422852px;
}
.servicos-title{
font-size: 3em;
text-align: center;
}
.servicos-med{
position: absolute;
background-color: blanchedalmond;
}
#media (min-width:320px) {
.user-desktop{
display: none;
}
}
#media (min-width:481px) {
.user-desktop{
display: none;
}
}
#media (min-width:641px) {
.user-desktop{
display: none;
}
}
#media (min-width:990px) {
.user-mobile{
display: none;
}
.user-desktop{
display: inline-block;
}
}
#media (min-width:1025px) {
.user-mobile{
display: none;
}
.user-desktop{
display: inline-block;
}
}
#media (min-width:1281px) {
.user-mobile{
display: none;
}
.user-desktop{
display: inline-block;
}
}
Related
I'm doing a small assignment and therefore not allowed to use javascript. Only html and css. I made a simple gallery with products and when I hover over them I'd like the small paragraph to become visible. Is there a way to 'call' the paragraph from the .product-container? I tried adding a + p but that doesn't seem to work. I also don't want to make a specific class for every div so ideally only the corresponding products paragraph is visible when hovering and not all of them. Hope you understand what I mean, I don't know the exact phrases to use since I'm very new.
#navbarDog {
background-color: #F5EFE6;
}
#logo {
height: 100px;
}
body{
font-family: "Montserrat";
font-weight: bold;
size: 3rem;
line-height: 1, 5;
}
.nav-link {
font-size: 20px;
transition: font-size 0.4s;
}
.nav-link:hover {
font-size: 25px;
}
.header-products {
display: flex;
align-items: center;
justify-content: center;
background-color: #E8DFCA;
padding: 50px;
}
main {
background-color: #AEBDCA;
}
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
max-width: 1000px;
margin: 0 auto;
}
.gallery img {
background-color: transparent;
width: 100%;
height: 350px;
padding: 10px;
object-fit: contain;
position: relative;
}
.product-container p{
visibility: hidden;
}
/* .gallery img:hover {
z-index: 9;
transform: scale(1.3);
transition: transform ease 0.5s;
} */
.product-container:hover {
z-index: 9;
transform: scale(1.3);
transition: transform ease 0.5s;
visibility: visible;
}
#media only screen and (max-width: 600px) {
.gallery {
grid-template-columns: repeat(2, 1fr);
}
}
#footer {
background-color: #7895B2;
padding: 4%;
text-align: center;
}
.footer-icon {
color: #fe0707;
margin: 20px 10px;
text-decoration: none;
}
/* Adds color to hovering state (element.class.action in this order) */
a.footer-icon:hover {
color: #41678e;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Products</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Ubuntu:ital,wght#0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"
rel="stylesheet">
<script src="https://kit.fontawesome.com/b88143462d.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.min.js"
integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK"
crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg" id="navbarDog">
<div class="container-fluid">
<a class="navbar-brand" href="index.html"><img src="../img/logo.png" alt="" id="logo"></a>
<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">
<ul class="navbar-nav w-100 mb-2 mb-lg-0">
<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="products.html">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="news.html">News</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<form class="d-flex ms-auto">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<header class="header-products">
<h1>Products</h1>
</header>
<main>
<div class="gallery">
<div class="product-container">
<img src="../img/tshirt-beighe.jpg" alt="">
<p>A stylish t-shirt made of 100% cotton. 450SEK</p>
</div>
<img src="../img/tshirt-blue.jpg" alt="">
<img src="../img/tshirt-gray.jpg" alt="">
<img src="../img/tshirt-white.jpg" alt="">
<img src="../img/tshirt-yellow.jpg" alt="">
</div>
</main>
<footer id="footer">
<p>© Copyright OnlyDogs</p>
</footer>
</body>
You could add the hover on the parent element:
.product-container p {
display: none;
}
.product-container:hover p {
display: block;
}
<div class="product-container">
<img src="https://via.placeholder.com/150" alt="">
<p>A stylish t-shirt made of 100% cotton. 450SEK</p>
</div>
Try this. Using general sibling selector. Doesn't matter what order.
img:hover ~ .product-container p {
visibility: visible
}
If that fails:
Wrap your image in a link tag and then do this.
a:hover img ~ .product-container p {
visibility: visible
}
Hello i have a landing page. I would like to set width of my header to the full page with bootstrap. I was trying to set it with container-fluid class but its not working. How to fix this? That it will be responsive and width set to the full page? Thanks for Help
Here is the code:
#import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght#0,200;0,400;0,700;0,900;1,600&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght#0,200;0,700;0,900;1,600&display=swap');
.raleway600 {
font-family: raleway, sans-serif;
font-weight: 600;
font-style: italic;
}
.raleway900 {
font-family: raleway, sans-serif;
font-weight: 900;
font-style: normal;
font-size: 4em;
}
* {
font-family: "Raleway", sans-serif;
}
body {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
padding-top: 60px;
width: 98%;
font-family: "Raleway", sans-serif;
}
.navbar {
font-family: "Raleway", sans-serif;
}
.container {
padding-top: 10rem;
}
/* fix padding under menu after resize */
#media screen and (max-width: 767px) {
body {
padding-top: 60px;
}
}
#media screen and (min-width:768px) and (max-width: 991px) {
body {
padding-top: 110px;
}
}
#media screen and (min-width: 992px) {
body {
padding-top: 60px;
}
}
footer {
padding: 0;
margin: 0 auto;
position: relative;
background-color: rgb(11, 11, 11);
width: 100%;
}
.logo {
width: 7rem;
height: 7rem;
}
.navbar-brand {
margin-left: 17em !important;
}
#banner {
position: relative;
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("logo");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
}
.hero-text {
text-align: center;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
.row-fluid {
text-align: center;
justify-content: center !important;
}
.img-responsive {
margin: 0 auto
}
nav {
overflow: auto;
}
header {
height: 100vh;
}
.card-img-top {
width: 100%;
height: 15vw;
object-fit: cover;
}
<header>
<div id="banner" class="container-fluid baner p-0 ">
<div class="hero-text">
<h1 class="raleway900">"Text 1"</h1>
<p class="raleway600"><strong>Text 2</strong></p>
<p class="raleway600"><strong>Text 3</strong></p>
<p class="raleway600"><strong>Text 4</strong> </p>
<p class="raleway600"><strong>Text 5</strong> </p>
<button class="btn btn-primary raleway600">Button 1</button>
<button class="btn btn-outline-light raleway600">Button 2</button>
</div>
</div>
</header>
https://jsfiddle.net/j28qyhrw/1/
You can have it, hope it helps
<div class="header container-fluid d-flex justify-content-between align-items-center">
<div class="logo">Logo</div>
<nav class="nav">
<ul class="d-flex">
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
<li>
Link 4
</li>
</ul>
</nav>
<div class="hamburger-menu-wrap ">
<span></span>
<span></span>
<span></span>
</div>
</div>
<header class="banner container-fluid border-bottom">
<div class="banner1">
<p>Header 1</p>
<p>Header 2</p>
<p>Header 3</p>
<p>Header 4</p>
</div>
</header>
<div class="main-container container-fluid">
<p>Content 1</p>
<p>Content 2</p>
<p>Content 3</p>
<p>Content 4</p>
<p>Content 5</p>
</div>
<footer class="footer container-fluid text-center">
<p class=" pb-0">Footer</p>
</footer>
/* header */
.header{ background-color: #2b2d3b; color: #fff; padding-top: 10px; padding-bottom: 10px; }
.header nav ul{ list-style-type: none; padding: 0; margin: 0; background-color: #2b2d3b; color: #fff; }
.header nav ul li{ list-style: none; padding:0 ; margin: 0 15px; color: #fff; }
.header nav ul li a{ color: #fff; }
/* hamburger menu */
.hamburger-menu-wrap {width: 24px;height: 16px;cursor: pointer;z-index: 1;display: none;}
.hamburger-menu-wrap span {background: #fff;display: block;height: 2px;margin-bottom: 6px;width: 100%;float: right;cursor: pointer !important;}
#media(max-width:991px){
.hamburger-menu-wrap{ display: block; }
.header nav{ display: none; }
.hamburger-open .header nav{ display: flex; }
.hamburger-open .header nav ul{ flex-direction: column!important; }
}
.footer{ background-color: #2b2d3b; color: #fff; padding-top: 10px; padding-bottom: 10px; }
Or check in jsfiddle example link :
https://jsfiddle.net/DeveloperSandip/u6ph27cx/4/
<!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>Document</title>
<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>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#">Hidden brand</a>
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<div class="container-fluid p-md-5 p-5 m-md-auto">
<div class="text-center" id="">
<img id="logo" style="pointer-events:none;" src="" class="img-fluid g-md-5 p-md-5" alt="">
</div>
</div>
</body>
</html>
try
Responsive containers allow you to specify a class that is 100% wide until the specified breakpoint is reached, after which we apply max-widths for each of the higher breakpoints. For example, .container-sm is 100% wide to start until the sm breakpoint is reached, where it will scale up with md, lg, xl, and xxl.Watch the screenshot
hope it will help you
Why do you use your own css for it? I don't have much experience yet, it's possible that I misunderstood. It is enough to insert the cdn in the head - I thought. Could it be that your css file conflicts with Bootstrap?
I have a problem with hyperlink code.
I used a to make a hyperlink but it's connecting with the css of the navbar and the button is now the same as the navbar buttons.
The ones circled in red are the hyperlinks i want to change but they are connecting to the navbar css and now are the same.
I tried giving it a class but it wasn't working.
a {
margin: 0;
border: 1vw;
padding: 0.5vw;
text-decoration: none;
color: black;
font-family: Kanit;
outline: solid;
outline-color: #00b7ff;
outline-width: 1px;
border-radius: 4px;
transition: background-color 0.3s ease-out;
}
a:hover {
background-color: #00b7ff;
}
li {
text-align: center;
align-content: center;
margin: 0.75vw;
font-size: 1.5vh;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
}
nav {
position: relative;
top: 10px;
display: flex;
height: min-content;
width: max-content;
background-color: transparent;
}
body {
margin: 0;
}
#media only screen and (max-width: 500px) {
ul {
flex-direction: column;
}
li {
margin: 0;
}
a {
display: block;
}
button {
display: block;
padding: 1vw;
font-size: 1.5vh;
border: none;
outline: none;
cursor: pointer;
align-self: flex-start;
}
}
button {
display: none;
}
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title> QuadroStudios </title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='./css/home.css'>
<!-- <script src='main.js'></script> -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="home.html"> QuadroStudios </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" href="home.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="update.html"> Updates </a>
</li>
<li class="nav-item">
<a class="nav-link" href="leaks.html"> Leaks </a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="about.html"> About </a>
</li>
</ul>
</div>
</div>
</nav>
<style>
body {
background-color: #212529;
overflow-x: hidden;
}
.about {
position: relative;
top: 25px;
left: 10px;
color: white;
}
.title {
color: white;
font-size: 25px;
font-family: Inconsolata;
}
.storehauled {
position: relative;
top: 100px;
left: 30px;
color: white;
;
font-size: 20px;
font-family: Inconsolata;
}
</style>
<div class="about">
<h1 class="title"> Here you can find info about our games and what QuadroStudios is about! </h1>
</div>
<div class="storehauled">
<p> Storehauled <br> On Roblox: <a class="robloxgame" href="https://www.roblox.com/games/6258825725"> Roblox Game </a> <br> Released: 1/18/2021 <br>
<br> Current status: Remaking [in Beta] <br>
<br> Progress: <br> UI - Completed <br> Map - Mostly completed [70%] <br> Users: Brony#0445 Babushka_OP#6118 <br> Trello board: <a class="trello" href="https://trello.com/b/WzuH9IK3"> Trello of the Game</a> <br> Early access release: Late Q4 2021
- Beta is the last part of closed development. We'll let you know when you can access the game freely. <br>
<br> Teasers of the game: <br>
<br> The park is the most chilling place in here... <br>
<br>
<img src="teaser1.png">
</p>
</div>
</body>
here we go :
demo
html :
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>QuadroStudios</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" media="screen" href="about.css" />
<!-- <script src='main.js'></script> -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
</head>
<style>
body {
background-color: #212529;
overflow-x: hidden;
}
.about {
position: relative;
top: 25px;
left: 10px;
color: white;
}
.title {
color: white;
font-size: 25px;
font-family: Inconsolata;
}
.storehauled {
position: relative;
top: 100px;
left: 30px;
color: white;
font-size: 20px;
font-family: Inconsolata;
}
</style>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="home.html"> QuadroStudios </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" href="home.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="update.html"> Updates </a>
</li>
<li class="nav-item">
<a class="nav-link" href="leaks.html"> Leaks </a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="about.html">
About
</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="about">
<h1 class="title">
Here you can find info about our games and what QuadroStudios is about!
</h1>
</div>
<div class="storehauled">
<p>
Storehauled <br />
On Roblox:
<a class="robloxgame" href="https://www.roblox.com/games/6258825725">
Roblox Game
</a>
<br />
Released: 1/18/2021 <br />
<br />
Current status: Remaking [in Beta] <br />
<br />
Progress: <br />
UI - Completed <br />
Map - Mostly completed [70%] <br />
Users: Brony#0445 Babushka_OP#6118 <br />
Trello board:
<a class="trello" href="https://trello.com/b/WzuH9IK3">
Trello of the Game</a
>
<br />
Early access release: Late Q4 2021 - Beta is the last part of closed
development. We'll let you know when you can access the game freely.
<br />
<br />
Teasers of the game: <br />
<br />
The park is the most chilling place in here... <br />
<br />
<img src="teaser1.png" />
</p>
</div>
</body>
css
.storehauled a {
position: relative;
text-decoration: none;
color: white;
}
.storehauled a:hover {
color: #00b7ff;
}
li {
text-align: center;
align-content: center;
margin: 0.75vw;
font-size: 1.5vh;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
}
nav {
position: relative;
top: 10px;
display: flex;
height: min-content;
width: max-content;
background-color: transparent;
}
#media only screen and (max-width: 500px) {
ul {
flex-direction: column;
}
li {
margin: 0;
}
a {
display: block;
}
button {
display: block;
padding: 1vw;
font-size: 1.5vh;
border: none;
outline: none;
cursor: pointer;
align-self: flex-start;
}
}
button {
display: none;
}
I am in the middle of making an about section for my website then I encountered an issue where the section isn't covering the entire width of the page and nothing I found on other posts is working for me. I am using bootstrap5 if that helps.
* {
margin:0px;
padding:0px;
}
.navbar {
background: #131313;
padding: 1rem 8rem;
z-index: 1000;
}
.navbar-nav {
padding-right: 9%;
}
.navbar .navbar-brand {
font-size: 1.4rem;
font-weight: 700;
}
#navbarSupportedContent > ul > li:nth-child(n) > a {
color: #fff;
font-size: 1.1rem;
padding: 0 0.8rem;
}
#navbarSupportedContent > ul > li:nth-child(n) > a:hover {
color: grey;
}
#navbarSupportedContent > button {
outline: none;
background: rgb(197, 190, 190);;
font-weight: 600;
padding: 0.4rem 1.4rem;
border-radius: 30px;
}
#navbarSupportedContent > button:hover {
background: grey;
}
.mid {
height: 80vh;
width: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
text-align: center;
}
.mid video {
width: 100%;
height: 100%;
pointer-events: none;
object-fit: cover;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.hero {
position: relative;
}
.hero h2 {
font-weight: bold;
}
.mid .hero p {
width: 55%;
font-size: 1.1rem;
letter-spacing: 0.2px;
padding: 1.1rem;
}
.mid .hero a {
background: rgb(197, 190, 190);;
font-weight: 600;
padding: 1rem 2rem;
border-radius: 30px;
text-decoration: none;
}
.mid .hero a:hover {
background: grey;
}
.about {
background:#000;
}
.about .text {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
margin: auto;
}
.about .text h2 {
color: #F7F5F4;
font-weight: 700;
font-size: 2.7rem;
letter-spacing: 2px;
}
.about .text p {
color: #F7F5F4;
font-weight: 400;
font-size: 1.1rem;
letter-spacing: 0.5px;
}
<!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>Talk Tech Teen Tech</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg navbar-dark fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">Talk Tech Teen Tech</a>
<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">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Listen</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Product Specs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Premium Techy</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Contact</a>
</li>
</ul>
<button class="btn btn-outline text-dark" type="submit">Sign Up</button>
</div>
</div>
</nav>
<div class="mid">
<video autoplay muted loop>
<source src="images/mic.mp4" type="video/mp4"><source>
</video>
<div class="hero text-center">
<h2 class="text-light display-4">Talk Tech Teen Tech</h2>
<p class="text-light mx-auto">This podcast talks about tech but through the eyes of grade school teens to get a different approach on the bleeding-edge of technology</p>
<a class= text-dark href="#">Start Listening</a>
</div>
</div>
</header>
<section class="about container py-5 my-5 mx-auto">
<div class="row align-items-center">
<div class="img col-lg-6 col-md-6 col-12 pt-5 pb-5">
<img class="img-fluid" src="images/mic.png">
</div>
<div class="text col-lg-6 col-md-6 col-12 pt-5 pb-5">
<h2>About Us</h2>
<p>Talk Tech Teen Tech is a podcast created by teens, made for the masses. In this podcast we talk about the bleeding edge of technology but through a teens perspective and what we think tech should be about and how companies handle technology. We talk about products from all sorts of companies (Apple, Samsung, OnePlus, Xiomi, Dell, Microsoft etc.). Our goal was to introduce another prespective of technology into the web and also to influence others that you don't need to be 30 to create a tech podcast, and with minimal gear you can create an amazing podcast!</p>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
</body>
</html>
This is the Result
Any help would be greatly appreciated!
Wrapping your container with the section will most likely fix the problem.
Instead of writing this;
<section class="about container py-5 my-5 mx-auto">
try this:
<section class="about py-5 my-5">
<div class="container mx-auto">
You probably have a margin set around your container
Also your about styles should be set to width: 100%
It looks like the container class limits the max-width to be less than the full page width, see here: https://getbootstrap.com/docs/5.0/layout/containers/
Try adding width: 100%; to the about section CSS as you did to the CSS of .mid.
If this does not help, you can try width: 100% !important;, width: 100vw; and width: 100vw !important;.
Elements scale to the width of their parent. Is the element you're trying to draw the background on inside a body container that has some padding?
This is only my second time using Bootstrap in a project. I'm not sure what is causing my page to not be properly responsive. When resizing the view port content shifts out of the containers. I believe it is being caused by improper usage of the Bootstrap col-* and rows classes. Below is the HTML and CSS code.
EDIT: I have recently gone trough and refactored some of the code and found that I did not put rows inside of columns properly.
.wrapper {
position: relative;
padding: 0 15px;
}
.responsive-image {
width: 100%;
height: auto;
}
#statement {
position: absolute;
text-align: center;
top: 280px;
left: 300px;
font-size: 50px;
font-weight: bold;
color: #ffffff;
}
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
top: -215px;
position: relative;
max-width: 96.7vw;
height: 200px;
left: 30px;
top: -340px;
padding-bottom: 50px;
}
a {
color: #ffffff;
}
.search-text {
padding-left: 10px;
float: right;
}
.glyphicon-search {
padding-top: 10px;
padding-left: 30px;
color: black;
}
.search-bar-container {
padding-top: 10px;
background-color: red;
top: -390px;
max-width: 96.7vw;
height: 70px;
left: 31px;
}
.row-eq-height>[class*='col-'] {
position: relative;
display: flex;
flex-direction: column;
text-align: center;
padding-top: 50px;
font-size: 25px;
font-style: italic;
font-weight: bold;
}
.translucent>div {
background-color: rgba(0, 0, 0, 0.5);
border: solid 1px #ffffff;
}
.nav-item>a {
color: #000000;
font-weight: bold;
}
.nav-wrapper {
position: absolute;
right: 0;
left: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mock Up</title>
<!-- Bootstrap Link -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="nav-wrapper">
<nav class="navbar navbar-static-top">
<!--Navbar-->
<div class="row">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
<!-- Collapsing Hamburger Buttons for mobile -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!--Menu Items-->
<div class="collapse navbar-collapse navbar-right" id="mainNavBar">
<ul class="nav navbar-nav">
<li class="nav-item">
HOME
</li>
<li class="nav-item">
SHOWROOM
</li>
<li class="nav-item">
SERVICES
</li>
<li class="nav-item">
INFO
</li>
<li class="nav-item">
PHOTO GALLERY
</li>
<li class="nav-item">
CONTACT
</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
<div class="wrapper">
<img class="responsive-image" src="https://lh3.google.com/u/0/d/0B7B-ke12S7B2YmRfVmlUaDdZU1E=w1366-h653-iv1" alt="road in the sunset banner">
</div>
<div class="row row-eq-height translucent">
<div class="col-lg-3 col-xs-12 box-color">NEW <br>INVENTORY</div>
<div class="col-lg-3 col-xs-12 box-color">PRE OWNED <br>INVENTORY</div>
<div class="col-lg-3 col-xs-12 box-color">CUSTOMER <br>FABRICATION</div>
<div class="col-lg-3 col-xs-12 box-color">SERVICE <br>DEPARTMENT</div>
</div>
<div class="row">
<div class="col-xs-12 search-bar-container">
<form class="form-inline">
<div class="form-group">
<label><span class="search-text glyphicon glyphicon-search" aria-hidden="true">QUICK SEARCH</span></label>
<input type="text" class="form-control" id="search-manufacturers" placeholder="(All Manufacturers)">
</div>
</form>
</div>
</div>
<script src="https://use.fontawesome.com/bd8b80bd9d.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
Refer this Fiddle if you are looking for something like this. In this Fiddle I have updated your code with some structure and CSS changes.