I am trying to make my site responsive.But no matter how much I scroll it still keeps me on the same div element.I am using a plugin called jquery-momentum-scroll.js and a plugin called vide.js.The wrapper covering the whole is given below-
#main {
height: inherit;
bottom: 0px;
transition: transform 1.2s ease-out;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
padding: 0px;
z-index: 2;
display: block;
backface-visibility: hidden;
}`
The element that is showing no matter how much I scroll is given below-
#banner_wrapper {
margin-top: 55px;
width: 100%;
height: 900px;
position: relative;
top: 0;
left: 0;
opacity: 0.4;
z-index: 0;
}
I have tried removing the "position: fixed;" property but still that did not do the trick.But when I resize the browser it shows fine.The link of the site is given below-
https://robustious-methods.000webhostapp.com/
The reason the #main section is taking over the view-port no matter where you scroll, is because you are using position: fixed; for the element's positioning.
With position: fixed, this takes the element out of the flow of the document, and fixes it relative to the screen. In this case, you've set it to take up 100% of the width and using top: 0; bottom: 0; in your styling, you're telling it to take up 100% of the height also.
If you want to keep the element in the flow of the document, change position: fixed to position: relative; on the #main selector, or remove it completely.
If you'd like to maintain the full height banner, in the #banner_wrapper selector, remove height: 900px; and add height: 100vh;.
More reading about CSS positioning here.
Related
What I am trying to do should be simple. But somehow I am not able to find an answer to it.
Here is my codepen:
https://codepen.io/mvsimple/pen/wvgbvgQ
HTML:
<div class="parent">
<iframe class="child" src="https://reesgargi.com/"></iframe>
</div>
CSS
.parent {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 62.5%;
}
.child {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
I want the iframe to fit inside the div (so that its width = parent div width)
But iframe loads the page zoomed in, from the center.
I have tried using CSS (Flexbox, Table display, and W3S trick
But I am helpless. I tried the iframe resizer library but it had its own issues. (Dragging)
Please advise my fellow programmers.
Finally found a solution!
All I had to was to scale down the iFrame and set its width equal to the original size (source of that iframe).
.child{
width: 1280px;
/* Magic */
transform-origin: 0 0;
transform: scale(0.703);
}
My html pseudocode looks like that:
<div>
<VideoAnimation />
<div className="under-animation">
// a lot of content goes here
</div>
</div>
The thing is that VideoAnimation component has absolute positioning and takes height of 100vh (it must be that way). Because of this is taken out of the flow of document. Under-section should go just after the animation (so it mimics relative positioning behaviour) so I decided to give it absolute position as well - it begins at top: 100vh. But this causes something unexpected to me, ie. I cannot scroll thru the page anymore. I can take a right scroll bar and scroll it but cannot use it on my mousepad. Issue does not exist on relative positioning. Thanks!
My VideoSection component looks like that:
import React, {Component} from 'react';
render() {
return (
<div className="video__container">
<video autoPlay muted className="myVideo">
<source
src="https://res.cloudinary.com/da0fiq118/video/upload/c_scale,h_600/v1538825517/animation.mp4" type="video/mp4" />
</video>
</div>
);
}
}
export default VideoAnimation;
And scss file:
.video {
&__container {
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
}
.myVideo {
display: block;
height: auto;
left: auto;
max-width: none;
min-height: 100%;
min-width: 100%;
right: auto;
position: absolute;
top: 0;
width: auto;
z-index: 1;
}
#supports (transform: translateX(-50%)) {
.myVideo {
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
}
#media screen and (min-aspect-ratio: 16/9){
.myVideo {
max-width: 100vw;
min-width: 100vw;
width: 100vw;
}
}
#media screen and (max-aspect-ratio: 16/9){
.myVideo {
height: 100vh;
max-height: 100vh;
min-height: 100vh;
}
}
The goal was to have animation in the center in every resolution with full viewport height, that's why I used absolute positioning and then manipulated its values.
Update:
With the new example code, I'm not seeing a reason you need to keep the video absolute, would 100vh and 100vw not suffice?
JSFiddle
Original post:
All of your content is absolute positioned, there is no content left in the normal document flow to give the body height to scroll.
Without knowing why the VideoAnimation element "must be" absolute, the easiest solution would be to not give the under-animation div position absolute and instead simply give it a top margin of 100vh. This keeps the element within the document flow and still compensates for the video's space.
To be clear, this is also a less than desirable setup that could run into issues if things change, but without more information it's the easiest one to give.
I have the following website, where a parent div that scales dynamically with browser size contains a child div with an image. The desired effect is as follows: https://shibori-demo.squarespace.com/workshops-shibori/
My pug code is as follows:
article.eventlist-event.eventlist-event--upcoming.eventlist-event--hasimg.eventlist-hasimg.eventlist-event--multiday
a.eventlist-column-thumbnail.content-fill(href=`${link}`)
img(src=`${img_src}`, alt=`${img_src}`
, style='position: static; float:left; width: 100%; object-fit: contain'
)
This code achieves the following effect (the parent div is red for effect): https://lingxiaoling-1.appspot.com/code.
Some examples:
In conclusion I would like the images to be:
1. centered relative to the parent div
2. resize according to the size of the parent div so that it fills the parent div
3. does not overflow the parent div.
There is couple solutions.
a) The easiest way to make it work is to use backgrund-image instead of img tag:
.image {
background-image: url(url-to-image);
background-size: cover;
}
b) If the image proportions are always the seme, you make it work with img:
.parent {
position: relative;
}
.img {
position: absolute;
height: 100%;
width: auto;
top: 0;
left: 0 // or if you want to center it left: 50%; transform: translateX(-50%)
}
c) or you can make a parent the same width-height ratio as parent:
.parent {
width: 100%;
height: 0;
padding-top: cacl(100% * (width of pic / height of pix));
position: relative;
}
.img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
There are probably many others.
I cannot enter your website, and you didn't provide enough of your markup and styles to reproduce exact problem, so this is all i can recommend from what you wrote above.
If neither solution will solve your problem, you will need to post more markup and css, to get help.
I have a div that I want to completely cover a page. I don't want anything on the page to be showing. The div should overlay on the page and hide everything on it. To create such an overlay I use the following CSS:
.overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
}
But if the page that the overlay is over is too long, some parts of the page still shows. How can I make it so that the div completely covers the page? Setting the position to fixed doesn't help because the overlay is multi pages long and the scrollbars get wracked.
The CSS that you're going to want to use for the overlay div is this.
.overlay {
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
}
This should completely cover the page with a black div.
Sliding working Fiddle but incorrect width prior to scroll is here. Correct layout, but no scroll functionality is here. Still learning CSS, but for some reason, if I remove the follwong fixed floating side CSS:
#commentWrapper {
position: absolute;
margin-left: 35px;
left: 450px;
width: 280px;
}
#comment {
position: absolute;
top: 0;
/* Can include margins in the sliding effect here */
}
#comment.fixed {
position: fixed;
top: 0;
}
, the position is correct for the side, however it does no stay at its fixed postion as you scroll down. keeping the code in, the CSS for some reason reduces the width of the side, but as soon as you scroll down, it becomes normal. How can I fix it so that it loads on the side with the correct position and width?
I updated your CSS. Take a look. I hope this fixed your problem!
The relevant code I changed:
New:
#commentWrapper {
float:right;
margin-left: 10px;
margin-right: 10px;
left: 450px;
width: 25%;
}
Old:
#commentWrapper {
position: absolute;
margin-left: 35px;
left: 450px;
width: 280px;
}