https://github.com/TurtleWolf/expressTemplate/issues/1
I’m getting an overlap between container-fluid
and the body
. I’ve tried making the container transparent and different margins
or padding
for the container, but If I guess wider than the current screen I get the grey scroll bar back. I’ve used cover
before to fix similar issues horizontally, but this does not work vertically.
CSS
body {
background: rgba(183,222,237,1);
background: -moz-linear-gradient(-45deg, rgba(183,222,237,1) 0%, rgba(113,206,239,1) 27%, rgba(33,180,226,1) 62%, rgba(183,222,237,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(183,222,237,1)), color-stop(27%, rgba(113,206,239,1)), color-stop(62%, rgba(33,180,226,1)), color-stop(100%, rgba(183,222,237,1)));
background: -webkit-linear-gradient(-45deg, rgba(183,222,237,1) 0%, rgba(113,206,239,1) 27%, rgba(33,180,226,1) 62%, rgba(183,222,237,1) 100%);
background: -o-linear-gradient(-45deg, rgba(183,222,237,1) 0%, rgba(113,206,239,1) 27%, rgba(33,180,226,1) 62%, rgba(183,222,237,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(183,222,237,1) 0%, rgba(113,206,239,1) 27%, rgba(33,180,226,1) 62%, rgba(183,222,237,1) 100%);
background: linear-gradient(135deg, rgba(183,222,237,1) 0%, rgba(113,206,239,1) 27%, rgba(33,180,226,1) 62%, rgba(183,222,237,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7deed', endColorstr='#b7deed', GradientType=1 );
.container-fluid {
background-color:rgba(0, 0, 0, 0.0);
padding-bottom: 2%;
margin-bottom: 2%;
}
HTML, meta tags etc… redacted
<!doctype html>
<html class="no-js" lang="">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<!-- Boot Strap 4 CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Covered+By+Your+Grace|Gloria+Hallelujah|Homemade+Apple|Indie+Flower|Ubuntu" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container-fluid text-center">
<div class="row text-justify">
<div class="col-sm left_fl8d">
<h4 class="text-left"><a href="https://turtlewolf.github.io/expressTemplate/"><kbd>git clone https://github.com/TurtleWolf/expressTemplate.git</kbd><br></a></h4>
<!-- <p>Hello world! This is HTML5 Boilerplate.</p> -->
<code>
<mark>"dependencies"</mark>: {<br>
"body-parser": "^1.18.2",<br>
"cors": "^2.8.4",<br>
"express": "^4.16.2",<br>
"nodemon": "^1.12.1",<br>
"serve-favicon": "^2.4.5"<br>
},<br>
</code>
// install <mark>"dependencies"</mark> listed in package.json<br>
<kbd>npm install</kbd><br><br>
<kbd>nodemon</kbd><br>
// start server and listen for file changes on process.env.PORT<br>
<br> // console.log("omg");<br>
<code>omg</code><br><br>
<p><a href="https://youtu.be/5T1YDRWaa3k?t=8m">The first 5 out of 10 assignments</a> to get certified at <a href="https://www.freecodecamp.org/challenges/timestamp-microservice">FreeCodeCamp.com</a> cover the same basic setup, Body-Parser, Cors, Express & Nodemon. I've added favicon.ico in the public directory along with HTML5 boilerplate & BootStrap 4 in index.html, the .gitignore excludes everything in the node-modules directory & Procfile for deployment to Heroku</p>
</div>
<!-- end of column1 -->
<div class="col-sm mid_fl8d">
// node version manager, cloud9 defaults to v6.11.2<br>
<kbd>nvm install 8</kbd><br>
// sudo apt-get install mongodb-org<br>
<kbd>sudo apt-get install --save mongodb-org</kbd><br>
// or maybe just<br>
<kbd>npm install mongodb --save</kbd><br>
// then<br>
<kbd>mongod --smallfiles</kbd><br><br>
<h3><a href="http://www.clementinejs.com/tutorials/tutorial-beginner.html">API (application program interface)</a></h3>
<br><br><br>
<iframe class="dropShadoe" width="560" height="315" src="https://www.youtube.com/embed/DbDuBihxHzI" frameborder="0" allowfullscreen></iframe> <br>
<br>
<br>
<br>
<section class="text-center">
<a href="http://turtlewolfe.com">
<img src="favicon.ico" alt="favicon" height="16" width="16">
<img src="favicon.ico" alt="favicon" height="30" width="30">
<img src="favicon.ico" alt="favicon" height="42" width="42">
<img src="favicon.ico" alt="favicon" height="65" width="65">
<kbd>http://turtlewolfe.com</kbd>
<img src="favicon.ico" alt="favicon" height="65" width="65">
<img src="favicon.ico" alt="favicon" height="42" width="42">
<img src="favicon.ico" alt="favicon" height="30" width="30">
<img src="favicon.ico" alt="favicon" height="16" width="16">
</a>
</section>
</div>
<!-- end of column2 -->
<div class="col-sm right_fl8d">
<h3><a href="https://devcenter.heroku.com/articles/heroku-cli#debian-ubuntu">Heroku CLI</a></h3>
<kbd>heroku --version</kbd><br>
<kbd>npm install -g heroku-cli</kbd><br>
<h3><a href="https://devcenter.heroku.com/articles/git">Deploying with Git</a></h3>
<kbd>heroku login</kbd><br>
<kbd>heroku create</kbd><br>
<kbd>git remote -v</kbd><br>
<kbd>heroku git:remote -a stark-spire-40922</kbd><br>
<kbd>git push heroku master</kbd><br><br>
<section class="text-center">
<a href="http://turtlewolfe.com">
<img src="favicon.ico" alt="favicon" height="16" width="16">
<img src="favicon.ico" alt="favicon" height="30" width="30">
<img src="favicon.ico" alt="favicon" height="42" width="42">
<img src="favicon.ico" alt="favicon" height="65" width="65">
<img src="favicon.ico" alt="favicon" height="42" width="42">
<img src="favicon.ico" alt="favicon" height="30" width="30">
<img src="favicon.ico" alt="favicon" height="16" width="16">
</a>
</section>
</div><!-- end of column3 -->
</div><!-- end of div class row -->
</div><!-- end of container div -->
<!-- !!!!!!!!!!!!!!!!!!!!!!!!THIS IS WHERE THE OVERLAP IS SEEN!!!!!!!!!!!!!!!!!!!!! -->
<script src="js/vendor/modernizr-{{MODERNIZR_VERSION}}.min.js"></script>
<script src="https://code.jquery.com/jquery-{{JQUERY_VERSION}}.min.js" integrity="{{JQUERY_SRI_HASH}}" crossorigin="anonymous"></script>
<script>
window.jQuery || document.write('<script src="js/vendor/jquery-{{JQUERY_VERSION}}.min.js"><\/script>');
</script>
<!-- Boot Strap 4 CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
</body>
</html>