Below you will find my bootstrap 4 code. On the bottom of the code, you will see "why is this section not bellow the video"
I can't seem to figure out why that code is not in a new section below the code.
I know this is a user issue, I just cant seem to figure out why. Any help would be greatly appreciated!
/* font-family: 'Paytone One', sans-serif;
font-family: 'Questrial', sans-serif; */
.questrial {
font-family: 'Questrial', sans-serif;
}
/* .green-back{
background: rgb(215,255,206);
background: linear-gradient(90deg, rgba(215,255,206,1) 5%, rgba(186,202,224,1) 100%);
height: 95vh;
margin: 1em;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
} */
.navbar-brand {
padding-left: 2%;
}
.logoImg {
height: 2em;
width: auto;
}
video {
/* width: 100% !important;
height: auto !important; */
position: fixed;
top: 50%;
left: 50%;
width: 100vw;
height: auto;
z-index: -100;
transform: translate(-50%, -50%);
}
.navbar {
margin-top: 3vh;
margin: 1em;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: 1px solid rgb(230, 230, 230);
}
.space {
margin-left: 2%;
margin-right: 2%;
}
.headBtn {
height: 70%;
margin-top: 2%;
margin-right: 1em;
}
.signUpBtn,
.signInBtn {
margin-right: 30px;
}
#signIn {
background-color: #d7d7d7;
border: 1px solid #7b7b7b;
font: bold;
}
#signUp {
background-color: rgb(145, 145, 145);
border: 1px solid #7b7b7b;
color: white;
}
#media (min-width: 768px) {
.navbar-brand.abs {
position: absolute;
width: 100%;
left: 0;
text-align: center;
}
}
.headingIntro {
font-size: 2vw;
color: #79787A;
padding-top: 10vh;
}
.headingMain {
font-size: 5vw;
color: rgb(65, 65, 65);
}
.headingContent {
font-size: 2vw;
color: rgb(65, 65, 65);
}
.btn-primary {
background-color: rgb(60, 60, 60);
}
.heroButton {
margin-top: 10%;
width: 20vw;
}
.heroButton:hover {
background-color: green;
}
.charityText {
padding-top: 1%;
}
.heroTextBack {
background-color: rgb(245, 245, 245, .8);
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#media (max-width: 576px) {
.heroButton {
margin-top: 10%;
width: 20vw;
}
.headingIntro {
font-size: 4vw;
color: #79787A;
padding-top: 4vh;
}
.headingMain {
font-size: 7vw;
color: rgb(65, 65, 65);
}
.headingContent {
font-size: 4vw;
color: rgb(65, 65, 65);
}
.btn-primary {
background-color: rgb(60, 60, 60);
}
.charityText {
padding-top: 1%;
}
.navbar-brand {
padding-left: 0%;
}
/* .buttonGrp{
display: inline;
} */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>meetlete: meet your favorite atheletes!</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Paytone+One&family=Questrial&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="./assets/style.css">
</head>
<body>
<div class="conatiner green-back">
<div class="row">
<div class="col-12">
<video playsinline autoplay muted loop>
<source src="https://meetlete.s3-us-west-1.amazonaws.com/FP000091HD01.mp4" type="video/mp4">
<source src="https://meetlete.s3-us-west-1.amazonaws.com/FP000091HD01.mp4" type="video/ogg">
Your browser does not support the video tag.
</video>
<!-- <video playsinline autoplay muted loop
src="https://meetlete.s3-us-west-1.amazonaws.com/FP000091HD01.mp4">
</video> -->
</div>
</div>
<div class="row">
<div class="col-12">
<!-- Navbear -->
<nav class="navbar navbar-light navbar-expand-md bg-light justify-content-center questrial">
<a href="./index.html" class="navbar-brand d-flex w-50 mr-auto">
<img src="./assets/images/meetlete.png" class="logoImg">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar3">
<span class="navbar-toggler-icon">
</span>
</button>
<div class="navbar-collapse collapse w-100" id="collapsingNavbar3">
<ul class="navbar-nav w-100 justify-content-center">
<li class="nav-item active">
<a class="nav-link" href="#">Learn
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact
</a>
</li>
</ul>
<ul class="nav navbar-nav ml-auto w-100 justify-content-end">
<li class="nav-item headBtn">
<button class="nav-link" id="signIn" href="#">Sign In
</button>
</li>
<li class="space headBtn">
</li>
<li class="nav-item headBtn">
<button class="nav-link" id="signUp" href="#">Sign Up
</button>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="container heroTextBack">
<div class="row">
<div class="col-12">
<h2 class="text-center headingIntro questrial">Introducing Meetlete (beta)</h2>
</div>
</div>
<div class="row">
<div class="col-12 text-center">
<h1 class='headingMain questrial'>Meet your favorite athlete!</h1>
</div>
</div>
<div class="row">
<div class="col-1">
</div>
<div class="col-10 text-center questrial">
<h3 class="headingContent">As a fan, how many opportunities do you get to have a real conversation with one of your favorite players or sports personalities?</h3>
</div>
</div>
<div class="row questrial">
<div class="col-3"></div>
<div class="col-3 text-center buttonGrp">
<button type="button" class="btn btn-primary heroButton">Sign Up</button>
</div>
<div class="col-3 text-center buttonGrp">
<button type="button" class="btn btn-outline-success heroButton">Talent</button>
</div>
</div>
<div class="row questrial">
<div class="col-12">
<p class='text-center charityText'>A porition of each Meetlete goes to charity!</p>
</div>
</div>
<div class="row">
<div class="col-12">
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">Why is this not bellow the video</div>
</div>
</div>
<!-- <nav class="navbar navbar-expand-md navbar-light bg-light myFont">
<a href="#" class="navbar-brand">
<img src="./assets/images/meetlete-logo-text.png" height="40px" alt="CoolBrand">
</a>
<button type="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">
<a class="nav-link" href="#">Right</a>
</li>
</div>
</div>
</nav> -->
<!-- bootstrap js file-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous">
</script>
</body>
</html>
The reason is bcuz yow video tag has a position fixed which means that it does not belongs to the dom
Related
I want the image in my site to completely change when the browser is resized.
I've been using media-queries, but I can't seem to get it right. Any thoughts/tips?
The thing is I have tried the display trick with media query but its not working
I did this, but it's not working even when I am lowering the viewport. The image in the laptop viewport remains the same in the phone viewport.
.blocks {
height: 58%;
}
.mob {
display: none;
}
#media (max-width:400px) {
.mob {
display: block;
}
.blocks {
display: none;
}
}
<div class="col-lg-6 border:1px">
<img class="blocks" src="https://via.placeholder.com/200" alt="laptop-mockup">
<img class="mob" src="https://via.placeholder.com/200/ff0000" alt="android-mockup">
</div>
The whole html and css code:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>News homepage</title>
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.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=Poppins:wght#400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght#600;700;800&family=PT+Sans:wght#700&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="navigator">
<nav class="navbar navbar-expand-sm navbar-dark navbar-light">
<a class="navbar-brand" href=""> <img src="C:\Users\91826\Desktop\news-homepage-main\css\images\logo.svg" alt="My Happy SVG" /></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 navbar-light">
<span class="navbar-toggler-icon navi"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto">
<li class="nav-item ms-auto navelement">
<a class="nav-link " href="#footer">Home </a>
</li>
<li class="nav-item ms-auto navelement">
<a class="nav-link " href="#pricing"> New </a>
</li>
<li class="nav-item ms-auto navelement">
<a class="nav-link " href="#cta"> Popular </a>
</li>
<li class="nav-item ms-auto navelement">
<a class="nav-link" href="#footer"> Trending </a>
</li>
<li class="nav-item ms-auto navelement">
<a class="nav-link " href="#footer"> Categories </a>
</li>
</ul>
</div>
</nav>
</div>
<div class="row ">
<div class="col-lg-6 border:1px">
<img class="blocks" src="C:\Users\91826\Desktop\news-homepage-main\css\images\image-web-3-desktop.jpg" alt="laptop-mockup">
<img class="mob" src="C:\Users\91826\Desktop\news-homepage-main\css\images\image-web-3-mobile.jpg" alt="android-mockup">
</div>
<div class="tag">
<h1 class="tagline">The Bright<br />Future of<br />Web 3.0?</h1>
</div>
<div class="read">
<h1 class="readline">We dive into the next evolution of the web that claims to put the power of the platforms back into the hands of the people.
But is it really fulfilling its promise?</h1>
</div>
<button class="button-50 readmore" type="button" name="button">READ MORE</button>
<div class="col-lg-6 border:1px">
<div class="new">
<h1>New</h1>
<h2>Hydrogen VS Electric Cars</h2>
<h3>Will hydrogen-fueled cars ever catch up to EVs?</h3>
<hr>
<h2>The Downsides of AI Artistry</h2>
<h3>What are the possible adverse effects of on-demand AI image generation?</h3>
<hr>
<h2>Is VC Funding Drying Up?</h2>
<h3>Private funding by VC firms is down 50% YOY. We take a look at what that means.</h3>
</div>
</div>
</div>
</div>
<div class="info">
<div class="row">
<div class="col-lg-4 box">
<div class="row">
<div class="col-lg-2 box">
<img class="infoimg" src="C:\Users\91826\Desktop\news-homepage-main\css\images\image-retro-pcs.jpg" alt="" />
</div>
<div class="col-lg-2 box">
<div class="inf">
<h1 class="infohead1 "> 01</h1>
<h2 class="infohead2"> Reviving Retro PCs</h2>
<h3 class="infohead3"> What happens when old PCs<br>are given modern upgrades?</h3>
</div>
</div>
</div>
</div>
<div class="col-lg-4 box2">
<div class="row">
<div class="col-lg-2 box">
<img class="infoimg" src="C:\Users\91826\Desktop\news-homepage-main\css\images\image-gaming-growth.jpg" alt="">
</div>
<div class="col-lg-2 box">
<div class="inf1 inf">
<h1 class="infohead1"> 02</h1>
<h2 class="infohead2"> Top 10 laptops of 2022</h2>
<h3 class="infohead3">Our best picks for various <br> needs and budgets.</h3>
</div>
</div>
</div>
</div>
<div class="col-lg-4 box2">
<div class="row">
<div class="col-lg-2 box">
<img class="infoimg" src="C:\Users\91826\Desktop\news-homepage-main\css\images\image-top-laptops.jpg" alt="">
</div>
<div class="col-lg-2 box">
<div class="inf">
<h1 class="infohead1"> 03</h1>
<h2 class="infohead2"> The Growth of Gaming</h2>
<h3 class="infohead3">How the pandemic has sparked <br> fresh opportunities.</h3>
</div>
</div>
</div>
</div>
</div>
<hr class="hori">
<div class="attribution">
Challenge by Frontend Mentor.
Coded by Saswat Seth.
</div>
</body>
</html>
CSS
.navigator {
margin-bottom: 2%;
}
body {
padding: 0% 10% 2% 10%;
}
.nav-link {
color: black;
}
:hover.nav-link {
color: #6B728E;
}
.navigator {
padding: 2% 5% 0% 0%;
}
.blocks {
height: 58%;
}
.mob {
display: none;
}
#media (max-width:400px) {
.mob {
display:block;
}
.blocks {
display:none;
}
}
.new {
height: 85%;
width: 23%;
background: hsl(240, 100%, 5%);
position: absolute;
right: 140px;
padding: 2%;
}
.navelement {
padding-right: 6%;
font-size: 100%;
}
h1 {
color: hsl(35, 77%, 62%);
font-family: 'noto sans';
font-weight: 600;
}
h2 {
color: #fff;
font-size: 23px;
margin-top: 10%;
font-family: 'noto sans';
font-weight: 700;
}
h3 {
color: #6B728E;
font-size: 15px;
padding: 4% 0%;
line-height: 25px;
}
hr {
color: #fff;
border-top: solid white;
}
.tag {
position: absolute;
bottom: 20px;
}
.tagline {
font-family: 'noto sans';
color: #000;
font-weight: 800;
font-size: 60px;
}
.read {
padding: 2% 38%;
position: absolute;
bottom: 54px;
right: -15px;
}
.readline {
font-size: 110%;
color: #6B728E;
line-height: 27px;
}
.button-50 {
height: 49px;
width: 200px;
appearance: button;
background-color: hsl(5, 85%, 63%);
background-image: none;
border: 1px solid #000;
border-radius: 4px;
box-shadow: #B73E3E 4px 4px 0 0, #000 4px 4px 0 1px;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: inline-block;
font-family: "Montserrat";
font-size: 18px;
font-weight: 400;
line-height: 20px;
margin: 20% 5% 10% 0%;
overflow: visible;
padding: 14px 30px;
text-align: center;
text-transform: none;
touch-action: manipulation;
user-select: none;
-webkit-user-select: none;
vertical-align: middle;
white-space: nowrap;
position: absolute;
bottom: -45px;
right: 45%;
}
.button-50:focus {
text-decoration: none;
}
.button-50:hover {
text-decoration: none;
}
.button-50:active {
box-shadow: rgba(0, 0, 0, .125) 0 3px 5px inset;
outline: 0;
}
.button-50:not([disabled]):active {
box-shadow: #C9BBCF 2px 2px 0 0, #1d1716 2px 2px 0 1px;
transform: translate(2px, 2px);
}
.readmore {
margin: 10% 3% 5% 0;
font-family: 'Poppins';
font-weight: 400;
}
.info {
margin-top: 5%;
margin-left: 10%;
position: absolute;
right: 10%;
}
.infoimg {
width: 315%;
padding: 20%;
}
.infohead1 {
color: #7D9D9C;
}
.infohead2 {
color: #000;
}
.inf {
padding: 30%;
margin-left: 68px;
white-space: nowrap;
}
.hori {
margin-top: 10%;
color: #000;
border-top: solid black;
}
#media (max-width:350px) {
img{
object-fit: cover;
height: 400px;
}
}
#media screen and (max-width:400px) {
.mob {
display: block;
}
}
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 am fairly new to coding and have a specific issue that I cannot figure out. I have a container that I want positioned differently based on the screen size. For large and mid-sized screens, I want the container left justified with a small amount of padding from the left edge, and on small screens, I want the container centered. I am using bootstraps, html, and css. See my style and code below. The container is overtop of a background image.
<!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" />
<title>Website Name</title>
<!-- MDB icon -->
<link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon" />
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" />
<!-- Google Fonts Roboto -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght#300;400;500;700&display=swap" />
<!-- MDB -->
<link rel="stylesheet" href="css/mdb.min.css" />
</head>
<style>
#media (min-width: 100%) {
#intro {
min-width: 100%;
margin-right: none;
margin-top: -58.59px;
background-color: none;
}
}
.alfa {
position: absolute;
max-width: inherit;
margin-top: 55vh;
align-items: center;
justify-content: center;
background-color: white;
color: black;
border: lightgrey;
border-style: solid;
border-width: thin;
border-radius: 0em;
font-size: 1em;
padding: 1rem 1rem 1rem 1rem;
box-shadow: 0 0 20px black
}
.no-pad {
margin-right: 0rem;
margin-left: 0rem;
}
.navbar-brand {
margin-left: 1rem;
}
.nav-item {
margin-right: 1rem;
}
.row {
font-size: 1.5em;
}
.main-button {
display: inline-flex;
align-items: center;
justify-content: center;
}
#button1 {
font-size: 1.5em;
}
</style>
<body>
<!-- Header Bar -->
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="">My Accounting Exec</a>
<!--Toggle Button-->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i title="" class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item text-center"><a class="nav-link" href="" style="color:white;">Services</a></li>
<li class="nav-item text-center"><a class="nav-link" href="" style="color:white;">Pricing</a></li>
<li class="nav-item text-center"><a class="nav-link" href="" style="color:white;">About</a></li>
<li class="nav-item text-center"><a class="nav-link" href="" style="color:white;">Contact</a></li>
</ul>
</div>
</nav>
</header>
<!-- Background-Image -->
<container>
<div class="bg-image" style="background-image: url('../MDB5-STANDARD-UI-KIT-Free-3.5.1/img/Accountant.jpg'); height: 89vh;">
<div class="Alert-Box text-center">
<div class="alfa text-center;">
<h5><b>Text Text Text</b></h5>
<div><button id="button1" type="button" class="btn btn-primary">WE ARE HERE FOR YOU!</button></div>
</div>
</div>
</div>
</container>
<!-- Service Links -->
<div class="row no-pad text-center">
<div class="col-lg-3 col-md-3 col-sm-12 d-flex align-items-center justify-content-center" style="border: solid .5px grey;
background-color: lightgrey;
height: 4.5rem;
padding: 0;">
</style>
<button href="" style="border: none; background-color: rgb(210, 210, 210); height: 100%; width: 100%; padding-left: 0mm;">
<b>Service 1</b></button>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 d-flex align-items-center justify-content-center" style="border: solid .5px grey;
height: inherit;
background-color: lightgrey;
height:4.5rem;
padding: 0;">
</style>
<button href="" style="border: none; background-color: rgb(180, 180, 180);height: 100%; width: 100%; padding-left: 0mm;">
<b>Service 2</b></button>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 d-flex align-items-center justify-content-center" style="border: solid .5px grey;
height: inherit;
background-color: lightgrey;
height:4.5rem;
padding: 0;">
</style>
<button href="" style="border: none; background-color: rgb(160, 160, 160); height: 100%; width: 100%; padding-left: 0mm;">
<b>Service 3</b></a>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 d-flex align-items-center justify-content-center"
style="border: solid .5px grey;
height: inherit;
background-color: lightgrey;
height:4.5rem;
padding: 0;"></style>
<button href=""
style="border: none; background-color: rgb(140, 140, 140); height: 100%; width: 100%; padding-left: 0mm;">
<b>Service 4</b></a>
</div>
</div>
<!-- End your project here-->
<!-- MDB -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!-- Custom scripts -->
<script type="text/javascript"></script>
<!-- Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</body>
</html>
Without reading through all of your code, you need proper media queries that establish generalized rules and mobile only rules: ie
.container {
/* CODE TO LEFT ALIGN CONTENT + padding */
}
#media only screen and (max-width: 768px) {
.container {
/* CODE TO CENTER CONTENT*/
}
}
That way you can have generalized rules and target specific screen size treshholds.
Hope that makes sense for you.
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?
Navbar collapsed menu fits perfectly to the navbar in Safari browser and occupy full width of the viewport. However, in other browsers collapsed navbar is getting smaller and sticks to the very top of the page. Looks like it is not connected to the navbar itself and drops down from another reference point. Is this a browser prefix issue or something entirely wrong with my bootstrap structure?
.navbar {
height: 60px;
padding: 0;
margin: 0;
border-bottom: .1px solid black;
background: #ffffff;
}
.navbar-nav {
margin-top: 1.5em;
}
.navBut {
margin: 20px 0;
}
.navButBut {
border: 1px solid red;
}
.navbar-toggle {
border-color: black !important;
color: snow;
height: 30px;
width: 45px;
padding: 2px 5px 0;
margin: 15px 8% 15px 0;
}
.navbar-toggle:hover {
background-color: transparent !important;
}
.dropbut {
font-size: 1.5em;
color: black;
}
.fa-korvue {
color: #962715;
font-size: 3.5em;
line-height: -45%;
float: left;
margin: 5px 8% 0 12%;
}
.link_icon, .link_icon:link, .link_icon:visited, .link_icon:active {
color: #1e1e20;
padding: 0;
margin-right: 20px;
font-family: 'Arsenal', sans-serif;
font-size: 1.2em;
text-decoration: none;
outline: 0;
cursor: pointer;
background: transparent;
}
#collapse_menu {
margin-top: 1.2em;
}
#collapse_menu li a {
padding: 3px 8px;
margin-right: 5px;
border-radius: 3px;
}
#collapse_menu li a:hover {
background-color: rgba(0, 0, 0, 0.2) !important;
}
.hidden-xs {
margin-right: 18px;
}
#phone_handset {
color: black;
font-size: 1.7em;
vertical-align: 10%;
text-decoration: none;
outline: 0;
transition: 1s;
}
#phone_num {
display: inline;
margin-right: 4em;
vertical-align: 20%;
font-size: 1.3em;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<header>
<nav class="navbar navbar-fixed-top">
<div class="container-fluid">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="fa fa-th dropbut"></span>
</button>
<i class="fab fa-korvue"></i>
<div class="collapse navbar-collapse" id="myNavbar">
<ul id="collapse_menu" class="nav navbar-nav text-center">
<li><a class="link_icon scroll" name="1" href="#top_page_scroll">Начало</a></li>
<li><a class="link_icon scroll" name="2" href="#about_me_scroll">Обо мне</a></li>
<li><a class="link_icon scroll" name="3" href="#portfolio_scroll">Услуги</a></li>
<li><a class="link_icon scroll" name="4" href="#pricing_scroll">Цены</a></li>
<li><a class="link_icon scroll" name="5" href="#contact_me_scroll">Регистрация</a></li>
</ul>
<div class="navbar-nav navbar-right vertical-align">
<a id="phone_handset" class="fas fa-phone-volume hidden-xs" href="#"></a>
<a id="phone_num" class="link_icon hidden-xs" href="#">110-223-456-78</a>
</div>
</div>
</div>
</nav>
</header>
I finally fixed this issue. If you wrap navbar-toggle with <div class=“navbar-header”> then everything starts to work as expected. Now collapsed navbar occupies full width and sits in the right place. Thank #fnostro for the valuable tips.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<header>
<nav class="navbar navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="fa fa-th dropbut"></span>
</button>
<i class="fab fa-korvue"></i>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul id="collapse_menu" class="nav navbar-nav text-center">
<li><a class="link_icon scroll" name="1" href="#top_page_scroll">Начало</a></li>
<li><a class="link_icon scroll" name="2" href="#about_me_scroll">Обо мне</a></li>
<li><a class="link_icon scroll" name="3" href="#portfolio_scroll">Услуги</a></li>
<li><a class="link_icon scroll" name="4" href="#pricing_scroll">Цены</a></li>
<li><a class="link_icon scroll" name="5" href="#contact_me_scroll">Регистрация</a></li>
</ul>
<div class="navbar-nav navbar-right vertical-align">
<a id="phone_handset" class="fas fa-phone-volume hidden-xs" href="#"></a>
<a id="phone_num" class="link_icon hidden-xs" href="#">110-223-456-78</a>
</div>
</div>
</div>
</nav>
</header>