I am using bootstrap to create a website from scratch, it's the first time I use bootstrap so I might be doing something wrong.
I am trying to implement a individual scroll panel for each of the 3 content columns, and it doesn't appear to be working as the scroll appears but grayed out and not working properly
I pasted the code below using stackoverflow html app but some elements are not displaying properly so here is a link to the fully working site as of now
body {
padding-top: 159px;
overflow: hidden;
}
html {
overflow: hidden;
}
#navbar_right {}
.container {}
#categorias {
background-color: #171717;
overflow: scroll;
height: 100%;
}
#content {
background-color: #ffffff;
}
.btn {
border-radius: 0;
}
.cat {
margin: 10% 0% 10% 15%;
position: relative;
z-index: 1;
}
#right-bar {
}
/* Menu Top Navbar */
.button {
position: relative;
background-color: inherit;
border: none;
font-size: 16px;
font-family: Roboto;
color: #ffffff;
padding: 20px;
width: 200px;
text-align: center;
-webkit-transition-duration: 0.4s;
/* Safari */
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
outline: 0;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.button:hover {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
.button:after {
content: "";
background: #ffffff;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px!important;
margin-top: -120%;
opacity: 0;
transition: all 0.8s
}
.button:active:after {
padding: 0;
margin: 0;
opacity: 1;
transition: 0s
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>ComISTo Grupo 3</title>
<meta charset="utf-8" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyhttp://stackoverflow.com/questions/ask#jSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/css/mdb.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/js/mdb.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<header class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">ComISTo</a>
</div>
<div id="navbar_right" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<!-- NavBar Buttons -->
<li><button class="button" type="button" onclick="window.location='#'; class=" active ";"><img src="images/empregado.png"/><br/>Chamar Empregado</button></li>
<li><button class="button" type="button" onclick="window.location='#'; class=" active ";"><img src="images/pagar.png"/></br>Pagar</button></li>
<li><button class="button" type="button" onclick="window.location='#'; class=" active ";"><img src="images/ajuda.png"/><br/>Ajuda</button></li>
</ul>
</div>
</header>
</nav>
<div class="container-fluid">
<!-- Content -->
<div class="row">
<!-- Sidebar -->
<div class="col-md-2" id="categorias">
<img src="images/broccoli.png" /></br> Vegetariano
<img src="images/steak.png" /></br> Carne
<img src="images/fish.png" /></br> Peixe
<img src="images/glass.png" /></br> Vinhos
<img src="images/ice-cream.png" /></br> Sobremesa
</div>
<div class="col-md-6" id="content">
</div>
<div class="col-md-4" id="rightbar"></div>
</div>
</div>
</body>
</html>
I think that the problem is that the height of the #categorias column is set to 100%, you should give a specific height. Try something like:
#categorias {
height: 400px
}
Related
I have a background image that is covering my content but without (background-size: cover;) it doesn't take up the space. I am working on a bootstrap project, and all my content is stacked at the top of the page in the banner area. I've tried adding height to the page to move content. I've tried adding a div around it and moving around in the body tag. I have been working on the for about 3 hours.
#import url('https://fonts.googleapis.com/css?family=Oswald|Rambla|Staatliches&display=swap');
body{
margin: 0;
padding: 0;
}
:root{
--color-black: #000000;
--color-white: #ffffff;
--color-border: #ffffff34;
--font-staat: 'Staatliches', cursive;
--font-os: 'Oswald', sans-serif;
--font-ram: 'Rambla', sans-serif;
}
/* global classes */
.font-staat{
font: normal 400 18px var(--font-staat);
}
.font-os{
font: normal 300 18px var(--font-os);
}
.font-ram{
font: normal bold 18px var(--font-ram);
}
.font-size-40{
font-size: 40px;
}
.font-size-34{
font-size: 34px;
}
.font-size-27{
font-size: 27px;
}
.font-size-20{
font-size: 20px;
}
.font-size-16{
font-size: 16px;
}
.bgcolor-black{
background-color: var(--color-black);
}
/* #global classes */
#header{
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index:1;
transition: left .5s ease;
}
#header nav{
height: 100vh;
}
#header .site-title .navbar-brand{
letter-spacing: 2px;
color: var(--color-secondary);
}
#header .nav-link{
margin: .7rem 1rem;
border-bottom: 1px solid var(--color-border);
text-transform: uppercase;
}
#header .nav-link:hover{
color: var(--color-white) !important;
}
#header .toggle-button{
background: none;
color: var(--color-black);
position: fixed;
top: 25px;
right: 20px;
border: 1px solid var(--color-border);
}
.toggle-left{
left: 0 !important;
width: 1000px !important;
}
/* site-main */
.site-banner .banner-area{
background: url(https://i.pinimg.com/736x/2a/a1/da/2aa1da060c0dfad146354e0cc06560c2.jpg) no-repeat;
background-size: cover;
width: 100%;
height: 100vh;
position: relative;
}
.site-banner .banner-area .author{
margin: 0;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
}
.site-banner .banner-area .author .author-img{
width: 250px;
height: 250px;
border-radius: 50%;
margin: auto;
background: url(./20200507_023239272_iOS.jpg) no-repeat;
background-size: 115%;
background-position: 15% 20%;
}
#media screen and (min-width: 768px){
.toggle-button{
display: none;
}
#header{
z-index:0;
}
}
/* #site-main */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kaija Dunklin</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-- header area -->
<header id="header">
<div class="row m-0">
<div class="col-3 bgcolor-black">
<nav class="primary-nav navbar-expand-md">
<div class="site-title text-center text-light py-5">
Kaykay
<p class="description text-uppercase font-os"> Kaija Dunklin</p>
</div>
<div class="d-flex flex-column">
Home
Skills
projects
Education
Experience
Resume
Contact
</div>
</nav>
</div>
</div>
<button class="toggle-button"><span class="fas fa-bars fa-2x"></span></button>
<div class="social">
<span class="mr-3"><i class="fab fa-linkedin"></i></span>
<span class="mr-3"><i class="fab fa-github"></i></span>
</div>
</header>
<!-- #header area -->
<main id="site-main">
<div class="row m-0">
<div class="col-md-9 offset-md-3 px-0">
<!-- site-banner area -->
<section class="site-banner" id="home">
<div class="banner-area">
<div class="author text-center">
<div class="author-img"></div>
<h1 class="text-white font-staat font-size-40 text-uppercase py-3">Kaija Dunklin</h1>
</div>
</div>
</section>
<section id="skills">
<i class="fab fa-github-square" >GitHub</i>
</section>
<!-- #site-banner area -->
<section id="projects">
<div>
</div>
</section>
</div>
</div>
<div>
</div>
</main>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js" integrity="sha256-MAgcygDRahs+F/Nk5Vz387whB4kSK9NXlDN3w58LLq0=" crossorigin="anonymous"></script>
<script src="./vendor/typed/typed.min.js"></script>
<script src="./index.js"></script>
</body>
</html>
I'm really not sure what you are trying to achieve, but I guess I got what you wanted:
I set the background on separate div which I then set the background image to and then with Z-index value on css moved behind other content you may add on your page.
.background-img {
/*of course with this solution you should remove the previous background image*/
position: fixed;
top: 0;
height: 100vh;
width: 100vw;
background-image: url(https://i.pinimg.com/736x/2a/a1/da/2aa1da060c0dfad146354e0cc06560c2.jpg);
background-size: cover;
/* Without z-index the background seems to cover the content*/
z-index: -1;
}
<!--I added this empty div to hold the background image-->
<div class="background-img">
</div>
I really did not dive that deep to your source files, so I am not sure if this helps, but I hope so
I have a header in my website designed in bootstrap and HTML, it is a sticky header, the image is supposed to appear above the menu nav and I was trying to make it responsive, I got it to reduce in size but the image does not center to the middle of the page and menu comes off wrong when the page is resized too. Not really great with CSS.
below is the HTML code
.align-center {
background: transparent;
padding: 10px 0;
}
.align-center a {
color: #70726F;
font-size: 20px;
padding: 10px;
transition: all .5s ease;
}
.align-center a:hover {
color: blue;
text-decoration: none;
}
.menu-header {
position: fixed;
top: 20% !important;
z-index: 100;
left: 100px;
font-weight: bold;
justify-content: center;
margin-top: 15px;
}
.menu-header a:hover {
color: black;
text-decoration: none;
}
.menu-header .active {
color: darkcyan;
}
.center-image {
position: relative;
left: 255px;
margin-bottom: 20px;
}
.cart-image {
right: 30px;
}
#logo_wrapper img {
max-width: 100%;
height: auto;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<head>
<title>Home | Relationinc</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<link href="https://relationinc.com.ng/lib/css/theme.css" rel="stylesheet" type="text/css">
<link href="https://relationinc.com.ng/lib/css/bootstrap.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css">
</head>
<body id="home" class="theme">
<header class="header">
<div class="wrapper">
<div id="logo_wrapper">
<a class="center-image align-center image" href="index.html" title="Relationinc">
<img alt="Relationinc" src="https://relationinc.com.ng/new images/logo-text.jpeg">
</a>
</div>
<div class="cart-link cart-image">
<a href="cart.html" title="Cart">
<svg viewBox="0 0 30 30">
<path d="M22.7 8c-.9-3.4-4-6-7.7-6S8.2 4.6 7.3 8H2l3 20h20l3-20h-5.3zM15 4c2.6 0 4.8 1.7 5.6 4H9.3c.9-2.3 3.1-4 5.7-4zm8.3 22H6.7L4.3 10H7v3h2v-3h12v3h2v-3h2.7l-2.4 16z" />
</svg>
<i id="cartcount" class="him-counts hide">0</i>
</a>
</div>
</div>
<div class="align-center menu-header">
<div class="container text-center">
<a href="index.html" class="active">
Home
</a>
<a href="categories.html">
Collections
</a>
<a href="aboutus.html">
About Us
</a>
</div>
</div>
</header>
</body>
Replace Your this code I hope this will help you.
.center-image {
position: relative;
left: 0;
margin-bottom: 20px;
display: block;
text-align: center;
}
First, you are using bootstrap3 and bootstrap4 css both...why this?
be specific about the bootstrap version which one you want to use..
Use img-responsive center-block bootstrap3 classes to your image...
or use d-block mx-auto to your image if you are using bootstrap4.
And also remove the left:100px from the header...I have changes some of your css.
If you want to make layout responsive be sure not to use fixed px values..try to use values in % if required anywhere.
Stack Snippet
.align-center {
background: transparent;
padding: 10px 0;
}
.align-center a {
color: #70726F;
font-size: 20px;
padding: 10px;
transition: all .5s ease;
}
.align-center a:hover {
color: blue;
text-decoration: none;
}
.menu-header {
position: fixed;
top: 20% !important;
z-index: 100;
font-weight: bold;
justify-content: center;
margin-top: 15px;
left: 0;
right: 0;
}
.menu-header a:hover {
color: black;
text-decoration: none;
}
.menu-header .active {
color: darkcyan;
}
.cart-image {
right: 30px;
}
#logo_wrapper img {
max-width: 100%;
height: auto;
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<body id="home" class="theme">
<header class="header">
<div class="wrapper">
<div id="logo_wrapper">
<a class="align-center image" href="index.html" title="Relationinc">
<img alt="Relationinc" src="https://relationinc.com.ng/new images/logo-text.jpeg" class="img-responsive center-block">
</a>
</div>
<div class="cart-link cart-image">
<a href="cart.html" title="Cart">
<svg viewBox="0 0 30 30">
<path d="M22.7 8c-.9-3.4-4-6-7.7-6S8.2 4.6 7.3 8H2l3 20h20l3-20h-5.3zM15 4c2.6 0 4.8 1.7 5.6 4H9.3c.9-2.3 3.1-4 5.7-4zm8.3 22H6.7L4.3 10H7v3h2v-3h12v3h2v-3h2.7l-2.4 16z" />
</svg>
<i id="cartcount" class="him-counts hide">0</i>
</a>
</div>
</div>
<div class="align-center menu-header">
<div class="container text-center">
<a href="index.html" class="active">
Home
</a>
<a href="categories.html">
Collections
</a>
<a href="aboutus.html">
About Us
</a>
</div>
</div>
</header>
</body>
How can I alter my code so that resizing keeps everything within the window intact? As seen by the pictures, the text is outside the section when resized. Also, the image drops down in the navbar
any help is appreciated. Thank you.
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title>Scrolling Nav - Start Bootstrap Template</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/scrolling-nav.css" rel="stylesheet">
<link href="css/homepage.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<!-- The #page-top ID is part of the scrolling feature - the data-spy and data-target are part of the built-in Bootstrap scrollspy function -->
<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<div class="dropdown">
<button onclick="location.href='homenew.html'" class="dropbtn" >WATER</button>
<div class="dropdown-content">
<a class="page-scroll" href="homenew.html#services">OUR MISSION</a>
<a class="page-scroll" href="homenew.html#services">HELP US</a>
</div>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="aboutus.html">About us</a>
</li>
<li>
<a class="page-scroll" href="team.html">Our Team</a>
</li>
<li>
<a class="page-scroll" href="volunteering.html">Volunteer</a>
</li>
<li>
<a class="page-scroll" href="contactus.html">Contact</a>
</li>
<li>
<a class="page-scroll" href="donations.html">Donate</a>
</li>
</ul>
<img class="alignright" src="icons/fundraisingbar.png">
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<section id="intro" class="intro-section">
<div class="container">
<div class="row">
<div class="col-lg-12 ">
</div>s
<div class = "middle">
<h1 class="h1style offwhite">WATER2O</h1>
<h2 class="">mineral water</h2>
</div>
<div class = "middle2 offwhite ">
<h2>H20</h2>
<h3>ALTERING PERCEPTION </h2>
</div>
<div class ="animated bounceIn ">
<img class="arrowsize" src="http://www.under-water.co.uk/imgs/icons/tick-256x256-red.png">
<p class="whitetext">Registered</p>
</div>
</section>
CSS
.icons{
width: 100px;
height: 100px;
}
.iconz{
padding-top: 10px;
}
.icontext{
padding-top: 10px;
font-weight: bold;
}
.fundraise{
padding-top: 40px;
padding-bottom: 40px;
}
.offwhite{
color: #EBE7E0;
}
.donation_amount{
color: red;
}
.icons2{
width: 150px;
height: 150px;
}
.middle2{
padding: 10px;
border: 5px solid gray;
margin: 0;
}
.description_icon{
padding-top: 50px;
font-size: 20px;
font-weight: bold;
text-align: center;
padding-bottom: 50px;
}
.intro-section{
background-color: black;
/*background-image: url(https://i.ytimg.com/vi/9L6Aj0CJCuc/maxresdefault.jpg);*/
}
.main_text{
color: white;
top: 450px;
}
.logofirst{
height: 300px;
width: 450px;
}
.breadtext{
color: white;
padding-top: 120px;
padding-left: 100px;
font-size:75px;
}
.breadtext2{
color: white;
padding-left: 210px;
font-size:30px;
}
.footer1{
padding-bottom: 20px;
padding-top: 10px;
background-color: #f9f9f9;
font-weight: bold;
}
.arrowsize{
height: 100px;
width: 100px;
color: white;
}
.whitetext{
color: white;
font-weight: bold;
}
/* Dropdown Button */
.dropbtn {
background-color: #F8F8F8;
color: 777777;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
Can you post the CSS you currently have that's effecting the area?
Bootstrap has a feature for progress bars so you won't have to use a static image. You'll be then be able to change the width accordingly for the percentage you need the bar at.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width:70%">
<span class="sr-only">70% Complete</span>
</div>
</div>
edit:
Alternatively you can just use #media queries in your CSS to reisze the width of the image dependant on the screen size that is being viewed at.
I am trying to make some text responsive. For some reason, media queries are not working and the font is pushed below the image, whereas it should be above.
Here is my code:
// Bootstrap callback test
if ($('#bootstrapCssTest').is(':visible') === true) {
$('<link href="/bootstrap/js/bootstrap.min.js" rel="stylesheet" type="text/css" />').appendTo('head');
}
// Make .navbarButtonDiv go to its child 'a' tag's href on click
$(".navbarButtonDiv").click(function() {
window.location = $(this).find("a").attr("href");
return false;
});
// Collapse navbar on nav link click
$(document).on('click', '.navbar-collapse.in', function(e) {
if ($(e.target).is('a')) {
$(this).collapse('hide');
}
});
// Collapse navbar on document click
$(document).on('click', function() {
$('.collapse').collapse('hide');
});
/* Font imports */
#import url(https://fonts.googleapis.com/css?family=Bitter:400,400italic,700);
#font-face {
font-family: "FuturaNewLight";
src: url("fonts/FuturaNewLight.otf")
}
/* Navbar padding */
body {
padding-top: 100px;
overflow-x: hidden !important;
}
/* Navbar */
.navbar {
font-family: "Bitter", serif;
}
.navbar.navbar-custom .navbar-brand.navbar-brand-centered {
position: absolute;
left: 50%;
top: 0;
display: block;
width: 100px;
text-align: center;
padding: 0;
}
.navbar.navbar-custom > .wrapper .navbar-brand.navbar-brand-centered {
margin-left: -55px;
margin-top: 10px;
}
.navbar .nav.navbar-nav {
font-size: 150%;
}
.navbar-logo {
height: 145%;
}
/* Media queries */
#media (min-width: 768px) {
.wrapper {
padding-right: 15px;
}
.navbar.navbar-custom .navbar-nav > li > a {
line-height: 60px;
transition: background 200ms linear;
}
.navbar.navbar-custom .navbar-nav > li > a:hover {
background: #96D5FF;
}
}
#media (max-width: 767px) {
.navbar.navbar-custom {
padding: 20px 0;
}
.navbar.navbar-custom .navbar-collapse {
margin: 20px 0 -20px;
border: none;
box-shadow: none;
height: 260px;
}
.navbar.navbar-custom .navbar-nav > li > a {
text-align: center;
}
.navbar-logo {
margin-left: 20px;
height: 110%;
}
.futuraNewLightHeader {
font-size: 20px;
}
}
/* Header styling */
#jumbotronHeader {
position: relative;
font-family: "Bitter", serif;
width: 100%;
bottom: 9px;
}
#homePageImage {
position: relative;
-webkit-filter: blur(5px);
filter: blur(5px);
bottom: 30px;
z-index: -1;
width: 70%;
}
/* Font styling */
.futuraNewLightHeader {
position: absolute;
top: 550px;
font-size: 150px;
width: 100%;
color: White;
text-shadow: 2px 2px Black;
font-family: "FuturaNewLight";
}
.futuraNewLightSubHeader {
position: absolute;
top: 750px;
font-size: 60px;
width: 100%;
color: White;
text-shadow: 2px 2px Black;
font-family: "FuturaNewLight";
}
#dynamicHeaderText {
color: #2099FF;
}
/* General styling */
.centerText {
text-align: center;
}
<!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">
<title>Education for Everyone</title>
<link rel="icon" type="image/png" href="images/edufeLogo.png">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-default navbar-fixed-top navbar-custom" role="navigation">
<div class="wrapper">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<a class="navbar-brand navbar-brand-centered" href="#/">
<img class="navbar-logo" src="images/edufeLogo.png">
</a>
<div class="collapse navbar-collapse" id="js-navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li>Home
</li>
<li>About
</li>
<li>Learn
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Log In
</li>
<li>Sign Up
</li>
</ul>
</div>
</div>
</nav>
<!-- Jumbotron -->
<div class="jumbotron" id="jumbotronHeader">
<h1 class="display-3 centerText">Education for Everyone</h1>
<p class="lead centerText">Learn. Create. Share.</p>
<hr class="m-y-3">
</div>
<!-- Image header -->
<div class="imageHeader">
<span class="futuraNewLightHeader centerText"><span id="dynamicHeaderText">Learn</span> something new.</span>
<span class="futuraNewLightSubHeader centerText">From the internet to real life.</span>
</div>
<img src="images/homePageImage.png" id="homePageImage" class="center-block img-responsive">
</div>
<!-- Script tags -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>
Thanks! Any help is appreciated!
Move all text formatting options into the media queries and try then.
First you need set #media queries to #media screen and (max-width: ....).
Some cases browsers need screen parameter.
Second, you need change font size of elements when responsive. I suggest using em unit to make responsive.
This is the HTML code for my BootStrap website:
<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">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Yanni Pang</title><!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="/css/bootstrap.min.css" type="text/css"><!-- Custom styles for this template -->
<link href="/css/main.css" rel="stylesheet" type="text/css"><!-- Animate CSS -->
<link href="/css/animate.css" rel="stylesheet" type="text/css">
<link href="css/minimalpace.css" type="text/css">
<script src="plugins/pace.min.js" type="text/javascript">
</script>
<link href="css/minimalpace.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" type="text/css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript">
</script><!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" type="text/javascript">
</script><!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js" type="text/javascript">
</script><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Analytics -->
<script type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-17399906-5', 'auto');
ga('send', 'pageview');
</script><!-- End -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav class="navbar navbar-inverse animated fadeIn">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"><span class="sr-only">Toggle navigation</span></button> <a class="navbar-brand animated slideInLeft" href="/index.html">Yanni Pang</a>
</div>
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li class="disabled">Photos</li>
<li>Articles</li>
<li>Contact Me</li>
<li>test2</li>
</ul>
</div>
</div><!-- <ul class="nav nav-pills pull-right">
<li class="navbarpills">Home</li>
<li class="disabled">Photos</li>
<li>Articles</li>
<li>test1</li>
<li>test2</li>
</ul> -->
</nav>
<div class="container">
<div class="jumbotron jumbotronothercolor animated fadeIn">
<h1>Welcome to my website!</h1>
<p class="lead">On this site, I will post random stuff!</p>
</div>
<div class="row marketing">
<div class="col-lg-6">
<h4>Education</h4>
<p>I am a 9th grade High School student at RMHS. I am teaching myself how to program, and build things.</p>
</div>
<div class="col-lg-6">
<h4>Missions Trips</h4><!-- <ul class="missionslist"> -->
<ul class="missionslist">
<li style="list-style: none; display: inline">
<h5>Grace Chapel</h5>
</li>
<li>Trinidad 2014</li>
<li><a class="animated bounceIn" href="/navajonation">Navajo Nation 2015</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<h4>Sports</h4>
<p>I swim competitively for the Reading Rockets Men's Swim Team. I have earned my varsity letter. Here are my records:</p><br>
<p>50 Free: 26.75</p>
<p>100 Breast: 1:17.93</p>
<p>100 Free: 1:01:01</p>
<p>Breath Holding Personal Best: 1:30:57</p>
</div>
<div class="col-lg-6">
<h4>Hobbies</h4>
<p>Swimming</p>
<p>Coding</p>
<p>Making</p>
<p>Photography</p>
</div>
<div class="row">
<div class="col-lg-6 tempspace">
<h4>Coding Experience</h4>
<p>HTML</p>
<p>CSS</p>
<p>Some Java</p>
<p>Some AppleScript</p>
</div>
<div class="col-lg-6">
<h4>Photography Gear</h4>
<p>Canon EOS Rebel t6s</p>
<p>Video Ball Mount Tripod</p>
<p>Canon EF-S 18-135 Lens with Lens Hood</p>
<p>Canon EF 50mm STM</p>
</div>
</div>
<div class="row">
<div class="col-lg-12 social animated fadeIn">
<span class="fa-stack fa-lg"> </span> <span class="fa-stack fa-lg"> </span> <span class="fa-stack fa-lg"> </span>
</div>
</div>
<footer class="footer">
<p>© Yanni Pang 2014</p><img src="http://iplogger.org/1sF94.jpg">
</footer>
</div><!-- /container -->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js" type="text/javascript">
</script>
</div>
</body>
</html>
Here is my CSS:
/* Space out content a bit */
body {
background-color: #fff;
color: #000;
}
.jumbotronothercolor {
background: rgba(120, 163,rgba(210, 210, 210, 1)92, 0.79);
}
: : selection {
background: #74ff7d;
}
/* Everything but the jumbotron gets side spacing for mobile first views */
.header,.marketing,.footer,.singlepage {
padding-right: 15px;
padding-left: 15px;
}
/* MoreSpace for text */
.morespace {
padding-left: 80px;
}
.lessspace {
padding-left: 149px;
}
/* Nav Pills */
.nav-pills>li>a {
color: #76a25b;
}
/* End Nav Pills */
/* Text Centered */
.col-lg-12 > a {
text-decoration: none;
}
.col-lg-12 {
text-align: center;
}
.col-lg-12 a:hover {
text-decoration: none;
color: #ff9a00;
transition: .5s;
}
.col-lg-12 a {
text-decoration: none;
color: #76a25b;
transition: .5s;
}
/* Main Body Links */
.col-lg-6 a {
text-decoration: none;
color: #76a25b;
transition: .5s;
}
.col-lg-6 a:hover {
text-decoration: none;
color: #ff9a00;
}
.col-lg-6 {
text-align: center;
}
/* Main Body Links End */
/* Custom page header */
.header {
padding-bottom: 20px;
border-bottom: 1px solid #e5e5e5;
}
/* Make the masthead heading the same height as the navigation */
.header h3 {
margin-top: 0;
margin-bottom: 0;
line-height: 40px;
}
/* Custom page footer */
.footer {
padding-top: 19px;
color: #777;
border-top: 1px solid #e5e5e5;
text-align: center;
}
/* Customize container */
#media (min-width: 768px) {
.container {
max-width: 730px;
}
}
.container-narrow > hr {
margin: 30px 0;
}
/* Main marketing message and sign up button */
.jumbotron {
text-align: center;
border-bottom: 1px solid #e5e5e5;
color: #000;
}
/* Supporting marketing content */
.marketing {
margin: 40px 0;
}
.marketing p + h4 {
margin-top: 28px;
}
/* Responsive: Portrait tablets and up */
#media screen and (min-width: 768px) {
/* Remove the padding we set earlier */
.header,.marketing,.footer {
padding-right: 0;
padding-left: 0;
}
/* Space out the masthead */
.header {
margin-bottom: 30px;
}
/* Remove the bottom border on the jumbotron for visual effect */
.jumbotron {
border-bottom: 0;
}
}
.tempspace {
margin-top: 50px;
}
.missionslist {
list-style-type: disc;
list-style-position: inside;
margin: 0;
padding: 0;
}
.missionslist h4 {
margin: 0;
padding: 0;
}
/*Navbar*/
.navbar {
border-radius: 0;
}
.navbar-brand {
font-size: 180%;
}
.navbar-inverse .navbar-nav > li > a {
color: #74ff7d;
}
.navbar-inverse .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
color: #ff9a00;
}
.navbar-inverse .navbar-brand {
color: white;
}
.navbar-toggle {
border: none;
background: transparent !important;
}
.navbar-toggle:hover {
background: transparent !important;
}
.navbar-toggle .icon-bar {
width: 22px;
transition: all 0.2s;
}
.navbar-toggle .top-bar {
transform: rotate(45deg);
transform-origin: 10% 10%;
}
.navbar-toggle .middle-bar {
opacity: 0;
}
.navbar-toggle .bottom-bar {
transform: rotate(-45deg);
transform-origin: 10% 90%;
}
.navbar-toggle.collapsed .top-bar {
transform: rotate(0);
}
.navbar-toggle.collapsed .middle-bar {
opacity: 1;
}
.navbar-toggle.collapsed .bottom-bar {
transform: rotate(0);
}
/*End*/
/*NavajoNation*/
.singlepage {
border-bottom: 1px solid #e5e5e5;
text-align: center;
}
.navajonation {
font-family: Helvetica;
font-size: 1.2em;
text-align: auto;
line-height: 2em;
}
.navajonationdonate {
padding-top: 20px;
}
.navajocenter {
text-align: center;
}
/*NavajoNation End*/
/*Col Center*/
.row-centered {
text-align: center;
}
.col-centered {
display: inline-block;
float: none;
/* reset the text-align */
text-align: left;
/* inline-block space fix */
margin-right: -4px;
}
/*Col Center End*/
.tab {
margin-left: 40px;
}
/* Classes */
.pull-left {
float: left!important;
}
.pull-right {
float: right!important;
}
// Usage as mixins
.element {
}
.another-element {
}
.watermark {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent url(http://yannipang.com/images/watermark.png) bottom right no-repeat;
z-index: 1100;
}
This is how it appears:
Website
How do I align 'Photography Gear' and 'Coding Experience' horizontally so they are parallel like the others? Also why is there a big space between the bottom of 'Sports' and 'Photography Gear'?This has been bugging me for a while now. Thanks for all your help!
You forgot close the div - second row (with sports and hobbies).
The second row div is not closed before starting the next row which causes them to be nested.
...
<div class="col-lg-6">
<h4>Hobbies</h4>
<p>Swimming</p>
<p>Coding</p>
<p>Making</p>
<p>Photography</p>
</div>
</div> <!-- This row closing tag is missing -->
<div class="row">
<div class="col-lg-6 tempspace">
<h4>Coding Experience</h4>
<p>HTML</p>
<p>CSS</p>
<p>Some Java</p>
<p>Some AppleScript</p>
</div>
...
Then you also have a stray closing div tag at the bottom before the closing body tag. You probably threw it down there by accident to fix a tag warning.