hi i have a problem with my google form format in my site that need to work with a resolution of 1280x800 , i´m using chrome console to see the resolution but the form height is creating a scroll bar at the side and i want to fit it to my resolution is any solution or fix?? it need to fit the 1280x800 format .txs
html, body {
margin: 0;
padding: 0;
overflow: hidden;
}
html, body, .main, .main iframe {
margin: 0;
width: 100%;
height: 100%;
}
.main iframe {
border: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="main">
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSd4pzJ9kRydc-UVkEkm9xKDZjF0S3Earn-Wjcbh8FEAlYnkXA/viewform?embedded=true" frameborder="0" marginheight="0">Loading...</iframe>
</div>
</body>
</html>
Related
There are a lot of similar questions already asked. But I still couldn't figure out the problem.
When viewing the site on mobile there is this unwanted white space, desktop version does not have this problem.
Somehow, the unwanted white space is only present when width of website is greater than viewport(again, only on mobile).
The code is below.
*, *::after, *::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
border: 2px dashed rebeccapurple;
}
html,
body {
min-height: 100vh;
width: fit-content;
}
.myDiv {
height: 2000px;
width: 2000px;
border: 2px dashed tomato;
margin: 25px;
}
<!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.0">
<title>Document</title>
</head>
<body>
<div class="myDiv"></div>
</body>
</html>
Try set .div1 width to 1000px on style
I am developing a widget which could be embedded into the page as an iframe (iframe will be injected and styled via javascript). Iframe should be placed in bottom right corner. I can only control the style of an iframe.
I have created following demo page which demonstrates the problem in test host page:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Hello world!</title>
<meta name="viewport" content="width=device-width"/>
</head>
<body>
<p id="greeting" style="width:1000px">Loading...</p>
<iframe src="http://www.w3schools.com" style="position: fixed; bottom: 5%; width: 200px; height: 200px; background: transparent; border: 0px none; overflow: hidden; z-index: 1000000;right: 5%;"></iframe>
</body>
</html>
On desktop browser this code works fine, but on (some) mobile devices the iframe is not visible on the screen. If I try to highlight an element its placed on gray area.
Why is happening this and how can I style an iframe so that will be placed on bottom right corner?
Edit: this is a screenshot from Galaxy S3 emulation (Chrome). Iframe is invisible in gray area. I think its the same on physical Nexus 5X device.
Many thanks!
1000px width had been given to #greeting , that's why the element out of your mobile width ,you can simply fix this like using media Queries. 992 width starting the portrait view of devices
#media (max-width:992px){
#greeting { width:100% !important; }
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Hello world!</title>
<meta name="viewport" content="width=device-width"/>
</head>
<body>
<p id="greeting" style="width:1000px">Loading...</p>
<iframe src="http://www.w3schools.com" style="position: fixed; bottom: 5%; width: 200px; height: 200px; background: transparent; border: 0px none; overflow: hidden; z-index: 1000000;right: 5%;"></iframe>
</body>
</html>
Based from my investigation, the gray area that shows up in the chrome emulator is caused by the style of the paragraph html tag:
`<p id="greeting" style="width:1000px">Loading...</p>`
I believe the gray area shows up because you have a style of width:1000px in where the total size of the emulator, Galaxy S3 for example, only have a maximum width of 360px. But if you remove the width: 1000px style in the paragraph element, you can see that the frame is being properly shown in the bottom right corner of the screen.
You can check it with the sample below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Hello world!</title>
<meta name="viewport" content="width=device-width"/>
</head>
<body>
<p id="greeting" style="width: 100px">Loading...</p>
<iframe src="http://www.w3schools.com" style="position: fixed; bottom: 5%; width: 200px; height: 200px; background: transparent; border: 0px none; overflow: hidden; z-index: 1000000;right: 5%;"></iframe>
</body>
</html>
I didn't try this, but what if -- instead of setting the position as `bottom: 5%; right: 5% -- you calculate the position from the top left based on viewport width and viewport height. Something like:
top: calc(100vh - 200px);
left: calc(100vw - 200px);
See THIS DEMO IN YOUR MOBILE
Change:-
add following style to handle mobile browser
Reason:-
The mobile renders the html in mobile compatible mode which injects its own style to the higher width elements. thats why the page works in an unintended way in mobile compatible mode. if you handle it in your html itself, then it leaves the style of your page how you intended to view.
Thats why if you click Request desktop site in chrome setting your code itself works fine
/* mobile phone */
#media all and (max-width: 768px) {
#greeting {
width:100% !important;
}
}
<html>
<head>
<meta charset="UTF-8"/>
<title>Hello world!</title>
<meta name="viewport" content="width=device-width"/>
<style>
/* mobile phone */
#media all and (max-width: 768px) {
#greeting {
width:100% !important;
}
}
</style>
</head>
<body>
<p id="greeting" style="width:1000px">Loading...</p>
<iframe src="http://www.w3schools.com" style="position: fixed; bottom: 5%; width: 200px;
height: 200px; background: tranparent; border: 0px none; overflow: hidden; z-index: 1000000;right:
5%;"></iframe>
</body>
</html>
I am trying create a simple single page site that works on mobile. Ideally, I'd like each section of the site to be 100% of the browser height. This is the page:
http://codepen.io/juanp83/pen/EgjBwK
and here's the code:
body, html {
height: 100%;
width: 100%;
}
.section {
height: 100%;
position: relative;
}
.one, .three {
background-color: #666;
}
.two {
background-color: #222;
}
.bottom {
position: absolute;
bottom: 20px;
right: 0px;
left: 0px;
}
p {
color: #fff;
text-align: center;
}
.nav {
position: fixed;
top: 0px;
height: 50px;
width: 100%;
background-color: #fff;
z-index: 1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<!--nav-->
<div class="nav"></div>
<!--Section1-->
<div class="section one">
<div class ="bottom"><p>By Juan Portillo</p></div>
</div>
<!--Section2-->
<div class="section two">
</div>
<!--Section3-->
<div class="section three">
</div>
</body>
</html>
It works great on my desktop. But I tried it on my iPhone and the first section takes up the entire height of the webpage, not just the height of the browser, so it ends up "hiding" the other sections.
I've done several searches here on stack overflow as well as some other sites but I just can't find a fix. Any help would be greatly appreciated.
.section {
height: 100vh;
}
Set the height to your viewport height using vh.
Reference: https://snook.ca/archives/html_and_css/vm-vh-units
height: 100vh
that should do the trick
vh = viewport height
below is my html css code
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title ng-bind="title +' | Game '">Platano</title>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="application/json; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="shortcut icon" type="image/x-icon" href="Images/favicon.ico" />
<style>
html {
padding: 0;
margin: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border:1px red solid;
height:100%;
}
body{
height:100%;
border:1px black solid;
background: linear-gradient(180deg,#007738,#B0D133);
position: absolute;
font-size: 16px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0 auto;
padding: 0;
padding-left: 2em;
padding-right: 2em;
overflow-x: hidden;
overflow-y: auto;
min-width: 500px;
overflow-x: scroll;
z-index: -2;
}
</style>
</head>
<body>
</body>
</html>
To observe this blank space on desktop..follow the steps
step 1: open this html file or code and open firebug...click on mobile icon in firebug as shown in figure below.
Step2: You will see the screen as shown below..now make sure that "Screen" checkbox is checked...as shown in image below
step 3: now reduce the screen size to less than 500 by selecting any device or dragging the screen (since i have set min-width:500px) and then refresh the page by (ctrl +f5) or (ctrl + shift + r)..and now you can clearly see the blank space on the footer of the page..
What you are trying to do is, giving a definite positioning to the body And also making it left:0; and also inserting a condition of min-width:500px;.
so it causes html to expand according to screen, but your body section remains left:0; with fixed width 500px.
So, better you remove left:0; from body style. It will make your body a fluid container.
I think the problem is you set page scale to -0.8 as you can see in top right corner of your window. If you return it to 1 everything works fine.
Actually I am not clear what you are looking for.
Hope you need to show this linear gradient in all devices and its sizes.
* {
margin: 0;
padding: 0;
}
html, body {
min-width: 500px;
height: 100%;
background: linear-gradient(180deg,#007738,#B0D133);
}
<body>
</body>
Try this, else let me know what is your exact requirement.
This for any screen size - i have added in the min-width which forces you to scroll right on screens which are too small;
Meta
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
CSS
html,body, .game {
padding: 0;
margin: 0;
}
.game{
border:1px black solid;
background: linear-gradient(180deg,#007738,#B0D133);
position: absolute;
font-size: 16px;
top: 0;
left: 0;
right: 0;
bottom: 0;
min-width: 500px;
}
HTML
<div class="game"></div>
Full Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Game.</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
html,body, .game {
padding: 0;
margin: 0;
}
.game{
border:1px black solid;
background: linear-gradient(180deg,#007738,#B0D133);
position: absolute;
font-size: 16px;
top: 0;
left: 0;
right: 0;
bottom: 0;
min-width: 500px;
}
</style>
</head>
<body>
<div class="game"></div>
</body>
</html>
Screenshot Example
position: fixed is a quirky little fellow especially when it comes to mobile.
When attempting to use a fixed element with another element that has a width greater than the device's height, it breaks Mobile Safari.
I would like to keep the header on top while the content is scrollable. Is there a way around this issue without losing the experience?
Thanks in advance!
EXAMPLE:
http://debug.studiotate.com/mobile-safari-position-fixed (this is the issue i'm seeing - the header goes away when you scroll down and/or right)
EXPECTED:
http://debug.studiotate.com/mobile-safari-position-fixed/expected (this is what it should look like - the header stays put)
CODE:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, width=device-width" />
<style type="text/css">
body {
margin: 0px;
}
header {
background-color: #00FF00;
left: 0px;
position: fixed;
top: 0px;
}
div {
background-color: #FF0000;
height: 1500px;
width: 1000px;
}
</style>
</head>
<body>
<header>Header</header>
<div></div>
</body>
</html>
I think that div must be remove and set background to body
<body>
<header>Header</header>
</body>
And CSS:
body {
margin: 0px;
background-color: #FF0000;
}
header {
background-color: #00FF00;
left: 0px;
position: fixed;
top: 0px;
}