The resizing of the background happens due to the popping in/out of the browser bar on the phone. How can I prevent this issue?
CSS
html {
overflow: hidden;
height: 100%;
}
body {
font-family: "Roboto", sans-serif;
height: 100vh;
width: 100%;
overflow: auto;
}
#myVideo {
position: fixed;
right: 0;
bottom: 0;
width: 100%;
min-height: 100%;
z-index: -1;
object-fit: cover;
}
I have tried messing with with width, height and position values to no success.
Fixed. Had to change video height to:
height: 100vh
Related
I've been fiddling with the css of my slider (which is generated by super simple slider) but I can't get my slider to remain a consistent height when I drag my browser window smaller. What happens is the height gets scaled down proportionally as the window gets smaller. If I hit refresh on a smaller browser window, the height is correct but for some reason when I drag the window to a smaller size, it scales the slider down. Here is the code for the styling of the slider:
.sss {
display: block;
height: 0;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
}
.ssslide {
display: none;
left: 0;
margin: 0;
overflow: hidden;
padding: 0;
position: absolute;
top: 0;
width: 100%;
}
.ssslide img {
display: block;
height: auto;
margin: 0;
max-width: 100%;
padding: 0;
position: relative;}
.sssnext,
.sssprev {
width: 30px;
height: 100%;
margin: 0;
position: absolute;
top: 0;
opacity: 0.1;
}
.wedding-product-slidercontainer {
max-width: 100%;
width: auto;
height: auto;
}
I've tried changing the .sss position to static which initially makes it look right but yields problems. I've also tried making the height 800px for.sss and .ssslide but neither of these solutions seem to work. I can put the whole code up on codepen if you need it but I can't seem to figure out what to do.
I am wanting to keep one image in place while the background image is scalable in browser.
When I use the height: XXXpx; it will not scale correctly. I've also tried using percentages for the height.
.cbp-fwslider ul li > a img {
border: none;
display: block;
margin: 0 auto;
width: 100%;
}
.big-o {
position: absolute;
top: 360px;
margin-left: 7%;
width: 200px;
height: 358px;
}
www.georges.larsonplusyou.com
Thank you guys.
Try removing the inline style for width from your html, and then change your selector to style the image itself as follows:
.big-o img {
position: absolute;
top: 360px;
margin-left: 7%;
max-width: 100%
width: auto;
height: auto;
}
This worked in my browser, but I would suggest using media-queries for responsive design. I think you need to do a width: auto\9; if the webpage will be used in Internet Explorer because there's a bug.
I want my div.container to be 100% height to fill the whole screen.
I've tried a few things, min-height, body height 100% and all of them seperate but it just won't work.
Here is the link : http://jquery.colinvaneenige.nl/test/
So .container with 100% height while still being in the center of the page! :)
Thanks in advance,
You can make it position: absolute at set the top and bottom to 0:
#container {
width: 400px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: red;
margin: 0 auto;
}
Fiddle Demo 1
..or
body,html {
min-height: 100%;
height: 100%;
}
#container {
width: 400px;
height: 100%;
background: red;
margin: 0 auto;
}
Fiddle Demo 2
Using position: absolute and set height: 100% instead of min-height.
.container {
position: absolute;
height: 100%;
}
You then will have to use other CSS tricks to get it back to centered, such as let's say your width of the container is 1000px:
.container {
width: 1000px;
left: 50%;
margin-left: -500px; /* negative half of the total with of the container */
/* And code from above line */
position: absolute;
height: 100%;
}
I've only ever been successful with this by creating a table with a single cell that is 100% height, then placing your div within that.
It's not possible, height must be in pixel :/
Only % for width :)
You can make a " min-height: 100px; "
here is my site
http://iadprint.com/about
i am trying to make the menu tag and the colright div to have a height of 100% and stick to the footer div pushing down to the bottom. but no matter what i try nothing works. i have tried validating the html but only 3 errors exist which arent that important to fix. what ami doing wrong?
You need to use faux background technique, CSS (possibly with table-cell) or JavaScript.
I'm a fan of fixed layouts for this sort of scenario where you want a footer to always appear at the bottom of the window:
header
{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 130px;
}
nav
{
width: 960px;
margin: 0 auto;
}
article
{
top: 130px;
bottom: 120px;
left: 0;
width: 100%;
position: fixed;
overflow: auto;
}
footer
{
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 120px;
}
#loading {
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
in ie >= 7 it’s works perfectly, but in ie6 height equal line height
Is it a block you want to fill the window? Then you have to set the height of the html and body tag too.
html, body {
height: 100%
}