www.regretproject.org is my site. I'm having a p problem in which the menu on the left side is cut off entirely on Android, and half way on mobile Safari. Any tricks to force it to see the whole thing?
www.regretproject.org/css/style.css for the css
Try this:
<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
<meta name="viewport" content="width=device-width" />
Well... you're positioning your content to the right...
#container {
position: absolute;
width: 1024px;
right: 0%;
height: 500px;
top: 60px;
}
... why do you do this? Is there a special purpose this position serves? I would recommend just centering your content instead of doing absolute positioning:
#container {
height: 500px;
width: 1024px;
margin: auto;
position: relative;
top: 60px;
}
Related
I am trying to make a Div take the whole height of a page. The problem is when my page has scroll the div is not taking whe whole height only takes the height until the scroll. The div is used to overlap the page when loading. Here is my CSS code:
#disablingDiv
{
/* Do not display it on entry */
display: block;
/* Display it on the layer with index 1001.
Make sure this is the highest z-index value
used by layers on that page */
z-index:1001;
/* make it cover the whole screen */
position: absolute;
top: 0%;
left: 0%;
width: 100%;
min-height:100%;
/* make it white but fully transparent */
background-color: gray;
opacity:.5;
}
And here my HTML code:
<!DOCTYPE html>
<html ng-app="app">
<head>
<title ng-bind="title">
My app
</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<base href="/">
</head>
<body>
<div id="disablingDiv"></div>
<ui-view></ui-view>
</body>
</html>
Thanks in advance!
Do you want to have some kind of overlay? If yes you may want to use position fixed instead of absolute. Unlike position absolute, fixed will position the element relative to the viewport (visible area). Additionally you may want to set "overflow: hidden" to the scrolling container while the overlay is active.
.loadingOverlay {
position: fixed;
z-index: 100;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
/* make it white but fully transparent */
background-color: gray;
opacity:.5;
}
.loadingContainer {
/* do not allow scrolling */
overflow: hidden !important;
}
Alternativly you can wrap you disablingDiv around the actual view. Might be useful if you don't want to block the whole page but just the content while still allowing to navigate e.g. using some toolbar.
Change position: absolute; to position: fixed;
html,body {
height: 3000px;
}
div {
position: fixed;
background: red;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
<div></div>
If it's for loading, I would disable the scroll while it's loading with html, body { overflow: none; }
Use Position fixed instead of absolute.
#disablingDiv
{
position: fixed;
height: 100%;
}
Have you tried setting styles to html and body tags like below?
html {
height: 100%;
}
body {
height: 100%;
}
Edit:
As per your comment, I just put your code in a jsfiddle and it seems to achieve what you're asking for? If not can you elaborate please? What have you already tried?
https://jsfiddle.net/qLxm7rbx/1/
Add below code and Try:
#disablingDiv {
height:100vh;
}
Also check browser support.
Or:
body, html {
height: 100%;
}
#disablingDiv {
height: 100%;
}
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>
Here's an example of this happening:
<html>
<head>
<style>
#menu {
background-color: blue;
position: absolute;
height: 300px;
left: 0px;
width: 200px;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>Testing</title>
</head>
<body>
<div id="menu" class="max-width"></div>
</body>
<script>
var menu = document.getElementById("menu");
menu.addEventListener("click", function() {
menu.style.left = "200px";
});
</script>
</html>
If you click the menu div in mobile Safari (which should just move the div right 200px) it seems to cause the entire viewport to shrink. This doesn't seem to happen in other mobile browsers. You can test it here: http://natecollings.com/mobile-safari.html
Does anyone have a mobile Safari workaround for this?
Here's a gif of it happening:
Have you tried to force a min-width to be equal to the actual width and min-height to be equal to the actual height and try it out on safari on mobile? This might push the browser to use that height and width.
Something like:
#menu {
background-color: blue;
position: absolute;
float: left;
min-height: 300px;
left: 0px;
min-width: 200px;
}
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;
}
When I open popup on my site from desktop, all right. But when I open popup on mobile devices, popup-overlay has double height (popup go to top of page).
Example of popup: http://jsfiddle.net/tb28F/
How can i fix it?
Update. Example of my problem: imgur.com/hKHjPzP
Try setting the height to the viewport height value, after adding the viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
And CSS:
.popup-overlay {
background: rgba(0,0,0,.5);
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100vh;
text-align: center;
overflow: auto;
}