I'm trying to make my content into 2 columns where the first will be used for a full height sidebar while the other will contain my navbar,content,footer.
Using Bootstrap 4.0
This is what i'm trying to do :
I'm using the sticky footer example from bootstrap 4 examples but when i add the row and columns , the footer is coming after the navbar instead of taking the whole html page length.
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px; /* Set the fixed height of the footer here */
line-height: 60px; /* Vertically center the text there */
background-color: #f5f5f5;
}
<div class="container-fluid">
<div class="row">
<div class="col-sm-2">
Sidebar
</div>
<div class="col-sm-10">
<div class="navbar">
...
</div>
<div class="content">
test1
</div>
<footer class="footer">
<div class="container">
<span class="text-muted">Test</span>
</div>
</footer>
</div>
</div>
</div>
Since you're using bootstrap with flex, you can use the power of flex to make a sticky footer - no need for giving it an absolute position.
EXAMPLE
So your html stays the same just need to add couple of layout classes. The main techique is to make .main a flex container and reposition its children in column
.main {
display: flex;
flex-direction: column;
width: 100%;
min-height: 100vh;
}
while .content block must stretch the remaining height, thus pressing the footer to the bottom, this can be achieved with simple rule:
.content {
flex: 1;
}
more on this technique here
here is the code for it :
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<style>
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 160px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 20px;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}
.sidenav a:hover {
color: #f1f1f1;
}
.main {
margin-left: 160px;
/* Same as the width of the sidenav */
font-size: 28px;
/* Increased text to enable scrolling */
padding: 0px 10px;
}
#media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="col-md-2 col-xs-2 col-sm-2 col-lg-2">
<div class="sidenav">
About
Services
Clients
Contact
</div>
</div>
<div class="col-md-10 col-xs-10 col-sm-10 col-lg-10">
<div class="container">
<h3>Tabs</h3>
<ul class="nav nav-tabs">
<li class="active">
Home
</li>
<li>
Menu 1
</li>
<li>
Menu 2
</li>
<li>
Menu 3
</li>
</ul>
<br>
<p>
<strong>Note:</strong> content goes here</p>
</div>
<div class="footer">
<p>Footer</p>
</div>
</div>
</div>
<script src="" async defer></script>
</body>
</html>
check the fiddle:https://jsfiddle.net/zmye2pth/1/
Related
This question already has answers here:
Why does height 100% work when DOCTYPE is removed?
(5 answers)
Closed 2 years ago.
Adding <!DOCTYPE html> is breaking my CSS only sticky footer meaning that as soon as I add it, the footer does not stick to the bottom of a web page anymore.
Following is a working example without the <!DOCTYPE html>.
Doing further tests I've noticed that when not declaring the page as HTML5 by adding the DOCTYPE statement, the div with CSS class wrapper is able to be stretched to take the full document height thus pushing the footer to the bottom. This is not happening when declaring the document as HTML5.
https://jsfiddle.net/muvwh4zn/
body {
background-color: #f0f0f0;
}
.navbar {
background-color: #444;
width: 100%;
}
.footer {
background-color: #444;
width: 100%;
height: 50px;
}
html,
body {
height: 100%;
margin: 0;
}
.wrapper {
min-height: 100%;
margin-bottom: -50px;
padding: 0px 0px 80px 0px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
</head>
<body>
<div class="container">
<div class="wrapper">
<header>
<div class="row">
<div class="text-white-50 text-center navbar">
HEADER
</div>
</div>
</header>
<br />
<main>
<div class="row">
BODY
</div>
</main>
</div>
<footer>
<div class="row">
<div class="align-middle py-3 text-white-50 text-center footer">
FOOTER
</div>
</div>
</footer>
</div>
</body>
</html>
Please also see my own comment just below for a possible solution to this issue.
Add flexibility to the container class. Your footer will always be pinned to the bottom.
https://www.w3.org/QA/2002/04/valid-dtd-list.html
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
body {
background-color: #f0f0f0;
}
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
}
.navbar {
background-color: #444;
width: 100%;
}
.footer {
background-color: #444;
width: 100%;
height: 50px;
}
html,
body {
height: 100%;
margin: 0;
}
.wrapper {
min-height: 100%;
margin-bottom: -50px;
padding: 0px 0px 80px 0px;
}
.push {
height: 50px;
z-index: -1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
</head>
<body>
<div class="container">
<div class="wrapper">
<header>
<div class="row">
<div class="align-middle py-3 text-white-50 text-center navbar">
header
</div>
</div>
</header>
<br />
<main>
<div class="row">
BODY
</div>
</main>
</div>
<footer>
<div class="row">
<div class="align-middle py-3 text-white-50 text-center footer">
FOOTER
</div>
</div>
</footer>
</div>
</body>
</html>
I have the following HTML block.
/* Set height of the grid so .sidenav can be 100% (adjust if needed) */
.row.content {
height: 1500px;
}
/* Set gray background color and 100% height */
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
.center-banner {
height: 145px;
background-repeat: no-repeat;
}
.work-box-container .work-box {
background: url(https://i.postimg.cc/Z5gq4xHd/Promotionaloff.png);
}
.work-box-container:hover .work-box {
background: url(https://i.postimg.cc/ZKwRDSyj/Promotionalon.png);
}
/* On small screens, set height to 'auto' for sidenav and grid */
#media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {
height: auto;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid center-banner">
<div class="row content">
<div class="">
<div class="work-box-container ">
<div class="work-box center-banner">
</div>
</div>
</div>
</div>
</div>
<footer class="container-fluid">
<p>Footer Text</p>
</footer>
</body>
</html>
Hover effect is not working properly on first load.
I have checked here, but couldn't make it work.
use transition-delay on your hover, so that it will kind of animate the hover feature which looks smooth transition.
/* Set height of the grid so .sidenav can be 100% (adjust if needed) */
.row.content {
height: 1500px;
}
/* Set gray background color and 100% height */
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
.center-banner {
height: 145px;
background-repeat: no-repeat;
}
.work-box-container .work-box {
background: url(https://i.postimg.cc/Z5gq4xHd/Promotionaloff.png);
}
.work-box-container:hover .work-box {
background: url(https://i.postimg.cc/ZKwRDSyj/Promotionalon.png);
transition-delay: 0.3s;
}
/* On small screens, set height to 'auto' for sidenav and grid */
#media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {
height: auto;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid center-banner">
<div class="row content">
<div class="">
<div class="work-box-container ">
<div class="work-box center-banner">
</div>
</div>
</div>
</div>
</div>
<footer class="container-fluid">
<p>Footer Text</p>
</footer>
</body>
</html>
I got it to stop jumping by editing work-box-container and work-box like so
.work-box-container{
background: url(https://i.postimg.cc/Z5gq4xHd/Promotionaloff.png)
}
.work-box {visibility:hidden}
.work-box-container:hover .work-box {
visibility:visible;
background: url(https://i.postimg.cc/ZKwRDSyj/Promotionalon.png)
}
See now:
/* Set height of the grid so .sidenav can be 100% (adjust if needed) */
.row.content {
height: 1500px;
}
/* Set gray background color and 100% height */
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
.center-banner {
height: 145px;
background-repeat: no-repeat;
}
.work-box-container{
background: url(https://i.postimg.cc/Z5gq4xHd/Promotionaloff.png)
}
.work-box {visibility:hidden}
.work-box-container:hover .work-box {
visibility:visible;
background: url(https://i.postimg.cc/ZKwRDSyj/Promotionalon.png)
}
/* On small screens, set height to 'auto' for sidenav and grid */
#media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {
height: auto;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid center-banner">
<div class="row content">
<div class="">
<div class="work-box-container ">
<div class="work-box center-banner">
</div>
</div>
</div>
</div>
</div>
<footer class="container-fluid">
<p>Footer Text</p>
</footer>
</body>
</html>
Because the first time you hover the image it needs to get loaded. This takes some time, hence the effect.
You can solve this in a couple of ways:
One way is to use some sort of preloading
Another way (in my opinion, the preferred way) would be to just use one image and just change it:
/* Set height of the grid so .sidenav can be 100% (adjust if needed) */
.row.content {
height: 1500px;
}
/* Set gray background color and 100% height */
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
.center-banner {
height: 145px;
background-repeat: no-repeat;
}
.work-box-container .work-box {
background: url(https://i.postimg.cc/Z5gq4xHd/Promotionaloff.png);
}
.work-box-container:hover .work-box {
opacity: .7; /*NOTE: only opacity changed here, no second image needed*/
}
/* On small screens, set height to 'auto' for sidenav and grid */
#media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {
height: auto;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid center-banner">
<div class="row content">
<div class="">
<div class="work-box-container ">
<div class="work-box center-banner">
</div>
</div>
</div>
</div>
</div>
<footer class="container-fluid">
<p>Footer Text</p>
</footer>
</body>
</html>
If u want smooth transition,Try this:-
-The best way in css is to PRELOAD the image to avoid the glitch on first load.
/* Set height of the grid so .sidenav can be 100% (adjust if needed) */
.row.content {
height: 1500px;
}
/* Set gray background color and 100% height */
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
.center-banner {
height: 145px;
background-repeat: no-repeat;
}
.work-box-container .work-box {
background: url(https://i.postimg.cc/Z5gq4xHd/Promotionaloff.png);
transition:all 0.3s;
}
.work-box-container:hover .work-box{
background-image: url(https://i.postimg.cc/ZKwRDSyj/Promotionalon.png);
}
body:after{
display:none;
content: url(https://i.postimg.cc/ZKwRDSyj/Promotionalon.png);
}
/* On small screens, set height to 'auto' for sidenav and grid */
#media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {
height: auto;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid center-banner">
<div class="row content">
<div class="">
<div class="work-box-container ">
<div class="work-box center-banner">
</div>
</div>
</div>
</div>
</div>
<footer class="container-fluid">
<p>Footer Text</p>
</footer>
</body>
</html>
Best way to accomplish this is to use CSS sprite image technique. I have accomplished using it. Please adjust your image height and background-position to your need.
.work-box {
background: transparent url(https://i.ibb.co/LN767Nr/sprite.png) -0 -0 no-repeat;
height: 70px;
width: 1334px;
}
.work-box:hover {
background: transparent url(https://i.ibb.co/LN767Nr/sprite.png) -0 -70px no-repeat;
height: 70px;
width: 1334px;
}
<div class="work-box-container ">
<div class="work-box">
</div>
</div>
I have got a problem with a quite simple "under construction" website for a client. I am using Bootstrap to make is responsive. But now under a width of 1024px the content does not center how it should.
Here is the code i am using:
HTML
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
<!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="logo">
<a href="#">
<img id="logo_img" src="img/logo.png">
</a>
</div>
<div id="underc">
<p>Under Construction</p>
</div>
<div id="underline">
</div>
<div id="social_media">
<a href="">
<img id="fb" src="img/facebook.png">
</a>
<a href="">
<img id="tw" src="img/twitter.png">
</a>
<a href="">
<img id="ig" src="img/instagram.png">
</a>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
CSS
body {
margin: 0;
background-image: url("../img/background2.jpg");
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
#underline {
height: 5px;
background-color: #f57300;
margin-bottom: 5px;
margin-top: -20px;
width: 800px;
margin: 0 auto;
}
#logo {
padding-top: 220px;
height: 100px;
width: auto;
text-align: center;
}
#logo_img {
height: 250px;
}
#underc {
color: #f57300;
text-align: center;
padding-top: 275px;
font-family: 'Pacifico', cursive;
font-size: 80px;
}
#social_media {
padding-top: 10px;
text-align: center;
}
#fb {
height: 30px;
}
#tw {
height: 30px;
}
#ig {
height: 30px;
}
#media (max-width: 700px) {
#underline {
height: 5px;
background-color: #f57300;
margin-bottom: 5px;
margin-top: -20px;
width: 600px;
margin: 0 auto;
}
#logo {
padding-top: 220px;
height: 100px;
text-align: center;
}
#logo_img {
height: 150px;
text-align: center;
}
#underc {
color: #f57300;
text-align: center;
padding-top: 275px;
font-family: 'Pacifico', cursive;
font-size: 30px;
}
#social_media {
padding-top: 10px;
text-align: center;
}
#fb {
height: 30px;
}
#tw {
height: 30px;
}
#ig {
height: 30px;
}
}
However when the screen gets "smaller" at some stage it starts to stick on the right side of the page and it does not center.
SCREENSHOT:
the body has the min-width property
min-width: 1024px;
Erase that property or use media queries to display different sizes on different screens.
I am trying to make this video embed responsive.
I succesfully made it for a tablet size and now I am trying for phone, but how to also make it responsive for when the user resizes the browser window.. for example:
This is how it should look:
And this is how it looks when resized:
The title "Overworld Roleplay" changes its position automatically, but the video doesn't, also when I resize the window the text "Last Update:" changes its position and the video changes its size, not sure why :/
It works good on bigger resolutions tho'
I use bootstrap but I am not sure how to fix this :/
This is my code:
<!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="viewport" content="width=device-width, user-scalable=yes">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Homepage | Overworld RP Devs</title>
<!-- Bootstrap core CSS -->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/maintemplate.css" rel="stylesheet">
<!-- 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"></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.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<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>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/index.html">Overworld Roleplay</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="front container">
<h1 class="text-primary" id="title" >Overworld Roleplay</h1>
<h4>Development Website</h4>
</div><!-- /.container -->
<!-- <div class="videoWrapperOuter">
<div class="videoWrapperInner">
<iframe src="//www.youtube.com/embed/C6-TWRn0k4I"
frameborder="0" allowfullscreen></iframe>
</div> -->
<div class="video container">
<div class="col-md-8">
<div class="vid">
<iframe src="//www.youtube.com/embed/ac7KhViaVqc" frameborder="0" allowfullscreen></iframe>
<h2 class="text-info" id="last" >Last Update:</h2>
</div><!--./vid -->
</div><!--.col -->
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
<script src="/js/collapse.js"></script>
<script src="/js/transition.js"></script>
<script src="/js/tooltip.js"></script>
<script src="/js/tab.js"></script>
<script src="/js/scrollspy.js"></script>
<script src="/js/popover.js"></script>
<script src="/js/npm.js"></script>
<script src="/js/modal.js"></script>
<script src="/js/dropdown.js"></script>
<script src="/js/carrousel.js"></script>
<script src="/js/button.js"></script>
<script src="/js/alert.js"></script>
<script src="/js/affix.js"></script>
</body>
</html>
body {
padding-top: 50px;
}
.starter-template {
padding: 40px 15px;
text-align: center;
}
html, body {
background-color: black;
background: url(/images/bg.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
/*background-position: center;*/
height: 100%;
margin: 0;
}
.front {
position: absolute;
margin-left: 54%;
margin-top: 7%;
width: 46%;
}
#title {
font-size: 60px;
word-wrap: normal;
}
.vid {
width: 100%;
margin-top: 16%;
margin-left: 3%;
}
iframe {
max-width: 100%;
height: auto;
width: 78%;
height: 240px;
}
.navbar {
background-color: rgba(0, 0, 0, 0.6);
background: rgba(0, 0, 0, 0.6);
border-color: rgba(0, 0, 0, 0.4);
}
.nav.navbar-nav.navbar-right li a {
color: white;
}
.navbar-default .navbar-brand {
color: white;
}
.navbar-nav>.active>a, .navbar-nav>.active>a:hover, .navbar-nav>.active>a:focus {
color:black;
}
#last {
position: absolute;
left: 5%;
top: 15%;
}
.video {
position: absolute;
}
#media only screen and (min-width:321px) and (max-width:768px) {
iframe {display: none;}
#last {display: none; }
.front {margin-left: 28%; text-wrap: nowrap; text-align: center;}
}
#media only screen and (min-width:768px) and (max-width:1024px) {
iframe {width: 500px; height: 300px; margin-top: 6%;}
}
As you can see I have two #media at the bottom which work for my tablet which is 1024x768 and for my phone which is smaller.
I've done those modifications:
.vid {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.vid iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
But now I am not sure how to resize it properly:
http://imgur.com/a/FmTjP
Add this to your CSS, it should make the video responsive when scaling down the window.
.vid {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.vid iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
I have a couple of problems in my CSS footer. Please run this snippet in Full Page to see how it lays out on a larger display (I will be making it responsive a little later. For now, please just use Full Page).
.small col-md-3 {
font-size: .8em
}
.footer-distributed {
background-color: #34385E;
width: 100%
}
.footer-distributed .footer-links {
color: #ffffff;
}
.footer-distributed .footer-links a {
line-height: 1.8;
color: inherit;
padding: 0 2em;
}
.footer-distributed .footer-left-bar {
border-left: solid;
color: #FFFFFF;
}
footer {
position: fixed;
bottom: 0;
}
<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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="http://fonts.googleapis.com/css?family=Cookie" rel="stylesheet" type="text/css">
</head>
<body>
<footer class="footer-distributed">
<div class="row" style="height: 1em"></div>
<div class="row">
<div class="col-md-3">
<p class="footer-links">
Link Number 123
Link Number 2
Link Number 3
Link Number 4
</p>
</div>
<div class="col-md-6 footer-left-bar">
<div class="row footer-links">
<div class="col-md-6">
<p>This information is</br>
always three</br>
lines long
</p>
</div>
</div>
</div>
<div class="col-md-3 footer-left-bar">
<div class="row footer-links">
<div class="col-md-6">BRANDING 1</div>
<div class="col-md-6">BRANDING 2</div>
</div>
</div>
</div>
<div class="row" style="height: 1em"></div>
</footer>
</html>
The 4 links on the left. I would like them to be in a left-justified cells of a 2x2 grid no matter how long the text is in them. As you can see, Link 2 is being pushed to the right because Link Number 123 is too long.
The 2 Branding link on the right. I would like them to be side-by-side and centered vertically such that the white separator bar matches the longer white separator bar to the left of the center column.
Can anybody offer any hints on how to accomplish this?? Thank you!!
Hmmm... I guess the comment/answer was deleted. But, it worked out great! The advice was:
Use a 2/2 grid of rows & columns on the left side to space out the
items.
Use white margin lines on both sides of the center chunk,
rather than trying to do left margin lines on the center and right
chunks.
Vertical centering still isn't great, so I may mess around with additional answers to try that out. Thanks!
Here's a slightly rewritten code, without the use of Bootstrap (it's still loaded, of course, but not used for the actual footer).
footer {
background-color: #34385E;
color: #FFF;
position: fixed;
bottom: 0;
width: 100%;
min-height: 7em;
box-sizing: border-box;
padding: .5em 0;
}
footer ul {
list-style-type: none;
}
.footer-links a {
line-height: 1.8;
color: inherit;
width: 100%;
}
#footer-container div:nth-of-type(2) {
border-left: solid;
padding-left: 1em;
display: flex;
flex: 2 1 0;
}
#footer-container div:nth-of-type(2) p {
flex: 1 1 0;
margin: auto;
}
#footer-container div:first-of-type {
max-width: 30%;
}
#footer-container div:first-of-type ul {
display: flex;
flex-wrap: wrap;
position: absolute;
top: 50%;
transform: translate(0,-50%);
}
#footer-container div:first-of-type ul li {
flex: 1 1 50%;
display: block;
margin: auto;
}
#footer-container {
display: flex;
min-height: 7em;
}
#footer-container div {
flex: 2 1 0;
}
#footer-container div:last-of-type {
margin: auto;
border-left: solid;
flex: 1 1 0;
}
#footer-container div:last-of-type ul li {
display: inline-block;
}
<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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="http://fonts.googleapis.com/css?family=Cookie" rel="stylesheet" type="text/css">
</head>
<body>
<footer>
<div id="footer-container">
<div>
<ul class="footer-links">
<li>Link Number 123</li>
<li>Link Number 2</li>
<li>Link Number 3</li>
<li>Link Number 4</li>
</ul>
</div>
<div>
<p>This information is<br>
always three<br>
lines long
</p>
</div>
<div>
<ul>
<li>BRANDING 1</li>
<li>BRANDING 2</li>
</ul>
</div>
</div>
</footer>
</html>
Just add <div> in your HTML:
<p class="footer-links">
<div class= 'footer-left-container'>
<div class= 'option'>Link Number 123</div>
<div class= 'option'>Link Number 2</div>
<div class= 'option'>Link Number 3</div>
<div class= 'option'>Link Number 4</div>
</div>
</p>
Add in your CSS:
.footer-left-container{ overflow: auto; margin-left: 10px; }
.option{ width: 130px; float: left; margin-top: 1px; margin-left: 2px; }
As for your second question I could not understand what exactly you require.