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;
}
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
}
Brand name not aligning to left in Bootstrap 5:
.navbar-nav>li {
padding-bottom: 2px;
font-size: 25px;
display: block;
}
nav {
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .2);
width: 100%;
}
.container {
text-align: center;
padding-top: 35px;
}
nav img {
padding-left: 15px;
opacity: 0.75;
}
#media screen and (max-width:379px) {
nav img {
content: center;
}
}
#media screen and (min-width:1140px) {
.navbar-nav {
padding-right: 26px;
}
}
nav .h3-brand {
color: black;
font-size: 30px;
opacity: 0.75;
box-align: left;
align-items: left !important;
align-items: start;
}
#media screen and (max-width:420px) {
.navbarbutton {
margin: auto;
}
}
#media screen and (min-width:420px),
screen and (max-width:1140px) {}
#media screen and (min-width:421) {
.navbarbutton {
margin: 0px;
margin-right: 30px;
}
}
.navbar-toggler {
opacity: 0.75;
border: none;
}
.navbar-toggler:hover {
opacity: 2;
}
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
outline: none;
box-shadow: none;
}
<!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.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Company</title>
<link rel="stylesheet" href="Index.css">
</head>
<body>
<nav class="navbar sticky-top navbar-expand-xl navbar-light bg-light ">
<a href="#" class="navbar-brand">
<img class="rounded" src="assets/company-name.png" alt="Company Logo" />
</a>
<h3 class="h3-brand navbar-brand">Company</h3>
<button class="navbar-toggler style: margin-right:30px; navbarbutton" type="button" data-bs-toggle="collapse" data-bs-target="#toggleMobileMenu" aria-controls="toggleMobileMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="toggleMobileMenu">
<ul class="row flex-row flex-wrap navbar-nav ms-auto text-center">
<li class="nav-item col-6 col-xl-auto"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item col-6 col-xl-auto"><a class="nav-link" href="#">Über uns</a></li>
<li class="nav-item col-6 col-xl-auto"><a class="nav-link" href="#">FAQ</a>
<li class="nav-item col-6 col-xl-auto"><a class="nav-link" href="#">Preise</a></li>
<li class="nav-item col-6 col-xl-auto"><a class="nav-link" href="#">Kontakt</a></li>
<li class="nav-item col-6 col-xl-auto"><a class="nav-link" href="#">Impressum</a></li>
</ul>
</div>
</nav>
<div class="container">
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
I tried the following rules, but none worked:
text-align: left;
align-content: left;
align-items: left;
float: left;
Change the Compagny tag to span, put a "h3" class on it to keep font-size and put this span IN the link of your brand. It is not in left because it is not in the link tag.
And no need a navbar-brand class on span Company.
<a href="#" class="navbar-brand">
<img class="rounded" src="assets/company-name.png" alt="Company Logo" />
<span class="h3">Company</span>
</a>
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;
}
}
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?
Hi I'm trying to get the image to show when on small screens i have managed to do this by using the code from another question however i need the image to sit in the jumbotron without stopping the video being played on screens bigger than 400-500px. would appreciate sine guidance thanks in advance. i have tried to add a code pen sadly it wont work for me. i have added a screen shot showing what happens hope this helps.
jum image
body {
margin-top: 190px;
font-size: 2.9vmin;
}
h1 {
font-size: 4.5vmin;
}
h2 {
font-size: 4.5vmin;
}
h3 {
font-size: 4.5vmin;
}
.display-3 {
font-size: 6.5vmin
}
.display-4 {
font-size: 6.5vmin
}
.navbar {
box-shadow: 2px 2px 5px #663735;
opacity: 0.9;
background: #fff;
}
.navbar .nav-item {
font-size: 1.1rem;
}
img.logo {
padding-top: 0px;
padding-bottom: 30px;
width: 300px;
height: 180px;
}
.jumbotron {
position: relative;
overflow: hidden;
background-color: black;
opacity: 0.7;
background-size: cover;
min-width: 0;
}
.jumbotron video {
position: absolute;
z-index: 1;
top: 0;
min-height: 100%;
min-width: 100%;
width: 100%;
height: 100%;
/* object-fit is not supported on IE */
object-fit: cover;
opacity: 0.5;
}
.jumbotron .container {
z-index: 2;
position: relative;
}
#jumbotron-bg {
display: none;
}
#video video {
width: 100%;
}
#media (max-width: 500px) {
#video {
display: none;
}
#jumbotron-bg {
display: block;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">
<link rel="stylesheet" href="/bootstrap.css">
<link rel="stylesheet" href="/style.css">
<title>Law City | Home Page</title>
</head>
<section>
<body id="home" data-spy="scroll" data-target="#main-nav">
<nav class="navbar navbar-expand-md navbar-light fixed-top py-0" id="main-nav">
<div class="container">
<a href="index.html" class="navbar-brand">
<img src="LogoTransparent (1).png" class="logo">
<h3 class="d-inline align-middle"></h3>
</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
Home
</li>
<li class="nav-item">
About
</li>
<li class="nav-item">
Manifesto
</li>
<li class="nav-item">
Blog
</li>
<li class="nav-item">
Opportunities
</li>
<li class="nav-item">
Events
</li>
<li class="nav-item">
Gallery
</li>
<li class="nav-item">
Contact
</li>
</ul>
</div>
</div>
</nav>
</section>
<Section>
<div class="jumbotron jumbotron-fluid container-fluid" style="align-items: center;">
<div class="overlay"></div>
<div class="inner">
<div id="video">
<video autoplay muted loop poster="#">
<source src="/thecity.mp4" type="video/mp4"/>
</video>
</div>
<div class="container text-white py-3">
<h1 class="display-3">LAW CITY</h1>
<p class="lead">Connecting future lawyers with the legal sector in the city of London</p>
<div>
<ul class="social_Jumbotron_ul">
<li><i class="fab fa-facebook-f" style="color: black;"></i></li>
<li><i class="fab fa-twitter" style="color: black;"></i></li>
<li><i class="fab fa-linkedin" style="color: black; "></i></li>
<li><i class="fab fa-instagram" style="color: black;"></i></li>
</ul>
</div>
</div>
<hr class="my-4">
</div>
<!-- /.container -->
<div id="jumbotron-bg">
<img src="citylon.jpg">
</div>
</div>
<!-- /.jumbotron -->
</Section>
turns out i managed to solve it by playing round in CSS!! yeeh!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">
<link rel="stylesheet" href="/bootstrap.css">
<link rel="stylesheet" href="/style.css">
<title>Law City | Home Page</title>
</head>
<section>
<body id="home" data-spy="scroll" data-target="#main-nav">
<nav class="navbar navbar-expand-md navbar-light fixed-top py-0" id="main-nav">
<div class="container">
<a href="index.html" class="navbar-brand" >
<img src="LogoTransparent (1).png" class="logo">
<h3 class="d-inline align-middle"></h3>
</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
Home
</li>
<li class="nav-item">
About
</li>
<li class="nav-item">
Manifesto
</li>
<li class="nav-item">
Blog
</li>
<li class="nav-item">
Opportunities
</li>
<li class="nav-item">
Events
</li>
<li class="nav-item">
Gallery
</li>
<li class="nav-item">
Contact
</li>
</ul>
</div>
</div>
</nav>
</section>
<Section>
<div class="jumbotron jumbotron-fluid container-fluid" style="align-items: center;">
<div id="jumbotron-bg">
<img src="citylon.jpg">
</div>
<div class="overlay"></div>
<div class="inner">
<div id="video">
<video autoplay muted loop poster="#">
<source src="/thecity.mp4" type="video/mp4"/>
</video>
</div>
<div class="container text-white py-3" >
body {
margin-top: 190px;
font-size: 2.9vmin;
}
h1 {
font-size: 4.5vmin;
}
h2 {
font-size: 4.5vmin;}
h3 {
font-size: 4.5vmin;}
.display-3 {font-size: 6.5vmin}
.display-4 {font-size: 6.5vmin}
.navbar {
box-shadow: 2px 2px 5px #663735;
opacity: 0.9;
background: #fff; }
.navbar .nav-item {
font-size: 1.1rem;
}
img.logo {
padding-top: 0px;
padding-bottom: 30px;
width: 300px;
height: 180px;
}
.jumbotron {
position: relative;
overflow: hidden;
background-color:black;
opacity:0.7;
background-size: cover;
min-width: 0;
}
.jumbotron video {
position: absolute;
z-index: 1;
top: 0;
min-height: 100%;
min-width: 100%;
width:100%;
height:100%;
/* object-fit is not supported on IE */
object-fit: cover;
opacity:0.5;
}
.jumbotron .container {
z-index: 2;
position: relative;
}
#jumbotron-bg {
display: none;
}
#video video{
width:100%;
}
#media (max-width: 500px) {
#video {
display: none;
}
#jumbotron-bg {
display: block;
position: absolute;
z-index: 1;
top: 0;
min-height: 100%;
min-width: 100%;
width:100%;
height:100%;
/* object-fit is not supported on IE */
object-fit: cover;
opacity:0.5;
}
}