I currently have an issue with my page, where the contents of the page are not filling 100% of the screen. (Laravel 4.2)
See Image
My code is as follows
master.blade.php
HTML/Javscript code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Timetable</title>
<link rel="icon" href="/images/calander.ico">
<script src="/scripts/jquery-3.1.1.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="/scripts/main.js" type="text/javascript"></script>
<script src="/scripts/jquery-ui.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="/styles/default.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container script" style="display:none">
#include('layouts.banner')
#include('layouts.navigation')
<div class="content">
dasda
#include('layouts.messages')
#yield('content')
</div>
</div>
</body>
#yield('modal')
#yield('javascript')
<script type="text/javascript" id="cookiebanner" src="http://cookiebanner.eu/js/cookiebanner.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.script').attr('style', 'block');
});
</script>
</html>
CSS Code:
html {
overflow-x:hidden;
height:100%;
}
.navigation {
width:150px;
}
.container {
width:100%;
height:100%;
}
.content {
background-color:#000000;
top:-100px;
width:100%;
height:100%;
}
body {
background: #F0EDED;
}
I cannot figure out what the issue is. If anybody has any suggestions that would be appreciated
Try deleting default margins and paddings by adding this to css:
*{
maring:0;
padding:0;
}
And also for calculating width use vw units:
width:100vw;
Try to change the css for body tag in this way:
body {
margin: 0;
padding: 0;
background: #F0EDED;
height: 100%;
}
you cant use
html {
overflow-x:hidden;
height:100%;
}
use:
astrick (*) insted of html
html {
height: 100%;
}
body {
min-height: 100%;
}
Related
I am using wordpress and I have a Iframe with a leaflet map inside it. But on the left there is a lot of white space. And I want that the leaflet map will cover the full widht. So this is the code of the iframe:
<!DOCTYPE html>
<html>
<html lang="en-us">
<head>
<title>GeoVerdeling</title>
<meta charset="UTF-8">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="description" content="Show geometric distribution">
<meta name="author" content="Victor Bom">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src=
"https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src=
"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"/>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet#1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
<style>
#peMap {height:1000px;
width: 100%;
background: rgba(76, 175, 80, 0.0);
border:5px double #000000}
div { margin-left:auto;
margin-right:auto;}
.center { margin-left: auto; margin-right: auto; }
</style>
<script>
$(function()
{
var dlist=[
["aa en hunze",53.0104848,6.7495285,1320.00,7],
];
var maxBounds=[
[50.800,3.259], //Southwest
[53.565,7.335]]; //Northeast
var peMapOptios={'maxBounds':maxBounds, 'zoomSnap':0, 'zoomDelta': 0.5,
'wheelPxPerZoomLevel':120, 'minZoom':7.5, 'maxZoom':11};
var circleOptions={color:'red', fillColor:'#f03', fillOpacity:0.5};
var peMap=L.map('peMap',peMapOptios).setView([52.2,5.3],7.7);
L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png',
{attribution:'© OpenStreetMap'}).addTo(peMap);
L.control.scale().addTo(peMap);
var i;
for ( i=0;i<(dlist.length);i++ )
{ circle=L.circle([dlist[i][1],dlist[i][2]],dlist[i][3],circleOptions).addTo(peMap);
circle.bindPopup(dlist[i][0]+":"+String(dlist[i][4]));
};
});
</script>
</head>
<body>
<h3 style="text-align:center">Deelnemers per: 2022-05-27 </h3>
<div id="peMap"></div>
<br>
<p> Geregistreerde deelnemers: 3984, Bekende gemeenten: 331, Deelnemers toegekend aan gemeenten: 3161</p>
</body>
</html>
and this is how it looks like now:
So you see on the left there is a lot of space. And of course on a mobile phone it has to be rendering also correct.
So what I have to change?
Thank you
if I do it like this:
<style>
html, body
{
margin: 0px; padding: 0px
}
#peMap {height:1000px;
width: 100%;
background: rgba(76, 175, 80, 0.0);
div { margin-left:auto;
margin-right:auto;}
.center { margin-left: auto; margin-right: auto; }
</style>
<script>
still on the left a lot of white space. Even on mobile
There isn't anything wrong with the code you've written. This just has to do with the interesting world of web development, where most browsers have a default stylesheet attached to web pages.
In your case, it has to do with the <body></body> element having a default margin: 8px. You'll simply need to override this with body { margin: 0px; }.
Here's some fun reading and discussion about this.
Just deleted all the code to be easier to solve it maybe. The body background color is only applied to the elements but not the entire page.
body {
margin: 0;
background: blueviolet;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The 2021 Frontend Developer Crash Course</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<h1>mdada</h1>
</body>
</html>
Add body height or min-height
body {
margin: 0;
min-height:100vh;
background: blueviolet;
}
<body>
<h1>mdada</h1>
</body>
I am trying to make a site, using a background image:
(CSS)
body {
text-align: center;
background-image: url("../img/clouds.jpg");
background-size: 100% 760%;
}
and I also have on the top of the page this:
(HTML)
<div class="pageTitle">
<p>Title of Page basically</p>
</div>
(CSS)
.pageTitle {
font-size: 200%;
}
When I try to make the font-size bigger, the background image grows as well (looks like it's zoomed in, basically).
I suppose this has to do with the usage of percentages, but even when using em notation or px I still get the same result.
How can I make the pageTitle bigger without altering my background image's size?
What seems to make it work is altering the background-size: 100% 760%; to background-size: 100% 250%; (in my case), but still, whenever an element is altered it needs fixing as a whole.
Code Snippet:
var currentQuote = '';
var availableQuotes = [ 'bla','blo','ble','foo','bar'
];
function setRandomQuote() {
currentQuote = availableQuotes[Math.floor(Math.random() * availableQuotes.length)];
$('#quote').html(currentQuote);
$('#tweetQuote').attr('href', 'https://twitter.com/intent/tweet?text=' + currentQuote).attr('target', '_blank');
}
$(function () {
$('#randomQuote').click(function () {
setRandomQuote();
});
});
.w3-tangerine {
font-family: 'Tangerine', serif;
font-size: 200%;
margin-top: 10%;
margin-bottom: 5%;
}
body {
text-align: center;
background-image: url("https://images.pexels.com/photos/850674/pexels-photo-850674.jpeg?cs=srgb&dl=agriculture-animal-photography-animals-850674.jpg&fm=jpg");
background-size: 100% 250%;
}
p {
font-size: 100%;
}
#randomQuote, #tweetQuote {
margin: 3% 1% 3% 1%;
}
#quote {
margin: 2% 2% 2% 2%;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Random Quote Generator</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<noscript>Sorry, your browser does not support JavaScript!</noscript>
</head>
<body>
<div class="w3-tangerine">
<p>Just Another Random Quote Generator</p>
</div>
<div id="quote">
Click on the button to generate a quote!
</div>
<div>
<input id="randomQuote" type="button" class="btn btn-primary" value="Generate a Quote!">
<a id="tweetQuote" class="btn btn-primary" href="#">Tweet this Quote <i class="fa fa-twitter"></i></a>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
without set the height of a body the precent of height of the background is as a height of a contant. so 760% background-height is text-height*7.6. it is why when you change the size of the image the size of the image grow too.. what you can do is set
html, body{
height:100%;
}
and then it wil calculate precent of the whole page size (so in your case you will see only 1/7.6 of the height of the image).
There's an article, which describes the exact problem, that you have.
One of the solutions is to provide the following attribute to body. This will ensure everywhere is covered:
body {
...
background-size: cover;
}
var currentQuote = '';
var availableQuotes = [ 'bla','blo','ble','foo','bar'
];
function setRandomQuote() {
currentQuote = availableQuotes[Math.floor(Math.random() * availableQuotes.length)];
$('#quote').html(currentQuote);
$('#tweetQuote').attr('href', 'https://twitter.com/intent/tweet?text=' + currentQuote).attr('target', '_blank');
}
$(function () {
$('#randomQuote').click(function () {
setRandomQuote();
});
});
.w3-tangerine {
font-family: 'Tangerine', serif;
font-size: 200%;
margin-top: 10%;
margin-bottom: 5%;
}
html, body {
height: 100%;
}
body {
text-align: center;
background-image: url("https://images.pexels.com/photos/850674/pexels-photo-850674.jpeg?cs=srgb&dl=agriculture-animal-photography-animals-850674.jpg&fm=jpg");
background-size: cover;
}
p {
font-size: 100%;
}
#randomQuote, #tweetQuote {
margin: 3% 1% 3% 1%;
}
#quote {
margin: 2% 2% 2% 2%;
}
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Random Quote Generator</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<noscript>Sorry, your browser does not support JavaScript!</noscript>
</head>
<body>
<div class="w3-tangerine">
<p>Just Another Random Quote Generator</p>
</div>
<div id="quote">
Click on the button to generate a quote!
</div>
<div>
<input id="randomQuote" type="button" class="btn btn-primary" value="Generate a Quote!">
<a id="tweetQuote" class="btn btn-primary" href="#">Tweet this Quote <i class="fa fa-twitter"></i></a>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
I am trying to add a custom font in CSS but it does not work.
My HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Shout!</title>
<meta name="author" content="Jordan Baron">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div>
<img src=images/logo.png alt="logo" height="54" wdth="133" class="logo">
<hr class="divider">
<h1 id="wis">Shout!</h1>
</div>
<script src="scripts.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script>
</body>
</html>
My CSS:
#font-face {
font-family: SanFran;
src: url(SF-UI-Display-Thin.otf);
}
div {
text-align: center;
}
.divider {
margin: 0;
padding: 5px;
}
.logo {
margin: 0;
padding: 5px;
}
.wis {
font-family: SanFran;
}
I am using Bootstrap 3 on Mac OS X. I am using Chrome.
The font changes when I don't use Bootstrap but when I do use Bootstrap the font doesn't change
It won't change because you're using an ID on your <h1> but you're trying to target a class of .wis instead of an ID of #wis.
Try changing
.wis {
font-family: SanFran;
}
to
#wis {
font-family: SanFran;
}
<!doctype html>
<html>
<head>
<title>Game</title>
<style media="screen" type="text/css">
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#canvas {
position: absolute;
}
</style>
<!-- <meta charset="utf-8" content="width=device-width, initial-scale=1.0"> -->
<!-- <meta charset="utf-8"> -->
<!-- <meta charset="utf-8" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> -->
</head>
<body>
<canvas id="canvas">
Your browser needs to support canvas to play this game!
</canvas>
<!-- Include libraries -->
<script type="text/javascript" src="js/pentagine/build/pentagine.js"></script>
<script type="text/javascript" src="js/cp.min.js"></script>
<!-- Include game classes -->
<script type="text/javascript" src="js/MenuState.js"></script>
<script type="text/javascript" src="js/Block.js"></script>
<script type="text/javascript" src="js/Constants.js"></script>
<script type="text/javascript" src="js/Utils.js"></script>
<script type="text/javascript" src="js/ScoreState.js"></script>
<script type="text/javascript" src="js/PlayState.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
The relevant lines are the CSS and these ones:
<!-- <meta charset="utf-8" content="width=device-width, initial-scale=1.0"> -->
<!-- <meta charset="utf-8"> -->
<!-- <meta charset="utf-8" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> -->
I want to make my Canvas occupy as much screen as there is to occupy. I want my canvas to be full screen and this used to be working fine both on Firefox, Chromium and Firefox OS, but now it doesn't seem to be working on any. I need help with figuring out the CSS and content="" tags to make the canvas (and therefore canvas's context.width and context.height occupy as much space as there is.
Fiddle: http://jsfiddle.net/AwLwF/
CSS:
body {
position:relative;
}
canvas {
position:absolute;
left:0;
top:0;
}
JS:
$("canvas").width($(document).width());
$("canvas").height($(document).height());
var ctx = document.getElementById("canvas-element").getContext("2d");
function draw() {
//draw here
ctx.fillStyle="blue";
ctx.fillRect(0,0,200,100);
requestAnimationFrame(draw);
}
draw();
BUT there is little problem. Aspect Ratio. Strange resolutions will destroy scale of drawn elements.
That should make the canvas full screen in CSS (not tested, but works for divs so you should be fine with canvas too):
canvas {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
width: auto;
height: auto;
}
In javascript you could read the window/document width/height and add it to the canvas to calculate with it. Like this in jQuery:
$(document).height();
$(document).width();
And like this without jQuery:
document.width;
document.height;
I really hope that'll be a help for you.