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
Related
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>
I'm using Bootstrap and I'm struggling to ensure that the site is responsive to different screen sizes, i.e. when I resize my browser window, some of the elements do not resize accordingly. Similarly, when I select the iPhone display in the javascript console, it doesn't fit properly either.
Here's what I see when I halve the width my browser window:
screen_view_small width window
Here's what I'd like to see when I halve the width my browser window:
screen_view_expected after resize
How can I fix this so that the width of the the elements adjust properly when the window is resized? It does work for my header, but not for the other elements: col-md-10, containers and chart. Height should stay constant, but width has to be responsive. Chart is done in Highcharts, no width or height values are passed in highchart.
My html file is set up as follows:
<!doctype html>
<html>
<head>
<title>my title here</title>
<link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css">
<!-- Our Custom CSS -->
<link rel="stylesheet" href="/static/css/style_charts_black.css">
<script src="/static/js/jquery-3.2.1.min.js"></script>
<script src="/static/Highcharts-5.0.14/code/highcharts.js"></script>
<script src="/static/Highcharts-5.0.14/code/modules/exporting.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<div class="header-container">
<header>
...
</header>
</div>
<div class="container-fluid content-container">
<div class="row">
<div class="col-md-2">
...
</div>
<div class="col-md-10">
...
</div>
</div>
</div>
</body>
</html>
My custom css file is set up as follows:
body {
position: relative;
font-family: 'GothamBook', sans-serif;
font-size:12px;
font-weight:300;
height: 1100px;
padding: 0;
margin: 0;
}
.content-container {
box-sizing: border-box;
clear: both;
float: left;
height: 100%;
padding: 65px 0 0;
width: 100% !important;
min-width: 768px;
overflow: hidden !important;
}
.row {
box-sizing: border-box;
clear: both;
float: left;
height: 100%;
overflow: hidden !important;
position: relative;
width: 99%;
margin-left: 10px;
margin-top: 13px;
}
.col-md-2 {
position: relative;
height: 100%;
min-width: 250px;
max-width: 250px;
bottom: 20px;
}
.col-md-10 {
position: absolute;
margin-left: 255px;
height: 100%;
width:100%;
bottom: 20px;
}
.chart {
position: absolute;
width: 98%;
height: 92%;
margin-top: 35px;
}
.header-container{
float:left;
width:100%;
height:65px;
box-shadow: 0 1px 11px rgba(0, 0, 0, 0.7);
position:absolute;
top:0;
left:0;
z-index:101;
min-width: 768px;
}
.header-container header{
float:left;
width:100%;
}
Dude you are using bootstrap, try their grid classes, col-md-2 col-sm-6 col-xs-12 .
Have a look at this https://getbootstrap.com/docs/3.3/css/#grid
Grid system
Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.
| Extra small devices Phones (<768px)| Small devices Tablets (≥768px) |Medium devices Desktops (≥992px) |Large devices Desktops (≥1200px)
__________________________________________________________________________________________________________________________________________________________
Class prefix| .col-xs- | .col-sm- | .col-md- | .col-lg-
__________________________________________________________________________________________________________________________________________________________
As you can see in my example I removed all the css references to width and height you had in your code... and now it works...
Give a bounce to this:
Bootstrap Getting Started
EDIT
I also changed the class to container so you can achieve what you were looking for...
<!DOCTYPE html>
<html lang="">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Our Custom CSS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
* {outline: 1px solid red}
body {
font-family: 'GothamBook', sans-serif;
font-size:12px;
font-weight:300;
padding: 0;
margin: 0;
}
.chart {
position: absolute;
width: 98%;
height: 92%;
margin-top: 35px;
}
.header-container{
height:65px;
box-shadow: 0 1px 11px rgba(0, 0, 0, 0.7);
top:0;
left:0;
z-index:101;
min-width: 768px;
}
</style>
</head>
<body>
<div class="container">
<header>
...
</header>
<div class="row">
<div class="col-md-2">
...
</div>
<div class="col-md-10">
...
</div>
</div>
</div>
</body>
</html>
i made a new layout but there are sidebands or sidelines(i mean the scroll lines "when too much content" and you have to scroll a lot" but this side line is on the bottom in google chrome) appears at full viewport dont know why does it happens. if i change the wrap width from 100vw to 90 there will be white space on the right side which is not good.
Here is the image:
And here is my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="wrap">
<div class="el2">header</div>
<div class="el1">left</div>
<div class="el3">
<div class="el5">pakk1</div>
<div class="el6">pakk1</div>
phakk
</div>
<div class="el4">footer</div>
</div>
</body>
</html>
* {
box-sizing: border-box;
}
.wrap {
width: 100vw;
height: 100vh;
background: grey;
}
.el2 {
width: 100vw;
height: 30vh;
background: #C2FF76;
}
.el1 {
width: 20vw;
height: 70vh;
background: blue;
float:left;
}
.el3 {
float:left;
width: 80vw;
height: 70vh;
background: red;
}
.el4 {
width: 100vw;
height: 13vh;
background: purple;
float:left;
}
.el5 {
width: 30vw;
height: 13vh;
background: green;
float:left;
}
.el6 {
width: 40vw;
height: 13vh;
background: green;
float:right;
}
If you hide the overflow on your top-most container this issue will go away.
.wrap {
overflow: hidden;
}
It's good to figure out why you have an overflow though so you can fix the underlying issue.
https://css-tricks.com/findingfixing-unintended-body-overflow/
Note: you can also only change the overflow for the X and Y axis
https://css-tricks.com/almanac/properties/o/overflow/
Bootstrap uses negative side margins on some elements, that's what causes your problem.
Just change all the vw values to % values (same numeric values) - these consider the "real width" of the parent elements.
https://codepen.io/anon/pen/MopXrq
Actually the problem was some of the boxes height : vh exceeded the limit.
I have a web page that is 960px wide. Inside this page there's a section with an image inside that I want pushed all the way to the right so it's half way outside the page. The attached image below will show you an example of what I would wan this to look like.
I would also like it if the image is in the background so if the browser window is small in width it would just keep covering the image.
Here's a couple sites that has this:
http://cpanel.com/products/
At cpanel you can see the iPad on that page is only half way displayed when the browser window is smaller than image.
Another website with this effect is Doteasy.com here's the URL:
http://www.doteasy.com/
If you scroll down to the middle of their page you will see the Site builder section which includes a screenshot of the software. Their page is 980px wide and you can see that the screenshot is halfway outside the page wrapper.
The image should be 552px widde by 315px high.
.container {
width: 960px;
height: auto;
margin: 0 auto;
background-color: yellow;
}
section {
width: 100%;
height: 508px;
background-color: blue;
}
.image {
width: 552px;
height: 315px;
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<title>Site Example</title>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
</head>
<body>
<section>
<h1>This is the Section</h1>
<div class="container">
<div class="image">This would be the image.</div>
</div>
</section>
</body>
</html>
I hope you guys are able to help !
Thanks.
You can position absolutely relative to the container like so:
Add position: relative; to the container
Add absolute positioning to the image position: absolute; top: 0; right: -276px; (The right value is half the image width)
overflow-x: hidden on the container will stop the extra half of the image from being visible.
section {
width: 100%;
height: 508px;
background-color: blue;
}
.container {
position: relative;
width: 960px;
height: 400px;
margin: 0 auto;
background-color: green;
overflow-x: hidden;
}
.image {
position: absolute;
top: 0;
right: -276px;
width: 552px;
height: 315px;
background-color: red;
}
<section>
<h1>This is the Section</h1>
<div class="container">
This is the container
<div class="image">This would be the image.</div>
</div>
</section>
This should work for you. I added position: relative to the .container and section, then position: absolute to the image container. You can then use left: 25% to adjust how far off screen you would like the image to be. The 25% can be adjusted according to your needs. You can also use px instead of percentages if that works better for your needs.
.container {
width: 960px;
height: auto;
margin: 0 auto;
position: relative;
}
section {
width: 100%;
height: 508px;
background-color: blue;
position: relative;
}
.image {
width: 552px;
height: 315px;
background-color: red;
position: absolute;
left: -25%; /* -- Adjust this percentage as needed -- */
}
<!DOCTYPE html>
<html>
<head>
<title>Site Example</title>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
</head>
<body>
<section>
<h1>This is the Section</h1>
<div class="container">
<div class="image">This would be the image.</div>
</div>
</section>
</body>
</html>
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;
}