I have a div set to position:fixed which slide down upon clicking an <img>. When my fixed div appears it is in full screen for mobile browsers with full height. However, when I scroll, the mobile browser toolbar hides which causes my fixed div to not be full screen anymore (there is a gap at the bottom equivalent to the hidden toolbar's height).
Image of the toolbar :
I want to set this fixed div's height to 100% even when the mobile browser toolbar hides itself.
CSS
#slider{
display: none;
position: fixed;
z-index: 99999;
top: 0;
left: 0;
height: 100%;
background: #fff;
overflow: scroll;
}
HTML
<body>
<div id="tick" class="col-md-12">many things</div>
<div id="slider" class="col-md-12">my slider</div>
</body>
I have solved the issue by using some css which stop hiding bottom toolbar on mobile browser.
when fixed div appear I add
$('body').css({'overflow':'hidden','position':'fixed'});
and when hide (remove) this div then again restore CSS
$('body').css({'overflow':'','position':''});
So when my fixed div appear it locked body and not even scroll. Also bottom toolbar of mobile browser never hide if user roughly scroll on fixed div. After that when div hide then body state restore again
Related
This is how the footer is looking only on the Contact Page of the client's website.
If you notice the footer is not sticking to the bottom of the page and hiding the submit button.
I have tried below CSS but then it sticks and is always visible with scroll, like sticky nav. If I remove the fixed position it again leaves the bottom and hides the submit button.
.footerclass {
background-color: #eeeeee;
position: fixed;
top: auto;
bottom: 0;
width: 100%;
display: inline-block;
}
It is only happening on one page i.e. Contact Us page. I am using "Contact 7 form" using elementor.
How can I fix this? So that it always remains on the bottom of the page for all pages no matter how big the form becomes.
Add position: relative to your main container (from what I can see that's your .site class), as well as min-height: 100vh. This will allow you to set the footers position to absolute, relative to the main container.
It will always be at the bottom of the content, but not stick when scrolling. Using the min-height will also ensure that even if there isn't enough content to scroll, the footer will still be at the bottom of the page.
The problem is with style
#media (min-width: 768px){
.elementor-section.elementor-section-height-full {
height: 100vh;
}
}
Easiest hack would be to add this to your custom css, but with height "auto".
Screenshot from inspector, where it is:
The issue is not with footer, but with content overflowing behind this because of fixed height.
I am using WordPress Twenty Seventeen for my website and I am having an issue with my header image on mobile. When I go to start scrolling, the header image kinda zooms-in, I have tried to google this issue but came up with nothing, I've tried going through the CSS code and don't see any transitions or the elements changing when I inspect them, Here is an example site:
https://2017.wordpress.net/
The header image is shorta zooms in when you start scrolling, is there away to prevent this so it stays the same size before scroll?
This is happening because mobile-chrome calculates the address bar into the viewport height and while scrolling webpage the address bar scrolls too and the visible area changes it's height dynamically.
E.g. on 320px X 360px screen, on mobile-chrome with address bar the height of viewport is 564px and after scroll when address bar disappears, the height of viewport changes to 620px.
Viewport Height with address bar
Viewport Height without address bar
Now image in .wp-custom-header taking min-height:100%;height:100% which will change height dynamically, therefore image changing it's dimension while scrolling.
Better way is to fix height of image in pixels in media queries.
.has-header-image .custom-header-media img{
height: 620px;
min-height: 0;
}
Similar issue:
css3-100vh-not-constant-in-mobile-browser
Add position: relative; to your cover img:
.wp-custom-header img {
position: relative;
}
The current position is fixed, which in conjunction with object-fit: cover;, is causing the zoom effect.
You can try following css:
html, body {
height:100%;
}
html {
overflow: hidden;
}
body {
overflow-y: scroll;
-webkit-overflow-scrolling:touch;
}
This will prevent the browsers from hiding address bar. So we will get rid of the jump while we scroll.
I have tried this in your url and it is working.
I suggest to use this in appropriate media queries.
I have a bootstrap modal which has height more than the browser screen height. The requirement is that there should not be any vertical scroll bar for the modal exclusively. There can be one for the page. Another one is that the modal should move along with the background.
Now to achieve this and going through lot of similar questions I made the below changes to the modal class:
.modal{
position: from 'fixed' to 'absolute';
overflow-y: from 'auto' to 'hidden'
}
Although this solves my problems as no scroll bar is coming and the modal moves along with the background, the problem is that in smaller screens or screens having lesser resolution the content is getting lost/hidden. Adjusting the width is not a solution as I can never be sure what the resolution will be.
Thanks in advance.
May be your solution is below. just put these css to your stylesheet.
.modal-open{
overflow-y: scroll;
}
.modal-open .modal{
overflow-y: initial;
}
.modal{
position: absolute;
bottom:initial
}
View this live demo on jsfiddle
I need a vertical navigation that will stretch the entire screen. How can I do this?
Typically, I would set the navigation with:
position: absolute;
height: 100%;
overflow-y: hidden;
but I can't get this to work for me for some reason or another. It shows a scroll bar regardless, and doesn't stretch the entire page--only the height of one viewport. You can view a working example here:
http://solstaging.net/vhosts/dealer-world-delivery/
Add position: relative to your body tag and the #primary will be the full height.
this is the most stupid question here on stackoverflow...
My client would like to have always visibile sidebar in all pages of his website..
Some pages have scrolling, other no, so he see logo and element jump position from one page to another of the scrollbar width ...
so... there is a way to "lock" the scrollbar space, so the he don't see "jump" form one page to another?
thank you
html {
overflow-y: scroll;
}
forces the scrollbar to be shown always
use fixed position:
#sidebar {
position: fixed;
top: 10px;
left: 10px;
}
With the above, the container div will always stay 10 pixels from the top and left of the browser window. So when the page scrolls, it will not move.