I have a question.
I got this so far:
I basically want the highlighted div to cover your device screen no matter how big the device screen is. now i see 2 different divs when i open this on my phone. i only want to see the one that is highlighted. How do I achieve this?
Thanks in advance, kevin
You can also use position absolute as well as set all the viewport sides (top, right, bottom, left) to 0px will make the div take the full screen.
Firstly, you will want to drag a Container Element onto your page. From the right-hand menu of the editor, you will notice that there is a "Full Width" toggle. Toggling this will set this Container Element to full width on your page.
You'll want a fixed position element at 100% width and height , if you don't have a background color or image you'll be able to click through it. Set z-index higher then all other elements to ensure it is at the front if you need that.
You could use viewport height as your height value:
.main {
height: 100vh;
background-color: green;
}
<div class="main">
CONTENT
</div>
Using height: 100vh means the element in question always be 100% height of the viewport a user / devie has.
More info: https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/
You can probably do that by setting the position of the div that you want to make fullscreen, to absolute
and then apply the below CSS.
top:0;
left:0;
bottom:0;
right:0;
height:100%;
width:100%;
Thus, the final css would be as follows
.fullscreen{
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
height:100%;
width:100%;
}
You can use position: absolute;
or position: fixed
.
Use absolute
for just making it cover the whole page.
Use fixed
to make it nailed in a default position. If u use fixed
, even though your page is more than 100% you cannot scroll down to see any other things.
CSS
div.any {
position: absolute; /*position: fixed;*/
top: 0;
left: 0;
width: 100%;
height: 100%;
/*You can add anything else to this like image, background-color, etc.*/
}
HTML
<div class="any"></div>
.video-container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow: hidden;
object-fit: fill;
}
.video-container video {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With