I've written a basic HTML and CSS file using Bootstrap and it works fine on my work computer with Chrome version 27.0.1453.110, but when I try to open the file in Chrome on my personal Mac(don't know the Chrome version) it opens VERY slowly, and lags when scrolling(like almost doesn't scroll at all!). What could I have done wrong, or excluded from the coding? It's a simple test page, with a background image, nav bar, footer and some text.
/*
* Globals
*/
/* Links */
a,
a:focus,
a:hover {
color: #fff;
}
/* Custom default button */
.btn-default,
.btn-default:hover,
.btn-default:focus {
color: white;
font-size: 18px;
text-shadow: none; /* Prevent inheritence from `body` */
background-color: rgba(96,96,96.75);
border: 1px solid #fff;
}
/*
* Base structure
*/
html,
body {
height: 100%;
background: url(back1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
color: #fff;
text-align: center;
text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
display: table;
margin-top: -10px;
width: 100%;
height: 120%; /* For at least Firefox */
min-height: 100%;
-webkit-box-shadow: inset 0 0 400px rgba(0,0,0,.6);
box-shadow: inset 0 0 400px rgba(0,0,0,.6);
}
.site-wrapper-inner {
display: table-cell;
vertical-align: top;
}
.cover-container {
margin-right: auto;
margin-left: auto;
}
/* Padding for spacing */
.inner {
padding: 30px;
}
/*
* Header
*/
.masthead-brand {
color: white;
font-size: 30px;
margin-top: -15px;
margin-bottom: 50px;
}
.masthead-nav > li {
display: inline-block;
margin-bottom: 30px;
}
.masthead-nav > li + li {
margin-left: 20px;
}
.masthead-nav > li > a {
padding-right: 0;
padding-left: 0;
font-size: 16px;
font-weight: bold;
color: #B8B8B8; /* IE8 proofing */
color: rgba(184,184,184.4);
border-bottom: 2px solid transparent;
}
.masthead-nav > li > a:hover,
.masthead-nav > li > a:focus {
color: white;
background-color: transparent;
border-bottom-color: white;
border-bottom-color: rgba(255,255,255,1);
}
.masthead-nav > .active > a,
.masthead-nav > .active > a:hover,
.masthead-nav > .active > a:focus {
color: white;
border-bottom-color: rgba(255,255,255,1);
}
#media (min-width: 768px) {
.masthead-brand {
float: left;
}
.masthead-nav {
margin-top: -20px;
float: right;
}
}
/*
* Cover
*/
.cover {
color: black;
padding: 0 20px;
}
.cover .btn-lg {
border-radius: 4px;
padding: 10px 20px;
font-weight: bold;
}
.blockquote-reverse {
font-weight: bold;
color: white;
text-align: right;
}
.lead {
text-align: center;
}
/*
* Footer
*/
.mastfoot {
color: #999; /* IE8 proofing */
color: rgba(255,255,255,.5);
}
.mastfoot a {
text-decoration: none;
}
/*
* Affix and center
*/
#media (min-width: 768px) {
/* Pull out the header and footer */
.masthead {
position: fixed;
background: -webkit-linear-gradient(rgba(0,0,0,1), rgba(0,0,0,.9),rgba(0,0,0,.8),rgba(0,0,0,.8),rgba(54,54,54,.75), rgba(54,54,54,0)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(rgba(0,0,0,1), rgba(0,0,0,.9),rgba(0,0,0,.8),rgba(0,0,0,.8),rgba(54,54,54,.75), rgba(54,54,54,0)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(rgba(0,0,0,1), rgba(0,0,0,.9),rgba(0,0,0,.8),rgba(0,0,0,.8),rgba(54,54,54,.75), rgba(54,54,54,0)); /* For Firefox 3.6 to 15 */
background: linear-gradient(rgba(0,0,0,1), rgba(0,0,0,.9),rgba(0,0,0,.8),rgba(0,0,0,.8),rgba(54,54,54,.75), rgba(54,54,54,0)); /* Standard syntax */
top: 0;
left: 0;
}
.mastfoot {
bottom: 0;
}
/* Start the vertical centering */
.site-wrapper-inner {
vertical-align: middle;
}
/* Handle the widths */
.masthead,
.mastfoot,
.cover-container {
width: 100%; /* Must be percentage or pixels for horizontal alignment */
}
}
#media (min-width: 992px) {
.masthead,
.mastfoot,
.cover-container {
width: 100%;
}
}
<!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="">
<link rel="icon" href="../../favicon.ico">
<title>Cover Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="cover.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.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand">Pith and Prose</h3>
<nav>
<ul class="nav masthead-nav">
<li class="active">Home</li>
<li>About</li>
<li>Blog</li>
<li style="margin-right: 13px">Contact</li>
</ul>
</nav>
</div>
</div>
<div class="inner cover">
<div class="container"><div class="row"><div class="col-sm-12" style="display: table; padding-top: 200px; width: 104%; height: 750px; margin-left: -20px">
<h1 class="cover-heading">Landing page.</h1>
<p class="lead">This is where everyone will "land" when they come to your page. We can put a little introduction to the whole blog and everything.</p>
<br/><br/><br/><blockquote class="blockquote-reverse"><p>"The business of life is the aquisition of memories...in the end, that is all there is."</p><footer><cite>Unknown</cite></footer><br/><br/>
<p class="lead">
Learn more
</p>
</div></div></div>
<div class="container"><div class="row"><div class="col-sm-12" style="display: table; padding: 30px 30px 100px; background-color: rgba(0,0,0,.8); width: 98%; height: 500px; margin-left: -20px">
<h1 class="cover-heading" style="color: white; font-weight: bold;">Latest Post</h1>
<p class="lead" style="color: white; font-weight: bold;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum orci nec risus pulvinar, nec mattis ipsum accumsan.
Nam faucibus, velit sed laoreet aliquam, mi dolor vestibulum orci, rutrum volutpat libero libero in justo. Praesent tincidunt,
lorem pretium pharetra congue, dolor arcu fermentum nibh, non finibus nisi metus auctor nisi. Nulla bibendum urna a lacus auctor, sit amet
vulputate lacus finibus. Morbi vel felis sit amet odio condimentum ullamcorper ac in mauris. Proin vitae vestibulum felis, ac ornare sapien.
Praesent sit amet mi elementum, porta turpis quis, varius nisl. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse
commodo sed lectus id tempor. Vivamus ultrices ullamcorper augue vitae condimentum. Nulla gravida imperdiet molestie. Donec sed imperdiet
tellus. Nulla fringilla nunc vel ex fringilla semper.<br/><br/>Donec sit amet tincidunt dui. Suspendisse ex ex, luctus non imperdiet a, ornare
sed massa. Proin eget ultricies tellus. Quisque nec orci vel augue tristique tincidunt vel id ligula. Duis tincidunt placerat rhoncus. Aenean
eget ligula vel ligula hendrerit consequat. Suspendisse potenti. Aenean massa magna, volutpat sit amet ligula id, convallis fringilla ante.
Sed semper porttitor nisi, sit amet dignissim nulla lobortis a. Suspendisse hendrerit cursus sapien eu dignissim. Quisque pretium, nulla
ut malesuada luctus, enim sapien vulputate diam, efficitur maximus elit metus at lacus. Curabitur iaculis lobortis odio et porttitor. Sed
et congue ipsum.<br/><br/>Nulla ut dictum neque. Etiam placerat eros et mattis facilisis. Curabitur rutrum interdum est ornare suscipit. Nullam
mauris tortor, porta at cursus quis, finibus vel tortor. Nullam aliquam hendrerit nunc in tristique. Proin a leo risus. Maecenas interdum
pellentesque dui, rhoncus hendrerit massa scelerisque ut.<br/><br/>Nulla tempor congue tellus ac imperdiet. Ut facilisis erat eget porta bibendum.
Vivamus vitae nulla nec dolor laoreet finibus. Sed diam nibh, ornare nec maximus a, accumsan vitae diam. In convallis lobortis dolor a varius.
Sed a nisl in diam dapibus maximus ut sit amet mauris. Nulla tincidunt, nisl et dignissim mollis, sapien massa fermentum leo, volutpat porta
quam sem a erat. Pellentesque malesuada lectus sit amet dolor sollicitudin, vitae finibus magna molestie. Cras a ultrices libero. Etiam iaculis
sodales fringilla. Praesent commodo efficitur eros eu tincidunt. Ut ultricies aliquam tincidunt. Etiam feugiat elit in scelerisque vehicula.
Curabitur semper diam a erat finibus pretium.<br/><br/>Aenean sed est porttitor, bibendum lectus vehicula, facilisis lectus. Nam vehicula ligula
venenatis, lobortis lorem eu, fringilla nunc. Vestibulum ullamcorper sem vitae arcu suscipit iaculis. Etiam sodales nisl felis, nec tincidunt
arcu auctor nec. Sed suscipit hendrerit molestie. Vivamus finibus fermentum nunc non auctor. Mauris odio massa, dapibus quis fringilla in,
facilisis vel arcu. Nulla velit velit, tempor sit amet lacus quis, molestie condimentum sem. Vivamus a laoreet orci. Vestibulum dignissim ipsum
in quam placerat vulputate. Nullam malesuada et tortor vitae vestibulum. Aenean id mattis odio. Donec nec turpis lobortis, hendrerit nunc a,
vehicula odio. Pellentesque et ex ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</div></div></div>
</div>
<div class="mastfoot">
<div class="inner">
<p>Built and designed for Pith and Prose, by Paraclete.</p>
</div>
</div>
</div>
</div>
</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.11.2/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<script src="../../assets/js/docs.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
Box shadows take a long time to paint. It would probably be better to use a one-line image with background-repeat-y to get the inset shadow effect. That way Chrome knows it doesn't need to redraw the background and waste all that time calculating a huge area shadow effect. Alternately, the above link shows that just reducing the shadow blur radius can tremendously improve paint times.
Related
I am trying to make my website's navbar resize when the window is resized. My current code works fine until a point where the window width is too small and the navbar becomes two rows and looks bad. This is my code for the main part of my website.
What I would like it to do is switch from a horizontal navbar to a vertical navbar when the width is too small for everything (this would be mostly for mobile users) and I am not sure how to do that.
I would also like to make the navbar sticky and have tried some tutorials but cannot seem to get any to work on this website.
<!DOCTYPE html>
<html>
<link href="https://fonts.googleapis.com/css2?family=Flamenco:wght#300&display=swap" rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css">
<title>
Web_Title
</title>
<head>
<body>
<header>
<div class="container">
<img src="src" alt = "logo" class = "logo" width="150" height="50">
</div>
<nav>
<ul>
<li>Home</li>
<li>Video Archive</li>
<li>Text Archive</li>
<li>About</li>
</ul>
</nav>
</header>
</body>
</head>
</html>
My code for the css is below:
body {
margin: 0;
background: #222;
font-family: 'Flamenco', cursive;
font-weight: 900;
}
header {
background: #ffffff
}
header::after{
content:'';
display:table;
clear: both;
}
.logo{
float:left;
padding: 0px 0;
}
nav{
float: left;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding-top: 15px;
position: relative;
}
nav a {
color: #444;
text-decoration: none;
font-size: 18px;
}
nav a:hover{
color: rgb(20, 20, 38);
}
nav a::before{
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top:0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before{
width: 100%;
}
You can use #media in CSS to do this
body {
margin: 0;
background: #222;
font-family: 'Flamenco', cursive;
font-weight: 900;
}
header {
background: #ffffff
}
header::after{
content:'';
display:table;
clear: both;
}
.logo{
float:left;
padding: 0px 0;
width: 180px;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding-top: 15px;
position: relative;
}
nav a {
color: #444;
text-decoration: none;
font-size: 18px;
}
nav a:hover{
color: rgb(20, 20, 38);
}
nav a::before{
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top:0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before{
width: 100%;
}
nav{
float: left;
}
#media only screen and (max-width: 400px) { /* smaller screen*/
.logo {
width: 100%;
}
}
<!DOCTYPE html>
<html>
<link href="https://fonts.googleapis.com/css2?family=Flamenco:wght#300&display=swap" rel="stylesheet">
<title>
Web_Title
</title>
<head>
<body>
<header>
<div class="container">
<img src="src" alt = "logo" class = "logo">
</div>
<nav>
<ul>
<li>Home</li>
<li>Video Archive</li>
<li>Text Archive</li>
<li>About</li>
</ul>
</nav>
</header>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus magna et commodo faucibus. Ut viverra efficitur orci ut efficitur. Donec porta neque ac pretium lobortis. Maecenas gravida non tellus nec maximus. Pellentesque magna urna, rhoncus in lectus id, varius aliquet sapien. Maecenas augue purus, eleifend quis sagittis in, rhoncus sit amet dolor. Etiam sed quam sit amet tortor suscipit efficitur id eu ex. Ut eu odio hendrerit, eleifend massa in, malesuada quam. Duis cursus non est quis pretium. Sed tempus arcu sit amet erat aliquet, nec tincidunt lorem feugiat. Nunc nec ipsum consequat, maximus dolor sed, tempus risus. Aenean aliquet sem quis purus euismod, at sodales velit ullamcorper.
Pellentesque accumsan suscipit sem, ac ullamcorper libero cursus pretium. Aenean semper sodales tortor a finibus. Maecenas sit amet egestas tortor. Etiam molestie imperdiet maximus. Maecenas a lacus est. Pellentesque purus orci, rutrum ut vehicula at, fringilla eget ligula. Donec sem velit, commodo eu tincidunt id, accumsan sed leo.
Quisque at risus sit amet urna efficitur bibendum. Aliquam eu sagittis erat. Fusce finibus orci at nulla rutrum, quis laoreet purus congue. Aliquam aliquam fermentum erat vitae luctus. Sed vitae lacus finibus, lacinia risus quis, molestie eros. Vestibulum ullamcorper, lacus sit amet eleifend commodo, est tellus aliquam ante, et hendrerit ante velit sed libero. Praesent aliquet nisi semper pharetra suscipit. Aliquam fermentum a turpis eu congue. Integer nec arcu sed tellus dapibus pretium. Proin posuere urna turpis, volutpat sollicitudin sem sollicitudin eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Ut pharetra molestie nisl vitae feugiat. Nulla accumsan vulputate sagittis. Sed quis erat dictum, tempor leo nec, posuere velit. Duis consectetur metus sit amet odio bibendum egestas sed id arcu. Maecenas vehicula, justo non condimentum vestibulum, elit justo pharetra sapien, nec fermentum diam lorem ac felis. Morbi ut sem leo. Nunc ac ante quam. In hac habitasse platea dictumst. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam tempus ex velit, varius fringilla nisi semper ut. Etiam sed eleifend augue, ut mattis eros. Sed sodales libero ex, et molestie velit pellentesque nec. Morbi ac ligula quis dui dapibus ornare. Duis at est non nibh scelerisque cursus vel in massa. Suspendisse pretium, mi quis cursus varius, ipsum enim suscipit nibh, non sollicitudin est odio vitae est. Quisque bibendum vehicula nibh, vel accumsan purus lacinia eu.
Duis vel feugiat dolor, non dignissim arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed venenatis eget nibh et interdum. Aliquam erat volutpat. Quisque tempus justo augue, vitae pharetra magna ultrices ut. Quisque id scelerisque felis. Pellentesque sed elementum enim. Duis elementum sem sed neque malesuada, nec consectetur nulla finibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vestibulum massa eget arcu pharetra vulputate. Sed id nisl ac turpis tempus hendrerit ut in ligula. Ut imperdiet porta mauris, vitae fringilla augue auctor vel.
</p>
</body>
</head>
</html>
The #media CSS rule only adds the styling to the page if the rules in place are met. #media max-width: 400px only adds the styling if the width is under 400px wide.
Sticky positioning usually has issues like this and there are usually no fixes. You can probably use fixed position and add lots of padding to the top of the page so content doesn't get lost under the navbar.
I used Lorem Ipsum to simulate content so you can play around with fixed positioning.
I have noticed that you are using float to have your logo on the right and nav on the left and I advise you to use float because it make it easier when the screen is resizing.
Your code would be like:
header {
display: flex;
justify-content: space-between;
align-items: center;
}
The justify-content attribute will allow you to specify how the content inside header is going to be distributed and align-items: center allows you to align items center vertically.
The Vertical Navbar issue
Here you can use media queries to handle the problem.
If you do not know what media quires are it is a way to run css code for a specific width range of the device screen e.g for mobile only.
To implement this lets say for widht range below 400px see the example below:
#media (min-width){
/* specify your code here */
/* this is assuming you coded for mobile first*/
}
#media (max-width){
/* specify your code here*/
/ this is assuming you coded for desktop first*/
}
I recommend looking into Media Queries.
W3School tutorial for Media Queries
With #media, you can make changes to the styling when screen size changes. These are called breakpoints. You can for example say max-width, which applies when screen width is less than given amount and min-width, which applies when screen size is bigger than given amount.
For example, when screen size changes, we are changing the background color of the body:
/* This applies when screen size is more than 600px */
#media screen and (min-width: 600px) {
body {
background-color: red;
}
}
/* This only applies when screen size is less than 600px */
#media screen and (max-width: 600px) {
body {
background-color: yellow;
}
}
/* This only applies when screen size is less than 400px */
#media screen and (max-width: 400px) {
body {
background-color: green;
}
}
<h1>Change the size of the screen to see the effect</h1>
If you need help applying it to your code I will gladly help, but give it a try first =)
Hello I am trying to print a and I am using bootstrap to add some of style to the info inside the , the problem is that when I try to print the page bootstrap adds extra space, and I cannot remove or expand the , how can do it? Thanks.
The doted lines are the corners of the page.
Stiles:
#media print {
.page {
width: 100%;
float: none;
padding: 0 !important;
margin: 0 !important;
}
body {
line-height: 1.3;
color: #000;
width: 100%;
}
}
body {
background: rgb(255,255,255);
color: var(--darkgray) !important;
font-family: 'Roboto Condensed', sans-serif !important;
font-weight: 100 !important;
line-height: 1.3;
}
page {
background: white;
display: block;
margin: 0 auto;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
width: 21cm;
height: 29.7cm;
float: none;
page-break-after: always;
border: dotted 2px;
}
Page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<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>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#100;400&display=swap" rel="stylesheet"> </head>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght#0,300;0,700;1,400&display=swap" rel="stylesheet">
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet">
<script src="https://kit.fontawesome.com/25f01b61a0.js" crossorigin="anonymous"></script>
</head>
<body>
<page>
</page>
<page>
</page>
</body>
</html>
The problem is that when I use bootstrap:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
I get this:
But when I remove that line I get this:
And I want to print the enterly.
How can solve it?
Thanks.
It's a very tricky scenario. My answer is not a solution.
In relation to my code below, the problem is with scaling. If my .page div was imported into an <iframe> and then scaled using css transform, that would give the appearance of a A4 single page document (like a PDF). So as you scale down to mobile, .page would shrink down like an A4 previewed document.
But then you got other things to consider, multiple page overflow, print margins, web responsiveness... it's technical.
The safest bet it just use bootstraps standard .container class on a div and build your page content inside it. This way you can overflow onto two pages. Simply use bootstraps basic css classes for text, tables etc and you should be golden.
Bootstrap on its own handles this nicely. You can add an extra #media print style to remove the padding on .container. so your content fills the page.
Heres my experimental code below but this is not a good solution, it depends on exactly what you're trying to achieve.
Practicality is where I would steer towards.
BODY {
background: darkgray;
min-height: 100%;
padding: 30px;
}
.page {
height: 0;
padding-top: calc(100% / 8.27 * 11.65);
overflow: hidden;
background: #fff;
box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.3);
position: relative;
}
.page-inner {
position: absolute;
top: calc(100% / 11.65);
right: calc(100% / 8.27);
bottom: calc(100% / 11.65);
left: calc(100% / 8.27);
}
#media print {
BODY {
background: none;
padding: 0;
}
.container {
width: 100%;
padding: 0;
}
.page {
background: none;
box-shadow: none;
}
.page-inner {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<div class="container">
<div class="page">
<div class="page-inner">
<h1 class="display-4">Display test title for print</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec faucibus aliquet turpis, vel luctus sapien ullamcorper sed. Donec sit amet arcu ut urna tempus consectetur cursus porttitor justo. Vivamus vitae mollis nunc. Donec blandit euismod tristique.
Nam at sem non urna vehicula hendrerit non ac dui. Sed imperdiet lorem at nisi lacinia, in vehicula eros feugiat. Nulla vitae vulputate mauris, malesuada vulputate erat. Donec eleifend augue eros, at scelerisque ex suscipit in.</p>
<p>Donec bibendum purus nec fringilla hendrerit. Etiam commodo viverra lorem a hendrerit. Etiam venenatis ultrices ante venenatis facilisis. Nunc purus massa, tincidunt a sollicitudin quis, euismod nec ligula. Donec feugiat enim ac sapien sodales,
id vehicula diam pharetra. Fusce auctor quis risus pellentesque sagittis. Sed fermentum orci odio, et consectetur velit maximus at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus congue
ac erat eu vestibulum.</p>
<hr/>
<h2>Sub test title for print</h2>
<p>Mauris id turpis a nisi tempus ullamcorper. Mauris id pharetra ante, id consectetur erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas diam leo, facilisis tempus mauris nec, porttitor ultrices leo. Vestibulum vehicula ullamcorper
consequat. Maecenas viverra sollicitudin libero, ut faucibus metus tristique sed. Etiam purus magna, luctus non iaculis luctus, molestie nec justo. In molestie, lectus eget feugiat vehicula, nisi libero pulvinar justo, vitae hendrerit mi odio
a erat. In malesuada eros eu libero varius, sed convallis turpis rutrum. In eu tortor sed elit bibendum volutpat blandit eget ipsum. In varius ex fermentum nisi mattis, id vehicula purus efficitur.</p>
</div>
</div>
</div>
More specific I want the content section (the section with the white background) fill the mising space, so the header and footer have it's own fixed size and the content section is as big as it takes to fill/fit the full height.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Startseite - Malermeister Gen</title>
<link rel="stylesheet" href="css/index.css">
<script src="js/script.js"></script>
<link rel="shortcut icon" type="image/png" href="img/favicon.ico">
<meta http-equiv="Content-Language" content="de">
<meta http-equiv="last-modified" content="21.10.2018 08:22:20"> <!-- Edit: Nach Abschluss der Arbeit aktualisieren! -->
<meta charset="UTF-8">
<meta name="author" content="Til Jungbluth">
<meta name="description" content="Hier wird eine Beschreibung stehen..."> <!-- Edit: Beschreibung hinzufuegen! -->
<!-- <meta name="keywords" content="Malerorth, GmbH, Maler, Orth, Malermeister, Westerwald, Seck"> <!-- Edit: Ergaenzen! -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="wrapper">
<div id="headerWrapper">
<header id="header">
<img id="headerLogo" src="img/Logo Malerinnung.jpg" alt="">
<h1 id="headerHeading">Malermeister Gen</h1>
<p id="headerSlogan"><span id="gestaltung">Gestaltung</span> - <span id="schoenheit">Schöhnheit</span> - <span id="schutz">Schutz</span></p>
</header>
<nav id="headerNav">
Home
Unser Team
Kontakt
</nav>
</div>
<div id="contentWrapper">
<h2 id="contentHeading">Lorem ipsum dolor sit amet</h2>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In mattis ligula ac dui rhoncus finibus. Duis sit amet sollicitudin lorem, id interdum nisi. Curabitur tincidunt odio vitae elit hendrerit, sit amet pellentesque nibh faucibus. Ut in molestie lectus, sed faucibus dui. Phasellus auctor finibus erat, eget iaculis nunc euismod in. Suspendisse rhoncus erat volutpat neque varius, a sodales ante pharetra. Sed ullamcorper dictum eros non porta. Nulla viverra enim id odio eleifend, eu malesuada est mollis.</p>
<p>Phasellus nec egestas dolor, a blandit nibh. Fusce sit amet volutpat turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla bibendum nunc erat, et finibus erat scelerisque sed. Praesent eget dolor dolor. Praesent sit amet nisi est. Vivamus augue purus, dapibus vitae velit et, ultricies commodo diam. Proin in justo sed mi molestie malesuada a eget enim. Donec venenatis posuere nisi. Fusce felis metus, scelerisque ut lacus ut, hendrerit porta magna.</p>
<p>Nullam dictum varius mi sit amet gravida. Sed tortor metus, bibendum et sem quis, aliquet lacinia dolor. Suspendisse eu enim eget metus tristique laoreet sit amet vel ligula. Sed risus diam, elementum ac est a, mollis porta lacus. Nullam in erat elementum, venenatis purus et, iaculis odio. Aenean et orci viverra, aliquet elit vel, blandit ipsum. Aenean id velit id tellus faucibus pretium et eu ipsum. Fusce ac libero ultricies, vestibulum eros vel, aliquam lectus. Nullam est magna, vestibulum rutrum enim a, ultricies auctor ipsum. Nunc consectetur, sem at facilisis lacinia, nibh libero pulvinar elit, et convallis massa ligula in libero. Etiam finibus imperdiet odio vel tristique. Vestibulum ornare nibh at justo dictum accumsan. Donec non sapien risus. Suspendisse sed ante vitae neque sollicitudin posuere. Fusce mollis dapibus rutrum.</p>
<p>Etiam vel odio est. Nulla quis urna bibendum, tincidunt est id, laoreet nulla. Nunc consequat, ante at blandit rutrum, nisl odio vestibulum est, ut aliquam ligula ligula in nulla. Quisque rutrum, lorem in posuere fringilla, lorem libero bibendum metus, vel aliquet ex urna sed sem. Donec quis nisi arcu. Nunc magna odio, mollis auctor tortor nec, tincidunt ornare magna. Aenean sagittis enim et libero condimentum, at pellentesque risus hendrerit. Quisque eget purus in dui semper dignissim blandit non dui. Etiam mollis vehicula nulla lacinia pretium. Ut cursus, libero eu vehicula dapibus, massa nisi venenatis ex, nec fermentum mi lacus in leo. Nunc massa orci, vestibulum in pellentesque vitae, suscipit at augue. Vestibulum tempus arcu at fermentum aliquet. Duis feugiat, lacus eu accumsan viverra, eros nisi sodales libero, non pulvinar ante erat id lorem. Phasellus mauris orci, condimentum in eros non, aliquam egestas erat. Etiam neque libero, imperdiet vitae lobortis id, ultrices efficitur ante.</p>
</div>
</div>
<footer id="footer">
<p id="footerP">© Malermeister Gen GmbH |
Kontakt |
Impressum
</p>
<button onclick="topFunction()" id="scrollBackToTop" title="Go to top">Zum Seitenanfang</button>
</footer>
</div>
</body>
</html>
CSS:
body{
background: linear-gradient(to right, rgb(0, 51, 145) 0%, rgb(241, 185, 0) 50%, rgb(212, 24, 0) 100%);
margin: 0;
font-size: 14px;
}
#header{
height: 4.3em; /*Actual height is 4.1em. There was a space between #header and #headerNav, whyever...*/
margin: 0 0 -0.2em 0; /*In this way they overlap, so there's no unwanted space between.*/
padding: 0.6em;
background: darkgrey;
}
#headerLogo{
float: left;
height: 100%;
}
#headerHeading{
margin: 0 0 0 0.4em;
display: inline-block;
}
#headerSlogan{
display: block;
margin: 0.2em 0.2em 0 0;
float: right;
font-size: 1.25em;
}
#gestaltung{
color: rgb(0, 51, 145);
}
#schoenheit{
color: rgb(241, 185, 0);
}
#schutz{
color: rgb(212, 24, 0);
}
#headerNav{
height: 1.9em; /*Actual height is 1.7em. There was a space between #headerWrapper and #contentWrapper, whyever...*/
margin: 0 0 -0.2em 0;
padding: 0.5em 0 0.23em 0;
display: block;
text-align: center;
background: lightgrey;
}
.headerNavLinks{
margin: 0 0.4em;
padding: 0 0.6em;
text-decoration: none;
font-size: 1.25em;
border: 0.0625em solid black;
border-radius: 10%;
}
.headerNavLinks:hover{
background: black;
color: white;
}
#headerNavActive{
border: 0.0625em solid green;
border-radius: 10%;
}
#contentWrapper{
background: white;
padding: 0.6em;
}
#contentHeading{
margin: 0;
}
#content{
}
#content p:last-child{
margin: 1em 0 0 0;
}
#footer{
background: darkgrey;
padding: 0.6em;
}
#footerP{
margin: 0 0 0.4em 0;
text-align: center;
}
#scrollBackToTop{
background: lightgrey;
display: block;
margin: 0 auto;
}
#media only screen and (min-width: 480px){
body{
font-size: 15px;
}
}
#media only screen and (min-width: 545px){
body{
font-size: 16px;
}
#headerHeading{
margin: 0;
display: block;
}
#headerLogo{
margin: 0 0.8em 0 0;
}
}
#media only screen and (min-width: 650px){
body{
font-size: 17px;
}
}
#media only screen and (min-width: 768px){
body{
font-size: 18px;
}
#headerLogo{
margin: 0 1.2em 0 0;
}
#headerSlogan{
margin: 0.2em 0.2em 0 0;
}
}
#media only screen and (min-width: 1024px){
#wrapper{
width: 768px;
margin: auto;
}
}
#media only screen and (min-width: 1676px){ /* Just tried to make the content fit the height...*/
html{
max-height: 52.38em;
}
body{
max-height: 52.38em;
}
}
#media only screen and (min-width: 2560px){
#wrapper{
height: 100%;
}
}
body {
height: 100vh; //sets the height of the website to fit the screen.(even if the content is too less)
overflow-y:auto; // allows vertical scroll if the content is more.
}
I am in the process of building a website for a customer. MY problem is with one page. Whenever the page goes to a different sized viewing window the entire page breaks. I have already set a viewpoint, and even tried switching all of my pixel values, to show percents of the page. None of this however has fixed my problem. Below is my code for the broken web page. I have tried using the div tag to try and create spacing, yet it never works, no matter what I try I can't get it to view properly on other viewing platforms. This includes mobile and when the browser is not in full screen.
HTML:
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Us</title>
<script type="text/javascript" src="mainjs.js"></script>
<link rel="stylesheet" href="maincss.css">
<link rel="shortcut icon" href="tb.jpg">
</head>
<header>
<center>
<img src="FIMM USA Columbus.jpg" class="logo">
<p><em><strong>About Us</strong></em></p>
</center>
</header>
<body>
<hr class="yellowb">
<table style="width:100%;">
<th>Home</th>
<th>Products</th>
<th>About Us</th>
</table>
<hr class="yellowb1">
<div class="round">
<center><h3>Important Name Here</h3></center>
<p class="white2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum non nulla non tempor. Praesent quam augue, finibus eu nibh vitae, rutrum pellentesque dui. Nam orci dolor, euismod sit amet arcu in, fringilla aliquet est. Aliquam rhoncus et nibh a lobortis. Phasellus tempus tincidunt turpis, at sollicitudin risus dapibus id. Donec accumsan sem blandit ex faucibus, in aliquam metus molestie. Etiam ac metus risus. Phasellus vitae semper est. Pellentesque sed accumsan neque. Duis mattis euismod ante ac sollicitudin. Duis quis leo nec velit mattis volutpat vel quis dui. Vestibulum pretium felis massa, ac pretium nisi congue iaculis. Nunc at dolor consectetur, molestie odio vitae, tempus odio. Fusce erat nulla, facilisis id sodales nec, mattis et orci. Nam et tortor est.</p>
</div>
<div style="float:left;"><img src="gray.jpg"></div>
<div class="round">
<center><h3>Important Name Here</h3></center>
<p class="white2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum non nulla non tempor. Praesent quam augue, finibus eu nibh vitae, rutrum pellentesque dui. Nam orci dolor, euismod sit amet arcu in, fringilla aliquet est. Aliquam rhoncus et nibh a lobortis. Phasellus tempus tincidunt turpis, at sollicitudin risus dapibus id. Donec accumsan sem blandit ex faucibus, in aliquam metus molestie. Etiam ac metus risus. Phasellus vitae semper est. Pellentesque sed accumsan neque. Duis mattis euismod ante ac sollicitudin. Duis quis leo nec velit mattis volutpat vel quis dui. Vestibulum pretium felis massa, ac pretium nisi congue iaculis. Nunc at dolor consectetur, molestie odio vitae, tempus odio. Fusce erat nulla, facilisis id sodales nec, mattis et orci. Nam et tortor est.</p>
</div>
<div style="float:left;"><img src="gray.jpg"></div>
<div class="round">
<center><h3>Important Name Here</h3></center>
<p class="white2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum non nulla non tempor. Praesent quam augue, finibus eu nibh vitae, rutrum pellentesque dui. Nam orci dolor, euismod sit amet arcu in, fringilla aliquet est. Aliquam rhoncus et nibh a lobortis. Phasellus tempus tincidunt turpis, at sollicitudin risus dapibus id. Donec accumsan sem blandit ex faucibus, in aliquam metus molestie. Etiam ac metus risus. Phasellus vitae semper est. Pellentesque sed accumsan neque. Duis mattis euismod ante ac sollicitudin. Duis quis leo nec velit mattis volutpat vel quis dui. Vestibulum pretium felis massa, ac pretium nisi congue iaculis. Nunc at dolor consectetur, molestie odio vitae, tempus odio. Fusce erat nulla, facilisis id sodales nec, mattis et orci. Nam et tortor est.</p>
</div>
<div style="float:left;"><img src="gray.jpg"></div>
</body>
<footer>
</footer>
</html>
CSS:
body {
background-color: #0d0d0d;
color: yellow;
font-family: arial;
height: 100%;
padding-left: 15%;
padding-right: 15%;
}
.logo {
height: 25%;
width: 25%;
}
.yellowb {
background-color: yellow;
height: 10px;
width: 100%;
border: none;
}
.yellowb1 {
background-color: yellow;
height: 6px;
width: 100%;
border: none;
}
button {
background-color: yellow;
color: black;
height: 40px;
width: 70px;
}
a.button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
text-decoration: none;
height: 20px;
width: 80px;
background-color: yellow;
color: black;
}
.buildt {
height: 15%;
width: 50%;
}
.rightdiv {
float: right;
width: 65%;
height: 40%;
text-decoration: outline 3px solid yellow;
}
.largery {
font-size: 30px;
color: yellow;
font-family: Arial;
}
.white {
color: white;
font-size: 20px;
text-indent: 50px;
}
.product {
height: 90%;
width: 90%;
}
.rline {
border-left: none;
border-right: 8px solid yellow;
border-top: none;
border-bottom: none;
width: 34%;
height: 40%;
float: left;
}
.ltext {
width: 100%;
height: 40.5%;
}
.white1 {
color: white;
font-family: arial;
font-size: 20px;
text-align: center;
vertical-align: center;
text-indent: 45px;
}
.white2 {
color: white;
font-family: arial;
font-size: 14px;
text-align: center;
vertical-align: center;
text-indent: 45px;
}
.scale {
width: 100%;
height: 100%;
}
.div1 {
border: 5px solid yellow;
padding: 15px;
}
.left {
padding-left: 10px;
width: 20%;
}
.right {
padding-right: 10px;
width: 20%;
}
.middle {
width: 55%;
}
.round {
border-radius: 15px;
border: 5px solid yellow;
width: 75%;
height: 15%;
float: right;
}
.round1 {
border-radius: 15px;
border: 5px solid yellow;
width: 100%;
height: 40%;
}
.oh {
width: 100%;
height: 100%
}
It's not a good idea to rely on viewports alone to render a page. You should be adding media queries to your code. https://www.w3schools.com/css/css3_mediaqueries.asp
Also, when putting that code in jsfiddle.net, nothing is "breaking" per see. It just looks like it's not mobile responsive.
css
/*
jQuery Coda-Slider v2.0 - http://www.ndoherty.biz/coda-slider
Copyright (c) 2009 Niall Doherty
This plugin available for use in all personal or commercial projects under both MIT and GPL licenses.
*/
/* Insignificant stuff, for demo purposes */
body { padding: 20px }
.panel h2.title { margin-bottom: 10px }
noscript div { background: #ccc; border: 1px solid #fff; margin: 20px 0; padding: 15px }
/* Most common stuff you'll need to change */
.coda-slider-wrapper { padding: 20px 0 }
.coda-slider {}
/* Use this to keep the slider content contained in a box even when JavaScript is disabled */
.coda-slider-no-js .coda-slider { height: 100%; overflow: auto !important; padding-right: 20px }
/* Change the width of the entire slider (without dynamic arrows) */
.coda-slider, .coda-slider .panel { width: 100% }
/* Change margin and width of the slider (with dynamic arrows) */
.coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel { width: 100% }
.coda-slider-wrapper.arrows .coda-slider { margin: 0 10px }
/* Arrow styling */
.coda-nav-left a, .coda-nav-right a { background: #000; color: #fff; padding: 5px; width: 100px }
/* Tab nav */
.coda-nav ul li a.current { background: #39c }
/* Panel padding */
.coda-slider .panel-wrapper { padding: 20px }
/* Preloader */
.coda-slider p.loading { padding: 100px; text-align: center }
/* Don't change anything below here unless you know what you're doing */
/* Tabbed nav */
.coda-nav ul { clear: both; display: block; margin: auto; overflow: hidden }
.coda-nav ul li { display: inline }
.coda-nav ul li a { background: #000; color: #fff; display: block; float: left; margin-right: 1px; padding: 3px 6px; text-decoration: none }
/* Miscellaneous */
.coda-slider-wrapper { clear: both; overflow: auto }
.coda-slider { float: left; overflow: hidden; position: relative }
.coda-slider .panel { display: block; float: left }
.coda-slider .panel-container { position: relative }
.coda-nav-left, .coda-nav-right { float: left }
.coda-nav-left a, .coda-nav-right a { display: block; text-align: center; text-decoration: none }
and the html
<div>
<p>Unfortunately your browser does not hava JavaScript capabilities which are required to exploit full functionality of our site. This could be the result of two possible scenarios:</p>
<ol>
<li>You are using an old web browser, in which case you should upgrade it to a newer version. We recommend the latest version of Firefox.</li>
<li>You have disabled JavaScript in you browser, in which case you will have to enable it to properly use our site. Learn how to enable JavaScript.</li>
</ol>
</div>
</noscript>
<div class="coda-slider-wrapper">
<div class="coda-slider preload" id="coda-slider-1">
<div class="panel">
<div class="panel-wrapper">
<h2 class="title">Panel 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
</div>
</div>
<div class="panel">
<div class="panel-wrapper">
<h2 class="title">Panel 2</h2>
<p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
</div>
</div>
<div class="panel">
<div class="panel-wrapper">
<h2 class="title">Panel 3</h2>
<p>Cras luctus fringilla odio vel hendrerit. Cras pulvinar auctor sollicitudin. Sed lacus quam, sodales sit amet feugiat sit amet, viverra nec augue. Sed enim ipsum, malesuada quis blandit vel, posuere eget erat. Sed a arcu justo. Integer ultricies, nunc at lobortis facilisis, ligula lacus vestibulum quam, id tincidunt sapien arcu in velit. Vestibulum consequat augue et turpis condimentum mollis sed vitae metus. Morbi leo libero, tincidunt lobortis fermentum eget, rhoncus vel sem. Morbi varius viverra velit vel tempus. Morbi enim turpis, facilisis vel volutpat at, condimentum quis erat. Morbi auctor rutrum libero sed placerat. Etiam ipsum velit, eleifend in vehicula eu, tristique a ipsum. Donec vitae quam vel diam iaculis bibendum eget ut diam. Fusce quis interdum diam. Ut urna justo, dapibus a tempus sit amet, bibendum at lectus. Sed venenatis molestie commodo.</p>
</div>
</div>
<div class="panel">
<div class="panel-wrapper">
<h2 class="title">Panel 4</h2>
<p>Nulla ultricies ornare erat, a rutrum lacus varius nec. Pellentesque vehicula lobortis dignissim. Ut scelerisque auctor eros sed porttitor. Nullam pulvinar ultrices malesuada. Quisque lobortis bibendum nisi et condimentum. Mauris quis erat vel dui lobortis dignissim.</p>
</div>
</div>
</div><!-- .coda-slider -->
</div><!-- .coda-slider-wrapper -->
When I insert percentage widths, like:
.coda-slider-no-js .coda-slider { height: 100%; overflow: auto !important; padding-right: 20px }
/* Change the width of the entire slider (without dynamic arrows) */
.coda-slider, .coda-slider .panel { width: 100% }
/* Change margin and width of the slider (with dynamic arrows) */
.coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel { width: 100% }
in an attempt to get the slider to fill 100% browser width and 100% browser height, The slider itself fills the browser window, but instead of each <div class="panel"> representing another page of the slider, the divs all display on the first page of the sider, one above the other, and their content trails off into the second and third pages of the slider. Like this:
Can someone please help me to get each div content to display properly in its window of the slider while letting the slider fill 100% width and 100% browser height? Thanks
If you look in the Javascript (jquery.coda-slider-2.0.js), panelWidth is set in line 53:
var panelWidth = slider.find(".panel").width();
then used to calculate various settings. Because these calculations expect an integer, they won't work with a percentage. This issue (and people's attempts to fix it) can be seen on Niall Doherty's forum.
However, the tutorial Build a Content Slider with jQuery allows for percentage widths, and just might do what you want...