I am trying to make a simple footer that is always at the bottom of the page. The content of the page will never exceed the screen size so no need to scroll down. (Basically there will be 5 different html pages and I want the footer and header to always be the same.)
However, once I make the footer "fixed", when I inspect the page in Chrome, the footer is no longer a part of the body or html layout.
I can get the footer to appear on the screen as I need to(using a wrap to set the width to 65% and centered) but I think the footer is supposed to be highlighted upon inspection when pointing on body and html.
Any idea why this is occurring? It seems to occur based upon the footer's position being changed to fixed.
Here is the HTML and relevant CSS:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="../normalize.css">
<link rel="stylesheet" href="index-styles.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css"
integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<title>Play2Learn Home Page</title>
</head>
<body>
<header>
<h1>Play2Learn Logo</h1>
<nav>
<ul>
<li><a class="border" href="index.html">Home</a></li>
<li id="games-li"><a class="border" href="#">Games</a>
<ul id="games-ul">
<li>Anagram Hunt </li>
<li>Math Facts Practice</li>
</ul>
</li>
<li><a class="border" href="about.html">About</a></li>
<li>Login </li>
</ul>
</nav>
</header>
<main>
<div id="testimonial">Happy Clients Say...</div>
<div id="quote">"I never have more fun than when I'm playing Anagram Hunt. It's the best game I've ever played!"</div>
<div id="author">-Justin Jest</div>
<section id="grids">
<div id="grid1">
<h3 class="article-title">Anagram Hunt</h3>
<article id="article1">Lorem ipsum dolor
sit amet, consectetur adipiscing elit.
Cura bitur tristique odio ac sem congue luctus.
Praesent vel rutrum lectus.
Nam mattis finibus odio. Suspendisse ligula orci,
ullamcorper vitae nulla nec, tempor auctor felis.
Sed eu luctus sem.
</article>
<button>Play</button>
</div>
<div id="grid2">
<h3 class="article-title">Math Facts Practice</h3>
<article id="article2">Lorem ipsum dolor
sit amet, consectetur adipiscing elit.
Cura bitur tristique odio ac sem congue luctus.
Praesent vel rutrum lectus.
Nam mattis finibus odio. Suspendisse ligula orci,
ullamcorper vitae nulla nec, tempor auctor felis.
Sed eu luctus sem.
</article>
<button>Play</button>
</div>
</section>
</main>
<footer>
© 2021 Play2Learn
<i class="fas fa-envelope-square"></i>
<i class="fab fa-instagram-square"></i>
<i class="fab fa-twitter-square"></i>
<i class="fab fa-facebook-square"></i>
</footer>
</body>
</html>
footer {
border-top: 2px solid black;
width: 100%;
height: 60px;
font-size: 12px;
padding-top: 0.5rem;
bottom: 0;
position: fixed;
}
footer a {
color: inherit;
font-size: 46px;
padding-left: 1rem;
}
I think this is what you need: https://matthewjamestaylor.com/bottom-footer
Here it is integrated with your code:
html,body {
margin:0;
padding:0;
height:100%
}
#container {
margin-left:0.5em;
min-height:100%;
position:relative;
}
header {
padding:0.1px;
}
main {
padding-bottom:60px; /* Height of the footer */
}
footer {
border-top: 2px solid black;
width: 100%;
font-size: 12px;
padding-top: 0.5rem;
bottom:0;
position:absolute;
}
footer a {
color: inherit;
font-size: 46px;
padding-left: 1rem;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="../normalize.css">
<link rel="stylesheet" href="index-styles.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css"
integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<title>Play2Learn Home Page</title>
</head>
<body>
<div id="container">
<header>
<h1>Play2Learn Logo</h1>
<nav>
<ul>
<li><a class="border" href="index.html">Home</a></li>
<li id="games-li"><a class="border" href="#">Games</a>
<ul id="games-ul">
<li>Anagram Hunt </li>
<li>Math Facts Practice</li>
</ul>
</li>
<li><a class="border" href="about.html">About</a></li>
<li>Login </li>
</ul>
</nav>
</header>
<main>
<div id="testimonial">Happy Clients Say...</div>
<div id="quote">"I never have more fun than when I'm playing Anagram Hunt. It's the best game I've ever played!"</div>
<div id="author">-Justin Jest</div>
<section id="grids">
<div id="grid1">
<h3 class="article-title">Anagram Hunt</h3>
<article id="article1">Lorem ipsum dolor
sit amet, consectetur adipiscing elit.
Cura bitur tristique odio ac sem congue luctus.
Praesent vel rutrum lectus.
Nam mattis finibus odio. Suspendisse ligula orci,
ullamcorper vitae nulla nec, tempor auctor felis.
Sed eu luctus sem.
</article>
<button>Play</button>
</div>
<div id="grid2">
<h3 class="article-title">Math Facts Practice</h3>
<article id="article2">Lorem ipsum dolor
sit amet, consectetur adipiscing elit.
Cura bitur tristique odio ac sem congue luctus.
Praesent vel rutrum lectus.
Nam mattis finibus odio. Suspendisse ligula orci,
ullamcorper vitae nulla nec, tempor auctor felis.
Sed eu luctus sem.
</article>
<button>Play</button>
</div>
</section>
</main>
<footer>
© 2021 Play2Learn
<i class="fas fa-envelope-square"></i>
<i class="fab fa-instagram-square"></i>
<i class="fab fa-twitter-square"></i>
<i class="fab fa-facebook-square"></i>
</footer>
</div>
</body>
</html>
(Notice that the footer height is set in the padding-bottom for main.)
Related
I am adding a footer to my website. When I add it it makes the website overflow on the x-axis. Removing the 15px margins in the .row isn't an option because i would have to redo all the css
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<footer style="margin-top:20px;background-color:lightgrey">
<div class="container-fluid" style="max-width:100%; margin:0px">
<div class="row" style="margin:0px;width:100%">
<div class="col-8" style="padding-bottom:10px !important; padding:40px">
<h4 style="margin-top: 10px">Om</h4>
<p class="text-muted" style="margin-top:7px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum placerat malesuada leo. Vestibulum rutrum erat non diam feugiat pulvinar.
Nam sit amet aliquam nibh. Vestibulum sed consequat elit. Ut sodales justo sit amet iaculis venenatis. Curabitur fermentum magna id nunc ullamcorper consectetur.
Cras quis odio quis elit aliquet vulputate in nec nulla. Donec placerat bibendum ligula eget fringilla. Quisque sem ligula, sodales at est vitae, consectetur tempor justo.
</p>
</div>
<div class="col-2" style="padding-bottom:10px !important;padding:40px">
<h4 style="margin-top: 10px">Hurtige links</h4>
<li style="list-style-type: none;">
Upload
</li>
<li style="list-style-type: none;">
Min profil
</li>
<li style="list-style-type: none;">
Hjem
</li>
</div>
<div class="col-2" style="padding-bottom:10px !important;padding:40px; padding-left: 0px !important">
<h4 style="margin-top: 10px">Ligegyldige links</h4>
<li style="list-style-type: none;">
Betingelser
</li>
</div>
</div>
</div>
<div class="container-fluid" style="width:100%">
<div class="row" style="width:100%;background-color:lightgrey">
<div class="col-12" style="padding-top:0px !important;padding-bottom: 0px !important;padding:40px">
<hr>
<p>Copyright © 2019 All Rights Reserved by Studii</p>
</div>
</div>
</div>
</footer>
container-fluid was originally taken out of Bootstrap 3.0, but added
back in 3.1.1
To fix this, you can either:
Use the newer version of Bootstrap style sheet
Demo with New Style Sheet in Fiddle Or add in the class yourself
The .row adds a 15px margin to the left and right. Since
.container-fluid fills up 100% of the screen width, the extra margin
space causes overflow issues.
To fix this, you need to add padding to .container-fluid class
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
Demo with Custom container class in Fiddle
This question already has answers here:
How to make a div 100% height of the browser window
(39 answers)
Percentage Height HTML 5/CSS
(7 answers)
Closed 4 years ago.
So I am just starting to learn some basic CSS and now I have come across some behavior I don't understand. I have a <div> inside an <article> and the <div>s height is set to 100%. Now if all the parents parents of the <div> have their height specified then the height is equal to the parents height, however when it is not the case then <div>s height is smaller.
Here is a simple example when not all heights are specified:
html {
height: 100%;
}
article {
background-color: red;
height: 100%;
}
#side-nav {
background-color: blue;
float: left;
min-width: 10%;
height: 100%;
padding: auto;
margin: 0;
}
#main-content {
margin-left: 10%;
width: 90%;
}
<!DOCTYPE html>
<html>
<head>
<title>some title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav id="top-nav">
<div id="main-nav-bar">
<a class="nav-bar-opt">opt1</a>
<a class="nav-bar-opt">opt2</a>
<a class="nav-bar-opt">opt3</a>
</div>
</nav>
<article id="article">
<div id="side-nav">
<ul>
<li><a class="art-link">bullet</a></li>
<li><a class="art-link">point</a></li>
<li><a class="art-link">list</a></li>
</ul>
</div>
<div id="main-content">
<h1>
title
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris condimentum sodales nulla a imperdiet. Ut interdum rhoncus luctus. Fusce porttitor eu nulla eu consectetur. Vivamus et pretium dolor, quis lobortis mauris. Quisque dignissim auctor nisl placerat placerat. Vivamus ultrices leo nec tincidunt ornare. Nulla accumsan euismod metus nec congue.
</p>
<h3>
title
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris condimentum sodales nulla a imperdiet. Ut interdum rhoncus luctus. Fusce porttitor eu nulla eu consectetur. Vivamus et pretium dolor, quis lobortis mauris. Quisque dignissim auctor nisl placerat placerat. Vivamus ultrices leo nec tincidunt ornare. Nulla accumsan euismod metus nec congue.
</p>
<ul>
<li>another</li>
<li>bullet</li>
<li>point</li>
<li>list</li>
</ul>
</div>
</article>
</body>
</html>
note that the <div>(colored in blue) is smaller than the direct parent <article>(colored in red).
So now my question is if there is a reason for this behavior and if there is some workaround to avoid specifying all heights?
You don't specify a height for your <body>, as such the rest of the height is stuck trying to figure out what it's 100% of.
Please set body{height: 100%}, will set the height of both blue and red to 100%, as shown in the below working snippet, hope it helps :)
html, body {
height: 100%;
}
article {
background-color: red;
height: 100%;
}
#side-nav {
background-color: blue;
float: left;
min-width: 10%;
height: 100%;
padding: auto;
margin: 0;
}
#main-content {
margin-left: 10%;
width: 90%;
}
<!DOCTYPE html>
<html>
<head>
<title>some title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav id="top-nav">
<div id="main-nav-bar">
<a class="nav-bar-opt">opt1</a>
<a class="nav-bar-opt">opt2</a>
<a class="nav-bar-opt">opt3</a>
</div>
</nav>
<article id="article">
<div id="side-nav">
<ul>
<li><a class="art-link">bullet</a></li>
<li><a class="art-link">point</a></li>
<li><a class="art-link">list</a></li>
</ul>
</div>
<div id="main-content">
<h1>
title
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris condimentum sodales nulla a imperdiet. Ut interdum rhoncus luctus. Fusce porttitor eu nulla eu consectetur. Vivamus et pretium dolor, quis lobortis mauris. Quisque dignissim auctor nisl placerat placerat. Vivamus ultrices leo nec tincidunt ornare. Nulla accumsan euismod metus nec congue.
</p>
<ul>
<li>another</li>
<li>bullet</li>
<li>point</li>
<li>list</li>
</ul>
</div>
</article>
</body>
</html>
Instead of floating the side-nav element to the left, you need to use flex.
Then you don't need to specify height on every element, as requested.
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
main {
height: 98%;
display: flex;
flex-direction: row;
flex: 1 1 auto; /* grow shrink amount */
}
article {
background-color: #ffeeee;
flex-direction: column;
flex: 1 1 auto;
padding: 0.5em;
}
#side-nav {
background-color: #eeeeff;
flex-direction: column;
flex: 1 1 auto;
min-width: 11%;
padding: auto;
margin: 0;
}
#side-nav ul {
list-style-type: none;
margin-left: -2.5em;
}
#side-nav li a {
display: block;
white-space: nowrap;
padding: 0.25em;
}
#side-nav li a:hover {
display: block;
background-color: #0000ff;
color: #fff;
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<title>some title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav id="top-nav">
<div id="main-nav-bar">
<a class="nav-bar-opt">opt1</a>
<a class="nav-bar-opt">opt2</a>
<a class="nav-bar-opt">opt3</a>
</div>
</nav>
<main>
<div id="side-nav">
<ul>
<li><a class="art-link">nav</a></li>
<li><a class="art-link">list</a></li>
<li><a class="art-link">and</a></li>
<li><a class="art-link">some</a></li>
<li><a class="art-link">more</a></li>
<li><a class="art-link">items</a></li>
</ul>
</div>
<article id="article">
<h1>
title
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris condimentum sodales nulla a imperdiet. Ut interdum rhoncus luctus. Fusce porttitor eu nulla eu consectetur. Vivamus et pretium dolor, quis lobortis mauris. Quisque dignissim auctor nisl placerat placerat. Vivamus ultrices leo nec tincidunt ornare. Nulla accumsan euismod metus nec congue.
</p>
<h3>
title
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris condimentum sodales nulla a imperdiet. Ut interdum rhoncus luctus. Fusce porttitor eu nulla eu consectetur. Vivamus et pretium dolor, quis lobortis mauris. Quisque dignissim auctor nisl placerat placerat. Vivamus ultrices leo nec tincidunt ornare. Nulla accumsan euismod metus nec congue.
</p>
<ul>
<li>another</li>
<li>bullet</li>
<li>point</li>
<li>list</li>
</ul>
</article>
</main>
</body>
</html>
I'm trying to create a single page website, with multiple divs that are full screen, but I'm not being able to turn them full screen.
I'm Already using bootstrap to make the website responsive, and it's my first time doing that.
What I want to do is set a background video, then when I scroll down, the divs fitting the entire viewport
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="imagens/logo_icone.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/estilos.css">
<title>Museu do Barro Preto</title>
</head>
<body>
<div class="container-fluid">
<!--Video -->
<div class="row">
<div class="col-xs-12">
<video class="video_bg" autoplay muted loop>
<source src="video/prom.mp4" type="video/mp4">
A extensão do ficheiro não é suportada pelo seu browser
</video>
</div>
</div>
<!--/Video -->
<!--Barra de Navegação-->
<div class="row">
<header class="col-md-12">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>Quem Somos</li>
<li>Onde Estamos</li>
<li>Educação</li>
<li>Video</li>
<li>Exposições</li>
</ul>
</div>
</div>
</nav>
</header>
</div>
<!--/Barra de Navegação-->
<div class="row pag1">
<article class="col-md-8">
<section>
<h1>Quem Somos</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque iaculis mattis odio, vitae aliquet orci porttitor quis. Morbi feugiat nulla sit amet felis rutrum, sed iaculis augue porta. Morbi semper et enim in ultricies. Morbi consectetur lorem sodales, maximus risus in, lacinia ex. Nulla metus risus, luctus in quam ut, maximus viverra sem. Nulla posuere condimentum hendrerit. Nulla pulvinar dictum magna non euismod. Quisque et elit nunc. Aenean non dignissim lectus. Ut et purus ac mauris luctus tempor.
Praesent elit quam, eleifend ac aliquet id, imperdiet a est. Nam gravida sed nunc at elementum. In hac habitasse platea dictumst. Aenean.</p>
</section>
</article>
<aside class="col-md-4">
<img src="http://www.dueceira.pt/trilhos/imgs/barro_preto_vnp2.jpg" alt="Peças Barro Preto">
</aside>
</div>
<div class="row">
<article>
<aside class="col-md-4">
<div id="mapa">
</div>
</aside>
<section class="col-md-8">
<h1>Onde Estamos</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque iaculis mattis odio, vitae aliquet orci porttitor quis. Morbi feugiat nulla sit amet felis rutrum, sed iaculis augue porta. Morbi semper et enim in ultricies. Morbi consectetur lorem sodales, maximus risus in, lacinia ex. Nulla metus risus, luctus in quam ut, maximus viverra sem. Nulla posuere condimentum hendrerit. Nulla pulvinar dictum magna non euismod. Quisque et elit nunc. Aenean non dignissim lectus. Ut et purus ac mauris luctus tempor.
Praesent elit quam, eleifend ac aliquet id, imperdiet a est. Nam gravida sed nunc at elementum. In hac habitasse platea dictumst. Aenean.</p>
</section>
</article>
</div>
<div class="row">
<div id="ilustracao">
<h1>SLIDESHOW DAS ILUSTRAÇÕES</h1>
</div>
</div>
<div id="video">
<div id="documentario">
<h1>Documentario</h1>
<video class="documentario" controls>
<source src="video/prom.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
CSS
html,body {
height:100%;
margin:0;
}
html>body .pag1 {
height:auto;
}
.video_bg {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translate(-50%, -50%);
}
.borders {
border: 1px solid black;
}
.documentario {
width: 500px;
height: 500px;
}
.pag1 {
width: 100%;
height: 100%;
margin-top: 100%;
background-color: #fff;
overflow: hidden;
position: relative;
}
.pag1 img {
width: 400px;
height: 400px;
}
Try giving your div's a vh style. Such as
div {max-height:100vh;} // this will give your div a max height of 100 vertical height which is set to full screen size.
http://www.w3schools.com/cssref/css_units.asp
What you want is the vh unit, coupled with a fallback for browsers that don't support it. Unless it's a very big project (those scroll-y sites usually aren't) I'd ditch Bootstrap. It's pretty badly made, actually.
Last site we did that had to behave like that, we put each full-screen element in a li, sized the li using 100vh, falling back to regular px units set by javascript to match screen size, falling back to a set of common screen resolutions through conditional comments.
Sadly, using 100% created a lot of headaches with sizing child elements.
This is elaborate to set up, but if you do this once it will save you a lot of work later. It's also pretty much the only solid way to do this accessibly. (We test all our work through a group of users with assistive technology.)
So In essence:
<ol>
<li>
'Page' content here.
</li>
<li>
'Page'content here.
</li>
</ol>
ol {
display: block;
position: relative;
width: 100%; /* Caused no issues and is better supported */
height: auto;
float: left;
}
li {
display: block;
position: relative;
width: 100%;
height: 100vh;
float: left;
}
Look at Modernizr if you haven't already:
https://modernizr.com/
Also look at the various Javascript solutions for serving up compatible video formats, or you may find yourself showing a full-screen blank screen.
Oh, and insert obligatory warning here about video aspect ratio's not matching all screen aspect ratio's. ;-)
I have this responsive layout on my site. When the screen is less than 767px wide the image is tucked under the text. Is there a way to make the image (and caption i.e. .rightColumn) go above the .leftColumn instead?
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
body { margin: 0; }
.columnsContainer { position: relative; margin: 1.5em 0; padding:1.5em ; border: 1px solid #fff;}
.leftColumn { margin-bottom: .5em; }
.rightColumn .wp-caption{border-width: 0px;}
.rightColumn {min-height:100%;}
/* MEDIA QUERIES */
#media screen and (min-width: 767px ) {
.leftColumn { margin-right: 51%; }
.rightColumn { position: absolute; top: 0; right: 0; width: 48.5%; }
}
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Responsive Two Column Layout (Left Column Fluid)</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="columnsContainer">
<div class="leftColumn">
<h2 style="width: 100%; font-family: Aller;"></h2>
<h2 style="width: 100%; font-family: Aller;">BEST OF SCOTLAND
FISHING BREAK</h2>
<ul class="checkmark">
<li>2 Days each of guided salmon, pike & trout/grayling fishing</li>
<li>7 Night bed & breakfast</li>
<li>Full equipment & transfers provided</li>
<li>Peak season 1st April - 15th November</li>
<li>Glasgow or Edinburgh airport transfers Included</li>
<li><span style="font-family: Aller;">1 hour from Edinburgh, Glasgow & Perth</span></li>
</ul>
View Trip Dossier
</div>
<div class="rightColumn">
<p style="text-align: right;">
<img class="aligncenter wp-image-4684" src="http://scotiafishing.com/wp-content/uploads/bofs.jpg" alt="best-of-scotland-break" width="415" height="277" />
<br>Experience the best of Scotland's fishing with this six day break!
</p>
</div>
</div>
</body>
</html>
Easiest way to do this is to add the rightColumn div before the leftColumn div. It should not mess the structure up and will show the image first
<div class="rightColumn">
<p style="text-align: right;">
<img class="aligncenter wp-image-4684" src="http://scotiafishing.com/wp-content/uploads/bofs.jpg" alt="best-of-scotland-break" width="415" height="277" />
<br>Experience the best of Scotland's fishing with this six day break!
</p>
</div>
<div class="leftColumn">
<h2 style="width: 100%; font-family: Aller;"></h2>
<h2 style="width: 100%; font-family: Aller;">BEST OF SCOTLAND
FISHING BREAK</h2>
<ul class="checkmark">
<li>2 Days each of guided salmon, pike & trout/grayling fishing</li>
<li>7 Night bed & breakfast</li>
<li>Full equipment & transfers provided</li>
<li>Peak season 1st April - 15th November</li>
<li>Glasgow or Edinburgh airport transfers Included</li>
<li><span style="font-family: Aller;">1 hour from Edinburgh, Glasgow & Perth</span></li>
</ul>
View Trip Dossier
</div>
Use bootstrap and use flex-reverse-column this should work
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<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="./assests/style.css">
<title>Hello, world!</title>
</head>
<body>
<h1>HELLO BOOTSTRAP</h1>
<div class="row flex-column-reverse flex-md-row">
<div class="col-sm-12 col-md-6">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In at laoreet tortor,
vitae sodales magna. Curabitur vel feugiat magna, vitae vehicula nibh. Proin
eget lobortis mi. Sed dapibus urna quis risus fringilla ultrices. Praesent lacinia
fermentum velit, vitae ultricies nibh porttitor quis. Aenean nisi mi, elementum id
quam eu, tristique porta nunc. Vestibulum ac faucibus lorem. Donec sit amet metus
venenatis nisi tincidunt ultrices. In semper nibh nunc, at posuere purus rhoncus
ac. Mauris pulvinar sed mauris quis efficitur. Proin sollicitudin euismod purus,
a gravida neque cursus sed. Etiam faucibus aliquet metus, ut accumsan augue
suscipit nec. Donec laoreet nisi nibh, ac egestas nisl hendrerit sit amet.
Morbi scelerisque, velit quis suscipit viverra, sem velit varius nulla, vitae
tincidunt felis elit sit ametdolor. Nulla mi tellus, imperdiet nec nisi non,
suscipit suscipit lacus. Nunc porttitor nibh at purus dignissim mollis.
</p>
<p>
Phasellus sodales tempor turpis, a vehicula sem. Donec et leo in lorem venenatis
interdum at non risus. Maecenas aliquam, turpis at posuere tristique, nunc
nibh maximus nisl, a tristique lacus turpis a ligula. Proin gravida
id odio eget facilisis. Phasellus varius quis arcu in lobortis. Vivamus eu condimentum velit.
Praesent massa purus, iaculis eget consectetur sed, dictum in turpis.
Mauris quis tempus massa. Sed quam justo, viverra id
ligula sit amet, aliquet vehicula tortor.
</p>
</div>
<div class="col-sm-12 col-md-6">
<img src="https://picsum.photos/536/354" style="width: 100%; height: 100%;" alt="unsplash">
</div>
</div>
<!-- Bootstrap Bundle with Popper -->
<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>
<!-- JQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>
</html>```
Question background:
I'm pretty new to Bootstrap and have been developing a site as of late and have run into an issues with the content of my page 'overlapping' the footer at the bottom when the window is resized to a 'mobile' device resolution.
The issue:
The following picture shows a maximized screen with no overlap.
Re-sized screen, footer overlap:
HTML:
I have a 'master page' which holds the footer, each page implements this.
<div class="row-fluid">
<div class="span12">
<div class="padding">
<h2>C#</h2>
<div class="row-fluid">
<div class="span4">
<h3>Project1</h3>
#ViewBag.ProjectTwoInfo
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<div class="span4">
<h3>Project1</h3>
#ViewBag.ProjectOneInfo
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<div class="span4">
<h3>Project1</h3>
#ViewBag.ProjectOneInfo
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span12 cSharpBackGroundColour">
<div class="container">
<div class="span12">
<div class="row-fluid">
<div class=" paddingTop">
<div class="span3 circle-image">
</div>
<div class="span3 circle-image">
</div>
<div class="span3 circle-image">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
EDIT:
Footer code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="author" content="Martin Bean" />
<link href="\Bootstrap\css\bootstrap.css" rel="stylesheet" />
<link href="\Bootstrap\css\bootstrap-responsive.css" rel="stylesheet" />
<link href="\Bootstrap\css\bootstrap-responsive.min.css" rel="stylesheet" />
<link href="\Bootstrap\css\bootstrap-social.css" rel="stylesheet" />
<link href="\CustomCSS\Footer.css" rel="stylesheet" />
<link href="\CustomCSS\HeroUnit.css" rel="stylesheet" />
<link href="\Bootstrap\FontAwesome\css\font-awesome.css" rel="stylesheet">
<link href="\Bootstrap\FontAwesome\css\font-awesome.min.css" rel="stylesheet">
<script src="\Scripts\jquery-2.1.1.min.js"></script>
<script src="\Bootstrap\js\bootstrap.js"></script>
<title>Twitter’s Bootstrap with Ryan Fait’s Sticky Footer</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<style>
html, body {
height: 100%;
}
footer {
color: #666;
background: #222;
padding: 17px 0 18px 0;
border-top: 1px solid #000;
height: auto;
}
.colour {
background-color: #272727;
height: 100px;
}
.imageCentering {
align-content:center;
}
footer a {
color: #999;
}
footer a:hover {
color: #efefef;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -63px;
background-color: white;
}
.wrapper2 {
min-height: 100%;
height: auto !important;
height: 100%;
background-color: white;
margin-left: 250px;
margin-right: 250px;
padding: 25px 25px 25px 25px;
}
.title {
margin-top: 40px;
padding-left: 5px;
font-family: 'Segoe UI';
color: white;
font-size: x-large;
}
.push {
height: 90px;
}
.pushtop {
height: 5px;
}
/* not required for sticky footer; just pushes hero down a bit */
.wrapper > .container {
padding-top: 20px;
}
.buttonAlign {
align-content: center;
}
.floatLeft {
float: left;
}
.floatRight {
float: right;
padding-right: 20px;
}
</style>
</head>
<body>
<div class="navbar navbar-inverse navbar-static-top">
<div class="navbar-inner">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>About</li>
<li>Contact</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Projects
<b class=" caret"></b>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownmenu">
<li>Proj1</li>
<li>Proj2</li>
<li>Proj3</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
#*</div>*#
<div class="colour">
<div class="row-fluid">
<div class="title">
Software Developer#*</div>*#
</div>
</div>
</div>
<div class="wrapper">
#RenderBody()
</div>
<div class="push"></div>
<footer>
<div class="container">
<div class="row-fluid">
<div class="span12">
<div class="floatLeft">
<a><ul>About Me</ul></a>
<a><ul>Projects</ul></a>
<a><ul>Contact Me</ul></a>
</div>
<div class="floatRight">
<i class="fa fa-facebook-square fa-3x"></i>
<i class="fa fa-linkedin-square fa-3x"></i>
<i class="fa fa-twitter-square fa-3x"></i>
</div>
</div>
</div>
</div>
</footer>
Any help resolving this issue would be great. Please note I would also want the 'grey' background div - that holds the 3 images to be responsive.
you have several HTML code issues, I did a clean-up and also simplified things a bit for demo purposes (you may adjust at will, of course).
The HTML part:
<div class="navbar navbar-inverse navbar-static-top">
<div class="navbar-inner"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li>About
</li>
<li>Contact
</li>
<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">
Projects
<b class=" caret"></b>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownmenu">
<li>Proj1
</li>
<li>Proj2
</li>
<li>Proj3
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="colour">
<div class="row-fluid">
<div class="title">Software Developer</div>
</div>
</div>
<div class="wrapper">
<div id="lipsum">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum imperdiet rutrum leo quis aliquam. Sed pretium efficitur enim at ultricies. Nullam ullamcorper porta risus, quis imperdiet eros rutrum sit amet. Nullam in nisl bibendum, dignissim arcu quis, consectetur turpis. Cras luctus egestas ligula. Suspendisse dignissim diam a augue egestas pharetra. Donec viverra eu velit ut pharetra. Nulla suscipit, ante eget venenatis cursus, nulla erat congue tellus, faucibus cursus orci lacus sit amet urna. Nulla facilisi. Duis commodo porttitor sem. In hac habitasse platea dictumst. Integer dui elit, rhoncus vitae tincidunt nec, scelerisque ac dolor. Integer at ligula eget ligula scelerisque volutpat eget quis lorem.</p>
<p>Praesent ac sapien sit amet magna sollicitudin vestibulum et nec erat. Quisque consectetur vel dui ac dapibus. Praesent at sapien tristique augue tincidunt auctor sed non justo. Fusce ac venenatis mauris. Quisque lobortis neque a eros hendrerit consectetur ac id magna. Mauris non velit ante. Nunc orci lorem, auctor a orci a, luctus sollicitudin turpis. Phasellus ornare tempus felis eu pharetra.</p>
<p>Integer eleifend, sapien eu molestie tristique, nunc felis varius tellus, at congue magna sapien ut tortor. Maecenas sodales ultricies ligula sollicitudin cursus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent laoreet odio ex, ut luctus tortor mollis sit amet. Aenean rutrum consequat lorem eget porta. Aliquam lacus enim, congue ac condimentum sit amet, consequat a diam. Duis eget mauris id nisi molestie vulputate sit amet vel nulla. Curabitur ac feugiat enim, eu rutrum magna.</p>
<p>Suspendisse sed lorem ac leo volutpat sodales. Pellentesque erat ex, tincidunt eu urna ac, gravida convallis eros. Phasellus nisl purus, egestas quis ipsum id, ornare pharetra tellus. Nullam congue leo ex, nec sagittis dolor tempor nec. Sed convallis sem risus, a congue leo feugiat non. Integer placerat dui eget lorem eleifend, a gravida tortor tempus. Vestibulum at est tempor sem sollicitudin hendrerit. Etiam vitae mauris eget sapien pharetra mattis a quis metus. Mauris facilisis sapien non fringilla scelerisque. Fusce a odio ultricies, rutrum nunc quis, faucibus quam.</p>
<p>Donec sed est vitae elit dignissim gravida. Vivamus blandit eros ex, vel placerat dui ornare in. Nullam feugiat risus lectus. Cras sagittis dolor vitae vulputate accumsan. Sed arcu massa, tempor vel massa nec, vehicula pellentesque tortor. Suspendisse fringilla eros risus, a scelerisque neque tempor ut. In et velit sapien. Etiam porttitor aliquam arcu, ut mollis augue rutrum feugiat.</p>
</div>
</div>
<div class="push"></div>
<footer>
<div class="container">
<div class="row-fluid">
<div class="span12 links">
<div class="floatLeft"> <a>About Me</a>
<a>Projects</a>
<a>Contact Me</a>
</div>
<div class="floatRight"> <i class="fa fa-facebook-square fa-3x"></i>
<i class="fa fa-linkedin-square fa-3x"></i>
<i class="fa fa-twitter-square fa-3x"></i>
</div>
</div>
</div>
</div>
</footer>
You had those <UL> elements before the footer's <A> and also an additional closing </div> on all sections. With the HTML cleaned, CSS is as simple as this:
.links .floatLeft a {
padding:30px;
background:#fc0;
}
footer, .wrapper, .push {
position:relative;
clear:both;
padding-top:20px;
}
See fiddle for complete code and preview