Hello i have just started to learn to code today and i decided to start with html and css.
I'm making and website template / layout using html css and bootstrap 4.
But i have run into a problem with my divs being wider than my header and navigation bar when not responsive and can't seem to work out why and was hoping maybe someone could tell me why.
Image of my divs being wider
I'm also trying to float / angle two of the last links in the navigation bar to the right but they don't.
* {
box-sizing: border-box;
}
html {
height: 100%;
font-family: "Hammersmith One", Hammersmith One, sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Hammersmith One", Hammersmith One, sans-serif;
}
body {
margin: 1em 10em;
font-size: 0.8750em;
color: rgb(255, 255, 255);
background-color: rgb(255, 255, 222);
}
header {
margin-bottom: 1em;
background-color: rgb(0, 0, 0, 0.4);
border-radius: 5px;
border: 2px solid rgb(0, 0, 0);
}
nav {
margin-bottom: 1em;
overflow: hidden;
color: rgb(255, 255, 255);
background-color: rgb(0, 0, 0, 0.4);
border-radius: 5px;
border: 2px solid rgb(0, 0, 0);
}
nav a {
float: left;
display: block;
color: rgb(242, 242, 242);
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-weight: bold;
}
nav a:hover {
background-color: rgb(71, 149, 13);
color: rgb(242, 242, 242);
;
}
.card {
margin-bottom: 1em;
background-color: rgb(0, 0, 0, 0.4);
border-radius: 5px;
border: 2px solid rgb(0, 0, 0);
}
.leftcolumn {
float: left;
width: 75%;
}
.rightcolumn {
float: left;
width: 25%;
padding-left: 20px;
}
.row:after {
content: "";
display: table;
clear: both;
}
footer {
font-size: 16px;
color: rgb(255, 255, 255, 0.4);
text-shadow: 0 1px 3px rgb(0, 0, 0, 0.2);
}
#media screen and (max-width: 800px) {
.leftcolumn,
.rightcolumn {
width: 100%;
padding: 0;
}
}
<!DOCTYPE html>
<html>
<head>
<title>My website</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Hammersmith One" rel="stylesheet" />
</head>
<body>
<header class="container-fluid text-center">
<h1>My Header</h1>
<p>Text Here</p>
</header>
<nav class="navbar navbar-expand-sm" id="navbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
<li class="nav-item" style="float:right">
<a class="nav-link" href="#">Link 4</a>
</li>
<li class="nav-item" style="float:right">
<a class="nav-link" href="#">Link 5</a>
</li>
</ul>
</nav>
<div class="row">
<div class="leftcolumn">
<div class="card">
<h5 class="card-header bg-dark text-center">Card Header</h5>
<div class="card-body text-center">Card Body Content</div>
</div>
</div>
<div class="rightcolumn">
<div class="card">
<h5 class="card-header bg-dark text-center">Card Header</h5>
<div class="card-body text-center">Card Body Content</div>
</div>
<div class="card">
<h5 class="card-header bg-dark text-center">Card Header</h5>
<div class="card-body text-center">Card Body Content</div>
</div>
<div class="card">
<h5 class="card-header bg-dark text-center">Card Header</h5>
<div class="card-body text-center">Card Body Content</div>
</div>
</div>
</div>
<footer class="container-fluid text-center fixed-bottom">
<p><b>Footer Text</b></p>
</footer>
</body>
</html>
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;
}
}
I would like to align the two buttons on the middle line and also align the white balls on the line, I've tried using position with CSS but I didn't succeed, I'm not good at design, and I also don't know how to be responsive on all devices
Could someone please help me? I don't know what to do to adjust this
I don't think it is the best approach, but could be considered as an option
Try modifying the left value of the following:
.tabs_inner .tab-content .tab-pane .list:before {
left: 50.5% // was 46%
}
This would fix your issue until the screen size gets lower than 500px. You might have to change the left value again for the lower screen sizes.
Hope this helped!
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<style>
.mytabs_area {
background-image: -moz-linear-gradient(0deg, #766dff 0%, #88f3ff 100%);
background-image: -webkit-linear-gradient(0deg, #766dff 0%, #88f3ff 100%);
background-image: -ms-linear-gradient(0deg, #766dff 0%, #88f3ff 100%);
}
.p_120 {
padding-top: 120px;
padding-bottom: 120px;
}
#media (max-width: 575px) {
.p_120 {
padding-top: 70px;
padding-bottom: 70px;
}
}
.tabs_inner .nav.nav-tabs {
display: block;
text-align: center;
border: none;
margin-bottom: 120px;
}
.tabs_inner .nav.nav-tabs li {
display: inline-block;
margin-right: 8px;
}
.tabs_inner .nav.nav-tabs li a {
margin: 0px;
line-height: 50px;
border-radius: 5px;
padding: 0px 40px;
font-size: 13px;
font-weight: 500;
color: #fff;
font-family: "Roboto", sans-serif;
border: 1px solid #9ab5f5;
background: rgba(255, 255, 255, 0.1);
}
.tabs_inner .nav.nav-tabs li a.active {
background: #fff;
color: #222222;
}
.tabs_inner .tab-content .tab-pane .list {
max-width: 460px;
margin: auto;
position: relative;
padding-top: 40px;
padding-bottom: 60px;
}
.tabs_inner .tab-content .tab-pane .list:before {
content: "";
height: 100%;
width: 5px;
background: rgba(255, 255, 255, 0.2);
position: absolute;
left: 46%;
transform: translateX(-50%);
top: -5px;
}
.tabs_inner .tab-content .tab-pane .list li {
margin-bottom: 60px;
position: relative;
}
.tabs_inner .tab-content .tab-pane .list li span {
height: 15px;
width: 15px;
border-radius: 50%;
display: block;
background: rgba(255, 255, 255, 0.2);
position: relative;
left: 8.6rem;
top: 2.1rem;
transform: translateX(-50%);
}
.tabs_inner .tab-content .tab-pane .list li span:before {
content: '';
height: 7px;
width: 7px;
background: #fff;
border-radius: 50%;
position: absolute;
left: 52%;
top: 4px;
transform: translateX(-50%);
}
.tabs_inner .tab-content .tab-pane .list li:last-child {
margin-bottom: 0px;
}
.tabs_inner .tab-content .tab-pane .list li .media .d-flex {
padding-right: 100px;
}
.tabs_inner .tab-content .tab-pane .list li .media .d-flex p {
color: rgba(255, 255, 255, 0.75);
margin-bottom: 0px;
padding-top: 20px;
position: relative;
right: 2rem;
}
.tabs_inner .tab-content .tab-pane .list li .media .media-body h4 {
color: #fff;
font-size: 21px;
text-transform: uppercase;
margin-bottom: 20px;
}
.tabs_inner .tab-content .tab-pane .list li .media .media-body p {
color: rgba(255, 255, 255, 0.75);
margin-bottom: 0px;
}
.tabs_inner .tab-content .tab-pane .list li .media .media-body h4 {
color: #fff;
font-size: 21px;
text-transform: uppercase;
margin-bottom: 20px;
}
.tabs_inner .tab-content .tab-pane .list li .media .d-flex p {
color: rgba(255, 255, 255, 0.75);
margin-bottom: 0px;
padding-top: 20px;
}
</style>
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<section class="mytabs_area p_120">
<div class="container">
<div class="tabs_inner">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab"
aria-controls="home" aria-selected="true">My Experiences</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab"
aria-controls="profile" aria-selected="false">My Education</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<ul class="list">
<li>
<span></span>
<div class="media">
<div class="d-flex">
<p>March 2017 to present</p>
</div>
<div class="media-body">
<h4>Colorlib</h4>
<p>Senior Web Developer <br />Santa monica, Los angeles</p>
</div>
</div>
</li>
<li>
<span></span>
<div class="media">
<div class="d-flex">
<p>March 2017 to present</p>
</div>
<div class="media-body">
<h4>Colorlib</h4>
<p>Senior Web Developer <br />Santa monica, Los angeles</p>
</div>
</div>
</li>
<li>
<span></span>
<div class="media">
<div class="d-flex">
<p>March 2017 to present</p>
</div>
<div class="media-body">
<h4>Colorlib</h4>
<p>Senior Web Developer <br />Santa monica, Los angeles</p>
</div>
</div>
</li>
</ul>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<ul class="list">
<li>
<span></span>
<div class="media">
<div class="d-flex">
<p>March 2017 to present</p>
</div>
<div class="media-body">
<h4>Colorlib</h4>
<p>Senior Web Developer <br />Santa monica, Los angeles</p>
</div>
</div>
</li>
<li>
<span></span>
<div class="media">
<div class="d-flex">
<p>March 2017 to present</p>
</div>
<div class="media-body">
<h4>Colorlib</h4>
<p>Senior Web Developer <br />Santa monica, Los angeles</p>
</div>
</div>
</li>
<li>
<span></span>
<div class="media">
<div class="d-flex">
<p>March 2017 to present</p>
</div>
<div class="media-body">
<h4>Colorlib</h4>
<p>Senior Web Developer <br />Santa monica, Los angeles</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous">
</script>
</body>
</html>
Code updated: Just swap with yours.
Explanation:
I have changed the position of the text and the white button to relative and replace it on aligned form.
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
I'm new to html and css and in my class my teach wants us to make a resume with bootstrap. Obviously the whole point of bootstrap is to be interactive in switching between devices. Im trying to work on aligning stuff and i want my navbar to disappear when I shrink the page. How could I do that?
HTML
<!-- Bootstrap Import -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- Meta Tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Titile and Style -->
<title>CadenGS's Resume</title>
<link href="https://fonts.googleapis.com/css2?family=Saira+Extra+Condensed:wght#700&display=swap" rel="stylesheet">
<script src="script.js"></script>
<link rel="stylesheet" href="style.css" type="text/css">
<!-- Navbar on Side -->
<nav class="navbar navbar-expand-lg col-lg-2 flex-direction-column justify-content-center">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar List Items -->
<img id="pfp" src="Images/user_photo.jpg">
<br>
<ul class="navbar-nav f-flex flex-column">
<li class="nav-item active">
<a class="nav-link" href="#top">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#exp">Experience</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Education</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Awards</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Examples</a>
</li>
</ul>
</nav>
<section>
<!-- Used To Scroll To Top of Page for Picture and About on Navbar -->
<p id="top">.</p>
<!-- Content Start -->
<div id="main" class="container margin-top-10%">
<h1 id="primaryName" class="display-2">Caden <span id="secondaryName">Serrato</span></h1>
<!-- Interactive Contacts -->
<p class="info" class="display-4"><em>
<a class="infoLink" onclick="call();">(786) 442-6148</a> ยท <a class="infoLink"
href="emailFiles/email.html" target="_blank">#cserrato21352#columbushs.com</a></em></p>
<br>
<p class="info2 display-4"><strong><em>I am a Senior High School Student looking to go into the Field of
Engineeing. My
goal is to dual major in Mechanical</em></strong></p>
<p class="info2 display-4" style="text-indent: 80px; margin-top: -10px;"><strong><em>and Engineering, and
hopefully one day work at
Boston Dynamics.</em></strong></p>
<!-- Socials -->
<div id="socials" class="d-flex flex-direction-row" style="margin-top: 7%;">
<!-- Github -->
<div class="socialHolder">
<a href="https://github.com/CadenCGS" target="_about">
<div class="socialLinks">
<img id="gitSocialImg" src="Images/gitSocial.jpg">
</div>
</a>
</div>
<!-- Instagram -->
<div class="socialHolder">
<a href="https://www.instagram.com/cadenserrato/" target="_about">
<div class="socialLinks">
<img id="igSocialImg" src="Images/igSocial.png">
</div>
</a>
</div>
<!-- Facebook -->
<div class="socialHolder">
<a href="https://www.facebook.com/ColumbusHS/" target="_about">
<div class="socialLinks">
<img id="fbSocialImg" src="Images/fbSocial.png">
</div>
</a>
</div>
<!-- LinkedIn -->
<div class="socialHolder">
<a href="https://www.linkedin.com" target="_about">
<div class="socialLinks">
<img id="liSocialImg" src="Images/liSocial.png">
</div>
</a>
</div>
</div>
</div>
<!-- Used To Scroll To Experience on Navbar -->
<p id="exp">.</p>
<hr class="pageBreak">
<!-- Experience Section -->
<div id="experience" class="container">
<h1 style="margin-top: 8%; text-indent: 35px; color: rgba(63, 158, 253, .9);"
class="subSectionName display-3">
Experience</h1>
<h1 style="text-indent: 60px; font-size: 3rem; margin-top: 2%;" class="subSectionName display-4">Robotics
</h1>
<br>
<p class="info2 display-4" style="text-indent: 120px;"><strong><em>I started my first year as a simple
builder
as
I
learned the basics of Vex. My second year I was a bit more</em></strong></p>
<p class="info2 display-4" style="text-indent: 60px; margin-top: -10px;"><strong><em> experienced and began
to
build
for advanced and
complicated
mechanisms. I built all year and ended up finishing </em></strong></p>
<p class="info2 display-4" style="text-indent: 80px; margin-top: -10px;"><strong><em>in 8th place at the
state
championship my team qualified for.</em></strong></p>
<div class="container">
<hr id="aboveDate">
<p class="info2 display-4" style="text-indent: 100px; margin-top: 2%;"><strong>Date: <span
style="color: rgba(63, 158, 253, 1);">August 2018 -
Present</span></strong></p>
</div>
</div>
</section>
<!-- Bootstrap Scripts -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous">
</script>
CSS
height: 4000px;
background-color: rgb(248, 248, 239);
}
html {
background-color: rgb(248, 248, 239);
scroll-behavior: smooth;
}
.navbar {
background-color: rgba(63, 158, 253, .9);
height: 100%;
position: fixed;
text-align: center;
flex-direction: column;
border-right: 9px solid rgb(168, 211, 255);
}
ul {
display: flex;
justify-content: center;
}
.nav-link {
transition: all .25s;
color: rgba(255, 255, 255, 0.726);
font-size: 1.5rem;
}
.nav-link:hover {
transition: all .25s;
color: white;
text-shadow: darkslategrey;
font-size: 1.7rem;
}
#pfp {
border: 9px solid rgba(255, 255, 255, .4);
border-radius: 50%;
height: 160px;
width: 160px;
position: static;
margin-bottom: 20px;
}
#primaryName {
font-family: 'Saira Extra Condensed';
color: rgb(146, 146, 146);
font-size: 6rem;
}
#secondaryName {
font-family: 'Saira Extra Condensed';
color: rgba(63, 158, 253, .9);
font-size: 6rem;
}
#main {
padding-top: 10%;
margin-left: 7%;
}
.info {
font-size: 1.7rem;
}
.info2 {
font-size: 1.3rem;
text-indent: 30px;
}
#top,
#exp {
color: rgba(63, 158, 253, 0);
}
.infoLink {
text-decoration: none;
font-family: 'Saira Extra Condensed';
color: rgb(110, 110, 110);
}
.infoLink:hover {
color: black;
}
#emailLink {
text-decoration: none;
color: black;
}
.socialHolder {
margin-left: 3%;
}
.socialLinks {
height: 65px;
width: 65px;
border-radius: 50%;
background-color: rgb(146, 146, 146);
display: flex;
justify-content: center;
transition: all .25s;
}
.socialLinks:hover {
transition: all .25s;
background-color: rgb(75, 75, 75);
}
#gitSocialImg {
border-radius: 50%;
height: 55%;
width: 55%;
margin-top: 25%;
}
#igSocialImg {
border-radius: 50%;
height: 80%;
width: 80%;
margin-top: 11%;
}
#fbSocialImg {
border-radius: 50%;
height: 55%;
width: 55%;
margin-top: 22%;
}
#liSocialImg {
border-radius: 50%;
height: 55%;
width: 55%;
margin-top: 22%;
}
.pageBreak {
border: 2px solid rgba(63, 158, 253, .9);
width: 85%;
margin-top: 4%;
margin-right: 13%;
}
.subSectionName {
font-family: 'Saira Extra Condensed';
color: rgb(146, 146, 146);
}
.subSectionInfo {
font-family: 'Saira Extra Condensed';
color: rgb(110, 110, 110);
font-size: 1.7rem;
margin-left: 60px;
}
#experience {
margin-left: 4.6%;
}
#aboveDate {
border: 2px solid rgba(63, 158, 253, .9);
width: 27.5%;
margin-left: 6%;
margin-bottom: -1%;
}```
You can write a media query and than do display: none; on the element you want to disappear.
Example:
#media (max-width: 800px) {
.navbar {
display: none;
}
}
I know this question has been answered but I am having extreme difficulty using the answers given before and applying them into my code.
I am making an tab-pane with different images. I want to put the image in the lighter orange section on the right with the text on the left. However, this tab is placed onto a wrapper and it's confusing me with the indexes.
In addition, all the solutions that work without considering the wrapper doesn't work when I use XXAMP.
Below is what I have so far and applies to the description :
Here is the code I have so far:
body {
background-color: #FFF;
background-image: url(../media/style/background.jpg);
font-family: helvetica;
background-repeat: no-repeat;
background-size: cover;
overflow-x: hidden;
background-attachment: fixed;
}
#wrapper img {
width: 80%;
height: 60%;
}
#wrapper {
width: 900px;
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
margin-top: 20;
margin-right: auto;
margin-bottom: 20;
margin-left: auto;
height: auto;
border: medium none #9C0;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.images {
position: relative;
text-align: center;
}
.tab-content {
width: 825px;
border-bottom: 2px solid white;
border-right: 2px solid white;
border-left: 2px solid white;
border-top: 2px solid white;
padding: 13px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: right;
}
.nav-tabs {
margin-bottom: 0;
width: 805px;
}
.tab-content {
display: block;
background-color: rgba(245, 172, 64, 0.9);
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.1) 50%, #F4B350 50%);
min-height: 300px;
z-index: -1;
}
.tab-content img {
position: relative;
width: 58vw;
height: 42vw;
}
.container a {
background-color: rgba(245, 172, 64, 0.9);
color: black;
}
.tab-content p {
font-size: 15px;
}
.tab-content h3 {
font-size: 28px;
}
#tab1 h3 p {
background-color: white;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta charset="UTF-8" />
<title>Hanler Products - Home</title>
</head>
<body>
<!-- TAB -->
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#tab1">Upright Towbar Caddy</a></li>
<li><a data-toggle="tab" href="#tab2">Upright Trailer lid Caddy</a></li>
<li><a data-toggle="tab" href="#tab3">Park Stand</a></li>
<li><a data-toggle="tab" href="#tab4">Gates / Burglar Bars / Security Gates</a></li>
<li><a data-toggle="tab" href="#tab5">Fences</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane fade in active">
<div class="box">
<h3>Upright Towbar Caddy</h3>
<p>Ideal for short trips to school and back.</p>
</div>
<img src="media/style/slider/UTC.jpg" alt="Upright Towbar Caddy">
</div>
<div id="tab2" class="tab-pane fade">
<h3>Upright Trailer lid Caddy</h3>
<p>Now, taking your cycles on holiday, is a breeze.</p>
<img src="media/style/UTC.jpg" alt="Upright Trailer lid Caddy" />
</div>
<div id="tab3" class="tab-pane fade">
<h3>Park Stand</h3>
<p>Ideal for parking bikes at shops, schools and at shopping malls.<br/>The parkstand could prevent damage to vehicles <br/> in parking areas.<br/>The bike could also be chained to be stand <br/> to protect it from being stolen.</p>
</div>
<div id="tab4" class="tab-pane fade">
<h3>Gates / Burglar Bars / Security Gates</h3>
<p>Custom security bars to keep you and your belongings safe.</p>
</div>
<div id="tab5" class="tab-pane fade">
<h3>Fences</h3>
<p>Custom fencing for your home and/or business.</p>
</div>
</div>
</div>
</body>
</html>
Try pulling the text to the left, like this;
<div class="tab-content">
<div id="tab1" class="tab-pane fade in active">
<div class="box pull-left">