I have a web site where the min-width is set to 767px until I can get around to making a purely mobile version.
However, when this is pinched in to view the entire 767 width, the height does not honor the 100%. It appears to stay at whatever height was set when zoomed out to 1.
Here is a screenshot:
It works fine on landscape, but not on portrait.
How do I fix this?
Edit: Here's a full html that shows the problem...
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0" />
<style>
html, body {
width: 100%;
min-width: 100%;
height: 100%;
min-height: 100%;
height: 100vh;
min-height: 100vh;
background: red;
padding: 0;
margin: 0;
}
#navbar {
background: blue;
min-width: 767px;
}
</style>
</head>
<body>
<div id="navbar">Test</div>
<div ng-view id="mainBody">Test</div>
</body>
</html>
add a meta tag for viewport
<meta name="viewport" content="height=device-height, initial-scale=1.0" />
you can use vh unit for full height:
#mydiv {
display:block;
height:100vh;
}
see units from css3 on w3schools
Related
I am trying to make space between my oval 'div' and the right wall (border) of my website with margin but it doesn't seem to work.What could be the problem? Here is the code:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<style>
div.oval1 {
width: 1460px;
margin: 80px 0px 30px 30px;
background-color: black;
opacity: 10%;
height: 600px;
border-radius: 1%;
}
</style>
<div class="oval1"> </div>
</body>
</html>
Link of the website: https://www.w3schools.com/code/tryit.asp?filename=GQYCSO6PHXZM
In order to see margin in the right side of an element at least one of the parent elements need to have a definite width.
The width of the parent should be larger than the sum of left side margin, element width and right margin.
Tt is same for the bottom margin, in that case parents height should be larger than the sum of top and bottom margin and element's height.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
width: 1520px;
}
div.oval1 {
width: 1460px;
margin: 80px 30px 30px 30px;
background-color: black;
opacity: 10%;
height: 600px;
border-radius: 1%;
}
</style>
</head>
<body>
<div class="oval1">
</body>
</html>
I have a doubt, I would like to scale the sides of my background image outside the visible width, so as to extend the background to the height that determined
To be more clear, I would like the browser to read only the width that I defined to be viewed, while the rest of the background would serve only to not leave the background spaghetti, my idea would be to extend the page down while the sides would serve only not to make the background ugly and disproportionate.
sorry my bad english.
CSS:
/* Main */
body{
margin: 0;
padding: 0;
}
.container{
position: absolute;
}
.main-logo h1{
position: inherit;
left: 0;
-webkit-text-stroke: 1.5px black;
font-size: 32px;
font-family: "8 BIT WONDER";
}
.background-img-main{
position: absolute;
width: 100%;
height: 1800px;
background-size: 0, 100%;
z-index: -100;
overflow: hidden !important;
}
HTML:
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Forbidden Series</title>
<link rel="stylesheet" href="assets/styles.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<body>
<!--Container-->
<div class="container">
<!--Header-->
<header>
<div class="main-logo"><h1><font color="#780002">Forbidden </font><font color="#FFFFFF">Series</font></h1></div>
</header>
</div>
<img src="img/Screenshot_1.png" class="background-img-main">
<img src="img/background.jpg" class="background-media-main">
<!--Scripts-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</body>
</html>
How I wish it were
set an height of 100% on your main container, and put and overflow:auto rule
.container{
position: absolute;
height:100%;
overflow:auto;
}
also, you want to set off the body and html overflow
body,html {
overflow:none;
}
I have a problem where there is a persistent bit of white space to the right of my row in a bootstrap site, despite the fact that I seem to have everything set to full width style (0 margin, container-fluid, etc.).
I started stripping elements off of my site to get it as simple as possible to see what the problem is. I'm now down to just the head content, a container-fluid, and a row, and yet the problem still persists.
html, body, .container-fluid {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.home {
width: 100%;
height: 100%;
background-image: url("../images/background3.jpeg");
padding-top: 10%;
padding-bottom: 10%;
background-size: cover;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!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">
<title>Modern Business - Start Bootstrap Template</title>
<link href="https://fonts.googleapis.com/css?family=Pathway+Gothic+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open Sans" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row home">
</div>
</div>
</body>
</html>
The pic below is what the site looks like. You can see the white space quite clearly (on the right, very small, like 5px or so).
The default margin for the row class is causing this
edit your css for .home class like this:
.home{
width:100%;
margin:0;
padding:0;
}
For any element, It is always a good idea to put margin:0;padding:0; the second you start to write its css. You can always add margins and paddings later as they fit but it wont cause you problems like this.
Add margin:0, to your .home class to override bootstrap default margin:
https://jsfiddle.net/yc6p7osk/1/
If you inspect .row - you will notice some default margins there.
Also, you could use another boostrap class for 100% width container, probably.
html, body, .container-fluid {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.home {
width: 100%;
height: 100%;
padding-top: 10%;
padding-bottom: 10%;
background-size: cover;
box-sizing: border-box;
}
When you use width and height 100%, the default is to add the borders and such to the width. Add box-sizing: border-box; and your block will be 100% regardless.
More info here: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
HTH.
I try to put a container on top of a background image. The content of this container will be images. Unfortunately I can't get the container stick to to background-image if I resize the browser window.
Is there way that a container always stays at the same place but also scales together with the background-image? Let's say the background-image is 1000x1000px and the container on top is 500x500. On a smaller browser the images scales down to lets say 500x500px. Now the container and its content should also scale down 50% but should stay at the same place.
This is what I have so far (it's just an example):
body, html { margin: 0; padding: 0; width: 100%; height: 100%; font-family: Arial, sans-sarif; font-size: 10px; }
#background_image {
background-image: url("http://ws2-media1.tchibo-content.de/newmedia/art_img/MAIN_ALT_3-IMPORTED/4113906f0b0eab32/regal-weiss.jpg");
max-width: 55.3em;
width: 100%;
max-height: 47.1em;
height: 100%;
background-size:contain;
background-repeat: no-repeat; }
#container { background-color: #FF0004; max-width: 5em; width: 100%; max-height: 5em; height: 100%; position: relative; left: 40%; top: 55%; }
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Unbenanntes Dokument</title>
<style>
</style>
</head>
<body>
<section id="background_image">
<div id="container"></div>
</section>
</body>
</html>
Thank you very much in advance.
What i would do is media queries
#media screen and (min-width: 480px) {
#background_image{
}
#container {
}
}
depending on what size of the screen is u need to position the #container and give the right width of the #background_image
This is where i learn
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
I am working on a SaaS application, which essentially provides a full webpage to the client. The client can access their page at: http://client.myapp.com . However I want to allow clients to embed this page easily on their website. At the moment I just provide an iframe embed code with stylesheet to reset the margin of the body tag.
<head>
<style type="text/css">
html { overflow: auto; }
html, body, div, iframe { margin: 0px; padding: 0px; height: 100%; border: none; }
iframe { display: block; width: 100%; border: none; overflow-y: auto; overflow-x: hidden; }
</style>
</head>
<body>
<iframe id="myapp" name="myapp" src="https://client.myapp.com" frameborder="0" marginheight="0" marginwidth="0" width="100%" height="100%" scrolling="auto"></iframe>
</body>
However when they include the iframe, the page is no longer responsive. How can I replicate the responsiveness of the original webpage when using an iframe (or any other way you might suggest) ?
So I found two solutions to the problem:
Solution 1:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>body { margin: 0px; } .embed-container { position: relative; padding-bottom: 100%; height: 0; overflow: hidden; max-width: 100%; min-height: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>
</head>
<body>
<div class='embed-container'><iframe src='https://client.myapp.com' style='border:0;'></iframe></div>
</body>
Solution 2:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
/* Using http://npr.github.io/responsiveiframe/ */
<script src="jquery.responsiveiframe.js"></script>
<script type='text/javascript'>
$(function() {
$('iframe').responsiveIframe({xdomain: '*'});
});
</script>
<style>
body {
margin: 0;
}
</style>
</head>
<body>
<iframe src='https://client.myapp.com' style='border:0; width: 100%; height: 100%;'></iframe>
</body>
So far it appears both work just fine on a desktop browser (Chrome, Firefox) and on my mobile (Android 4)
Add something like this
#media screen and (min-width: 768px) {
iframe{
min-width:768px;
}
}
#media screen and (min-width: 992px) {
iframe{
min-width:992px;
}
}
#media screen and (min-width: 1200px) {
iframe{
min-width:1200px;
}
}
to your css file.
These media queries causes the iframe width to match the containing screen width.
Ensure that you are using: <meta name="viewport" content="width=device-width, initial-scale=1.0"> in your iframes header.