I am working on a webpage that will be accessed by both Desktop browsers and mobile browsers.
On most mobile browsers the layout is already correctly positioned at the bottom of the screen, but on some devices (mostly Motorola ones) the toolbar at the bottom covers part of my layout.
How can I detect that I am on a phone with a toolbar like that, so I can use an appropriate margin-bottom to raise my layout above it?
EDIT:
Here is a sample of the CSS I'm using the part of the layout that must stick to the bottom. Maybe this will help.
element.style {
top: auto;
bottom: 0px;
max-height: 433px;
display: block;
}
#media (max-width: 425px) and (min-width: 0px)
screen.css:589
#wrap.dock {
width: 100%;
}
#wrap.dock {
box-shadow: 0px 25px 10px 0px rgba(0, 0, 0, 0.5);
height: 411px;
overflow: visible !important;
position: fixed;
right: 0;
z-index: 50;
}
Related
On my website, I have added the fixed position to the header, and its working fine in desktop version and android os phones. but in iPhone when the user scrolls down it works fine but as fast the user starts to scroll up an unknown part of the div appears in the back of the header and it overlaps all the content on the website. I have tried to find that part of div but it's not working. please help.
here is my header code:
#header.header-fixed {
position: fixed;
left: 0;
top: 0;
right: 0;
z-index: 9997;
background: rgba(0, 0, 0, 0.98);
height: 70px;
padding: 15px 0 0;
transition: all 0.5s;
border-bottom: 2px solid #13aafe;
}
Heres an image of the issue I'm trying to resolve. I am working on my portfolio site; and I have images of some of my personal projects, all of them are the same width but some have different heights. Due to getting full page screenshots of my work, some of the images have a much greater height than others. Instead of allowing displaying all the images the same size and allowing scrolling in the modal window, it scales the images down to fit within the same height as all the others. This gives it an odd look cause some of the images get scaled down a lot. I would like to get all the images to display in the same width, and those that need it to allow scrolling to see the rest of the image. I tried to use overflow: scroll; on the .lightbox but that didn't help. I've also tried overflow-y. I would also like to disable the page in the background from being able to scroll, to allow the scrolling to be focused on the images that it is necessary on.
.lightbox {
position: absolute;
left: 0;
width: 100%;
z-index: 10000;
text-align: center;
line-height: 0;
font-weight: normal;
}
.lightbox .lb-image {
display: block;
min-width: 100%;
height: auto;
border-radius: 3px;
/* Image border */
border: 4px solid white;
}
.lightbox a img {
border: none;
}
.lb-outerContainer {
position: relative;
*zoom: 1;
width: 250px;
min-height: 250px;
margin: 0 auto;
border-radius: 4px;
/* Background color behind image.
This is visible during transitions. */
background-color: white;
}
Lightbox2 by default appends calculated width & height to the image and .lb-outerContainer. But you can override this by doing the following -
.lb-outerContainer {
width: 100% !important;
height: auto !important;
}
.lightbox .lb-image {
width: 100% !important;
height: auto !important;
}
I don't recommend this because this breaks the intended use of this plugin. I'm sure you'll find an alternative to lightbox2 that achieves what you're looking for. So you can consider this as a temporary fix.
EDIT: Here's a jsfiddle to see it work. https://jsfiddle.net/hsugx6wm/43/
I am loading my div content from a php file (15 items) via Jquery. All the content is there once the height of the div is 500px but once I want it to be 100% some of the data is not there. It loads more on scroll when is 500px in height but does not scroll once it is 100%. How may I solve this please? Thank you.
#list {
position: fixed;
top: 50px;
left:0%;
width: 350px;
padding-left: 80px;
height: 1000%;
border: 1px #d3d3d3 solid;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius: 5px;
background-color: #FFFFFF;
box-shadow: 10px 10px -5px #888888;
-moz-box-shadow:10px 10px -5px #888888;
-webkit-box-shadow:10px 10px -5px #888888;
overflow-y: scroll;
}
I believe your issue is caused by the following CSS (I changed the height:1000% that's in your CSS to height:100% as your question describes):
position: fixed;
top: 50px;
height: 100%;
position: fixed tells the browser to keep that element in the same place, regardless of how much the browser window is scrolled.
top: 50px tells the browser to position the element 50 pixels from the top of the browser window.
height: 100% tells the browser to make the height of the element the same height as the browser window (regardless of the top position).
Because position:fixed means that the element doesn't move when the page is scrolled, you're always going to have 50 pixels at the bottom of the element that are always going to be hidden, because the element position is fixed and won't change when you scroll.
If you need your element to always be 50 pixels from the top of the screen and 0 pixels from the bottom of the screen (regardless of scrolling), don't specify a height at all, and instead do:
position: fixed;
top: 50px;
bottom: 0px;
The header image on the website I am working on responds to changes in screen size when going down in size (smaller) however, does not respond when going to a bigger screen size.
Link: Removed
If you go to a smaller screen size, refresh, and then expand the window, you will see the problem. The bottom of the image becomes cut off with a black space filling the area.
HTML:
<div class="intro">
<div class="intro-inner">
<div class="intro-bg">
<div class="intro-bg-item">
<div class="intro-bg-item-image" style="background-image: url(css/images/pb/home-banner.jpg)"></div><!-- /.intro-bg-item-image -->
</div><!-- /.intro-bg-item -->
</div><!-- /.intro-bg -->
</div><!-- /.intro-inner -->
</div><!-- /.intro -->
CSS:
.intro { position: relative; text-align: center; color: #fff; background-color: #000; max-height: 100vh; overflow: hidden;}
.intro-inner { position: absolute; bottom: 0; top: 0; left: 0; right: 0; }
.intro:after { content: ''; display: block; padding-top: 45%; }
.intro:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 40%); z-index: 3; }
.intro-bg { position: fixed !important; height: 100% !important; }
Since you are using bootstrap, try to use the class "img-responsive" for the logo
and adjust the logo width using media queries for each screen size
The problem persisted when viewing the website from a mobile device only. A less than ideal solution I came up with was to set the height of the image to be the WIDTH of the screen when on any screen size smaller than a laptop.
CSS:
#media only screen and (max-device-width: 1024px) and (orientation: landscape) {
.intro-bg {
height: 100vw !important;
}
}
First look at this website: http://irismediainfo2.lili.de/spip.php?article4924
On my screen it looks like on this screenshot: chrome - full window - desktop resolution: 1440x900
I think for most of you it will look diferent but thats part of the problem...
The main div with the gray border is inside an other div with id="page".
#page {
width: 560px;
margin: 50px auto 0px auto;
position:relative;
}
I created a new div with id="toolbar", that looks like it sticks to this #page-div, but it does not scroll with the page. On the website I linked above u can see the #toolbar as a dummy-box (grey with some Text).
At the moment the I use position:fixed in #toolbar.
When I position it at the side of #page so that it LOOKS like it is attached to it, and I resize the browser window... the two divs dont move the same way because the position of #page is calculated from the middle (by margin:auto) and the position of #toolbar is calculated from the side of the browser window (by position:fixed). So it is not attatched anymore in any other windowsizes.
I tried to make the #page float, to make the #toolbar appear at the side but that destroys the "margin:auto" of the #page so it is not centered anymore.
I also tried
#toolbar {
position: fixed;
center: 0px; }
Because I hoped there could be a way to calculate the position for position:fixed from the center.
Nothing worked, I hope you know a solution.
Actually everything I want is something like:
#page {
width: 560px;
margin: 50px auto 0px auto;
position:relative; }
#toolbar {
position: fixed;
center: 0px 280px 0px 0px; }
I would like to do this with minimal code and resources because I don't want to make the loading speed worse because of a little toolbar.
If you need more specific code from my css or html please tell me.
I hope the target and the problem is clear.
All you need is a wrapper-div that centers the whole block and algin the toolbar after that, since your #page has a fixed width in every viewport.
HTML:
<div class="wrapper">
<div id="toolbar">
content
</div>
</div>
CSS:
#toolbar {
height: auto;
padding: 10px 20px 10px 15px;
background-color: rgba(170, 170, 170, 0.5);
border: 1px solid #AAA;
border-radius: 0px 5px 5px 0px;
text-align: center;
margin: 0px auto 0px 279px;
}
.wrapper {
position: fixed;
top: 30%;
left: 50%;
}