I am trying to load my HTML page into a container. However, when I try to load the HTML page, the container doesn't re-adjust its size to accommodate the Page. The contents of my page are still visible but they look like they are overflowing without the background of the container. I am new to WebDev and have no idea about this.
I have three containers. Container Big holds other two containers. ContainerMain holds navigation bar in it and I load page into containerPage whenever someone clicks the nav bar. I want containerMain and ContainerPage to look like a scrollable continous box at the center of container Big with some top and bottom margins but, whenever I load the page into containerPage, it fails to resize itself for the page (in this case, homepage).
<div id="ContainerBig">
<div id="ContainerMain"></div>
<div id="containerPage"></div>
</div>
Here is css for my containers:
#ContainerBig {
left: 0;
top: 0;
bottom: 0;
height: 100%;
width: 100%;
position: absolute;
}
#ContainerMain {
top:10%;
left: 10%;
right: 10%;
width: 80%;
height: 10%;
max-height: 77px;
border-radius: 5px;
position: absolute;
background-color: #262523;
border: 1px solid #111;
}
#containerPage {
top: min(20%,160px);
left: 10%;
right: 10%;
width: 80%;
height: auto;
padding-bottom: 5%;
margin-bottom: 10%;
display: block;
overflow: auto;
position: absolute;
background-color: #fff;
border-radius: 0 0 5px 5px;
}
And I'm trying to load the following webpage:
// Just in case you need it, the code I'm using to load the page is:
function changePage(page, context) {
$(".navItem").removeClass("active");
$(context).addClass("active");
var contain = $("#containerPage");
contain.slideUp("10ms", "linear", function change() {
contain.load(page);
contain.slideDown("10ms");
});
if ($(window).width() < 1126) {
var element = document.getElementById("nav");
element.style.display = "none";
}
}
body {
font-family: HelveticaNeue, "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
color: #777;
font-size: 13px;
}
#vertical_line {
position: absolute;
left: 69%;
bottom: 12%;
top: 12%;
border-left: 1px solid #c1c1c1;
}
.pic_owner {
top: 15%;
left: 3%;
width: 25%;
height: auto;
position: absolute;
border: white 10px solid;
border-radius: 10px;
}
.description_owner {
display: block;
position: absolute;
top: 8%;
left: 34%;
width: 33%;
line-height: 21px;
}
#more {
display: block;
font-weight: 400;
}
#heading {
color: #333;
font-family: HelveticaNeue, "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-size: 40px;
}
.social {
position: absolute;
top: 8%;
left: 72%;
right: 6%;
line-height: 21px;
}
.socialButton {
-webkit-appearance: button;
top: 10px;
width: 90%;
padding: 6%;
position: relative;
border: none;
color: white;
font-size: 16px;
cursor: pointer;
text-align: center;
text-decoration: none;
margin-bottom: 5px;
}
.fa:hover {
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
opacity: 0.9;
}
.fa-instagram {
background: #E1306C;
}
.fa-linkedin {
background: #007bb5;
}
.fa-facebook {
background: #3B5998;
}
.fa-github {
background: #141414;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/styleSheets/styleHomePage.css"/>
<script type="text/javascript" src="jss/homepage.js"></script>
</head>
<body>
<div id="content">
<img class="pic_owner" src="Resources/picture_aayush.jpg">
</img>
<div class="description_owner">
<h1 id="heading">DEVELOPER</h1>
<p><strong id="desc_detail">Loading.....</strong></p>
<p id="more">Loading....</p>
</div>
<span id="vertical_line"></span>
<div class="social">
<p id="addition"></p>
 
<a href="" class="socialButton fa fa-linkedin"
type="button">  Aayush Singla</a>
 
</div>
</div>
</body>
</html>
Please bare with me if this is a simple question. I am stuck on this from kinda week now.
update:
It looks to me like if you want both the header and the page content to scroll together, you need a container element with overflow: auto on it.
<!-- HTML -->
<div id="ContainerBig">
<div id="Container">
<div id="ContainerMain"></div>
<div id="containerPage"></div>
</div>
</div>
//CSS
#ContainerBig {
left: 0;
top: 0;
bottom: 0;
height: 100%;
width: 100%;
position: absolute;
}
#Container {
position: absolute;
top:10%;
left: 10%;
right: 10%;
width: 80%;
height: 80%;
overflow: auto;
}
#ContainerMain {
height: 10%;
max-height: 77px;
border-radius: 5px;
background-color: #262523;
border: 1px solid #111;
}
#containerPage {
height: auto;
padding-bottom: 5%;
margin-bottom: 10%;
display: block;
overflow: auto;
background-color: #fff;
border-radius: 0 0 5px 5px;
}
Here's a working pen: https://codepen.io/jacob_124/pen/ZEQoBxE?editors=1100
Note: It's a bad idea to rely on position absolute for layouts. Especially for when you don't have to. This layout could be easily accomplished with relative positioning.
Here's a pen with position relative: https://codepen.io/jacob_124/pen/BajxQbv
Related
Basically, my CSS code is working for the top right and top left buttons for close and minimize but won't work for the individual mod menu options, if you run the code below you'll see the buttons working except for the ones in the bottom right panel.
In Chrome dev tools It works when setting the hover state active but that's when it only works, My mouse is not actually hovering the object. I used z-index: 255; and it still wouldn't work.
This is for a Tauri app but should still work the same as a webpage
html,body {
margin: 0;
font-family: monospace;
width: 100%;
height: 100%;
overflow: hidden;
}
#Background{
z-index: -5;
position:absolute;
width: 100%;
height: 100%;
background-color: black;
}
#titleBar{
background-color: #444;
width: 100%;
height: 32px;
float: top;
z-index: -1;
}
#mainWindow{
background-color: #555;
width:62%;
height: calc(96% - 12px);
top: 12px;
margin-left: -12px;
position: absolute;
border-radius: 8px;
z-index: -1;
border-radius: 8px;
}
#modsWindow{
background-color: #555;
width: 40%;
height: calc(96% - 12px);
position: absolute;
left: 62%;
top: 12px;
margin-left: 1.5px;
z-index: -1;
}
#titleBar #close{
margin-right: 0 !important;
}
#titleBar #folder{
float: left !important;
}
#titleBar #title{
width: 50%;
height: 100%;
color: white;
background-color: transparent;
position: relative;
left: 25%;
text-align: center;
font-weight: bold;
user-select: none;
font-size: 2.1em;
}
#titleBar .button{
width: 32px;
height: 32px;
float: right;
border: none;
background-color: #333;
color: white;
transition: all 0.25s;
}
#titleBar .button:hover{
background-color: #555;
}
/* Mod Tab */
#modsWindow *{
width: 100%;
height: 5%;
color: white;
text-align: center;
font-size: auto;
word-wrap: break-word;
overflow: hidden;
font-size: 0.75em;
font-weight: bold;
background-color: transparent;
transition: all 0.25s;
border: none;
}
#modsWindow .ACTIVE{
color: green !important;
}
#modsWindow .INACTIVE{
color: red !important;
}
#modsWindow .ACTIVE:hover, #modsWindow .INACTIVE:hover{
background-color: #222;
color: white !important;
}
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="index.css">
<script type="module" src="index.js"></script>
<body>
<div data-tauri-drag-region id="titleBar">
<!-- Close,Minimize, Title & File Buttons-->
<button id="close" class="button">X</button>
<button id="minimize" class="button">-</button>
<button id="folder" class="button">F</button>
<div data-tauri-drag-region id="title">DBFZ Mod Manager</div>
<!-- <div id="title">DBFZ Mod Manager</div> -->
</div>
<div id="Background">
<div id="mainWindow">
</div>
<div id="modsWindow">
<button id="modName" class="ACTIVE">MODNAME [ACTIVE]</button>
<button id="modName" class="INACTIVE">MODNAME [INACTIVE]</button>
</div>
</body>
</html>
In css when you want to hover a child, parent z-index should not be negative
Your problem is here :
#Background{
z-index: -5;
}
change it to
#Background{
z-index: 1;
}
I think it's important to note that I'm a complete beginner in webdev.
However, the point is that I can't yet figure out how to start a new section after using position: absolute; on the previous one.
Each time I start writing something new, it ends up either on the top of the page, or on the center of the page.
I have tried using flexbox and grid, however that didn't help me either.
So I wonder how do I do it without affecting the layout of the webpage?
It is not even a question that I have to learn more about CSS positioning.
I know it looks a bit messy.
Here's the code:
:root {
/* colors */
--clr-white: rgb(235, 255, 209);
--clr-black: rgb(10, 10, 9);
--clr-gray: rgb(30, 30, 30);
--clr-green: rgb(173, 255, 47);
--clr-orange: rgb(255, 123, 25);
--ff-main: 'Montserrat', sans-serif;
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
list-style: none;
}
body {
background-color: var(--clr-black);
color: var(--clr-white);
font-family: var(--ff-main);
font-size: 1.1rem;
/* line-height: 1.5; */
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 1rem 3rem;
z-index: 1000;
}
nav {
display: flex;
position: sticky;
align-items: center;
justify-content: space-around;
top: 100%;
}
nav li {
line-height: 1.5;
}
main {
display: flex;
justify-content: space-around;
align-items: center;
}
a {
text-decoration: none;
color: inherit;
}
.showcase {
position: absolute;
right: 0;
width: 100%;
min-height: 100vh;
display: flex;
justify-content: space-around;
align-items: center;
z-index: -2;
}
.showcase video
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.9;
z-index: -1000;
}
.background {
background-size: cover;
/* overflow: hidden; */
/* background-repeat: no-repeat; */
width: 100%;
filter: saturate(100%) contrast(100%) blur(0.3rem) hue-rotate(111deg);
z-index: -11;
}
.btn {
border: none;
border-radius: 6px;
background-color: var(--clr-green);
padding: 0.3rem 0.6rem;
color: var(--clr-black);
cursor: pointer;
}
.button {
border: 1px solid var(--clr-orange);
border-radius: 6px;
padding: 0.3rem 0.6rem;
color: var(--clr-green);
background-color: inherit;
cursor: pointer;
font-size: 1.1rem;
font-weight: 300;
transition: all 0.6s ease 0s;
}
.button:hover {
border: 1px solid var(--clr-green);
background-color: var(--clr-green);
color: var(--clr-black);
}
.heading {
font-size: 3rem;
font-weight: 900;
letter-spacing: 0.3rem;
}
.title {
position: static;
bottom: 1%;
font-weight: 100;
letter-spacing: 0.3rem;
right: 37.5%;
width: 100%;
}
.text {
position: absolute;
bottom: 9%;
/* left: 50%; */
right: 43%;
font-size: 1.1rem;
letter-spacing: 0.3rem;
font-weight: 100;
font-size: 700;
}
.uppercase {
text-transform: uppercase;
}
.touch {
position: absolute;
top: 27%;
left: 11%;
filter: blur(0.1rem);
}
.top-left {
position: absolute;
top: 11%;
left: 9%;
font-size: 11rem;
font-weight: 900;
}
.mid-left {
position: absolute;
top: 33%;
left: 33%;
font-size: 4.3rem;
font-weight: 400;
}
.mid-center {
position: absolute;
top: 42%;
left: 11%;
font-weight: 600;
}
.center {
position: absolute;
top: 44%;
font-size: 9rem;
font-weight: 900;
left: 38%;
}
.mid-right {
position: absolute;
top: 56%;
right: 18%;
font-weight: 200;
font-size: rem;
}
.down-right {
position: absolute;
top: 66%;
right: 11%;
font-size: 11rem;
font-weight: 900;
}
.main-content {
display: flex;
justify-content: center;
align-items: center;
}
.down {
position: absolute;
bottom: 3%;
left: 46.6%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/styles.css">
<title>stombic</title>
</head>
<body>
<!-- BACKGROUND -->
<section class="showcase">
<video muted autoplay class="background">
<source src="videos/1.mp4" type="video/mp4" />
</video>
<!-- MAIN -->
<main>
<section class="left">
<div class="uppercase">
<h1 class="heading"><span class="top-left">art</span> <span class="mid-left">is</span>
<span class="mid-center">where</span>
<span class="center">work</span>
<span class="mid-right">meets</span> <span class="gradient down-right">love</span></h1>
<p class="text">created to create.</p>
<button type="button" class="button down">Learn More</button>
</div>
</section>
<!-- <section>
<img src="images/splash.png" class="top-left"/>
<img src="images/hands.png" class="down-right"/>
</section> -->
</main>
</section>
</body>
</html>
This is one of the longer codes I've seen on this platform. If anyone wants the files it is not a problem for me to send it.
make the two absolute position sections inside a container that has a relative position.
You can use position: absolute on a container.
For example, use position: absolute on the main and then position the sections 'normally'. But if you need sibling sections to go next to each other and not overlap, you'd not use position: absolute on one of them.
I'd highly recommend Kevin Powell's Youtube Channel, where he makes great videos about CSS and demystifies positioning.
As u can see, my curtain is open every time u first run up the site. The curtain opens when u click Account and closes when u click it again. I need to have the curtain closes and open only when someone clicks Account. Then, I need also that, when u click Account, the world became of the gradient of the background and the background himself get white.
function open_ac_c() {
document.getElementById("ac_c").style.height = "100%";
document.querySelector('button.account_open_button').style.display = "none"
document.querySelector('button.account_close_button').style.display = "block"
}
function close_ac_c() {
document.getElementById("ac_c").style.height = "0%";
document.querySelector('button.account_open_button').style.display = "block"
document.querySelector('button.account_close_button').style.display = "none"
}
body {
background-color: #6f0da8;
margin: 0;
}
.topnav {
background: linear-gradient(90deg, #2c8a86, #1dada7, #04d6ce, #00fff6);
padding: 30px;
float: center;
}
.home {
background-color: transparent;
float: center;
position: absolute;
left: 0px;
top: 0px;
padding: 18.5px;
color: white;
font-size: 20px;
}
.home:hover{
background-color: #048b59;
}
.account{
background-color: transparent;
float: center;
position: absolute;
left: 86px;
top: 0px;
padding: 18.5px;
color: white;
font-size: 20px;
}
body {
font-family: 'Lato', sans-serif;
}
.ac_curtain {
position: fixed;
top: 1;
left: 100px;
background-color: transparent;
transition: 1s;
overflow: hidden;
}
.ac_curtain a {
padding: 8px;
text-decoration: none;
font-size: 20px;
color: #ffffff;
display: block;
}
.account_open_button {
position: absolute;
background-color: Transparent;
background-repeat: no-repeat;
border: none;
position: absolute;
left: 85px;
top: 1px;
padding: 28px 53px;;
}
.account_close_button {
position: absolute;
background-color: Transparent;
background-repeat: no-repeat;
border: none;
position: absolute;
left: 85px;
top: 1px;
padding: 30px 53px;;
}
<div class="topnav">
<dive class="home">Home</dive>
<dive class="account">Account</div>
</div>
<div id="ac_c" class="ac_curtain">
<div class="overlay-content">
Log in
Log out
Dashboard
Settings
</div>
</div>
<button onclick="open_ac_c()" class="account_open_button"></button>
<button onclick="close_ac_c()" class="account_close_button"></button>
On initial load, as the height of ac_curtain is not defined, hence it has a default height and thus it gets displayed on the initial load. Please add height: 0 in the ac_curtain class.
function open_ac_c() {
document.getElementById("ac_c").style.height = "100%";
document.querySelector('button.account_open_button').style.display = "none"
document.querySelector('button.account_close_button').style.display = "block"
}
function close_ac_c() {
document.getElementById("ac_c").style.height = "0%";
document.querySelector('button.account_open_button').style.display = "block"
document.querySelector('button.account_close_button').style.display = "none"
}
body {
background-color: #6f0da8;
margin: 0;
}
.topnav {
background: linear-gradient(90deg, #2c8a86, #1dada7, #04d6ce, #00fff6);
padding: 30px;
float: center;
}
.home {
background-color: transparent;
float: center;
position: absolute;
left: 0px;
top: 0px;
padding: 18.5px;
color: white;
font-size: 20px;
}
.home:hover{
background-color: #048b59;
}
.account{
background-color: transparent;
float: center;
position: absolute;
left: 86px;
top: 0px;
padding: 18.5px;
color: white;
font-size: 20px;
}
body {
font-family: 'Lato', sans-serif;
}
.ac_curtain {
position: fixed;
top: 1;
left: 100px;
background-color: transparent;
transition: 1s;
overflow: hidden;
height: 0;
}
.ac_curtain a {
padding: 8px;
text-decoration: none;
font-size: 20px;
color: #ffffff;
display: block;
}
.account_open_button {
position: absolute;
background-color: Transparent;
background-repeat: no-repeat;
border: none;
position: absolute;
left: 85px;
top: 1px;
padding: 28px 53px;;
}
.account_close_button {
position: absolute;
background-color: Transparent;
background-repeat: no-repeat;
border: none;
position: absolute;
left: 85px;
top: 1px;
padding: 30px 53px;;
}
<div class="topnav">
<div class="home">Home</div>
<div class="account">Account</div>
</div>
<div id="ac_c" class="ac_curtain">
<div class="overlay-content">
Log in
Log out
Dashboard
Settings
</div>
</div>
<button onclick="close_ac_c()" class="account_close_button"></button>
<button onclick="open_ac_c()" class="account_open_button"></button>
The website I am designing displays a pop-up for age verification upon entering. This pop up looks great on a desktop browser but is not responsive on a mobile device. Currently on a phone it shows very large, probably the size it would normally display on a desktop. How do I make this proportionate to mobile devices? Phones and tablets too. Any help would be great!
CSS
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body{
font-family: helvetica;
font-size: 100%;
margin: 0;
padding: 0;
font-weight: 400;
font-family: Raleway;
line-height: 1.4;
}
body {
font-size: 100%;
#media (min-width: 32em) {
font-size: 110%
}
#media (min-width: 54em) {
font-size: 111%
}
#media (min-width: 74em) {
font-size: 115%
}
#media (min-width: 96em) {
font-size: 135%
}
}
a.btn{
background-color: #74AA50;
color: #fff;
text-decoration: none;
display:inline-block;
letter-spacing: 0.1em;
padding: 0.5em 0em;
&.btn-beta{
background-color: #dba952;
}
}
.decor-line {
position: relative;
top: 0.7em;
border-top: 1px solid #ccc;
text-align:center;
max-width: 40%;
margin: 0.5em auto;
display: block;
padding: 0.1em 1em;
color: #ccc;
span{
background: transparent;
color: #ccc;
position: relative;
top: -.7em;
padding: 0.5em;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 900;
}
}
.overlay-verify{
background: rgba(0,0,0,0.75);
position:fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: 100;
}
.box{
background:url(https://static1.squarespace.com/static/5ef08aa918c34c5e1ee24d37/t/5efa11cff7a1d03adb8ac000/1593446880079/44-IMG_6788+copy.jpg) 50% 50%;
background-size: cover;
color: #fff;
img{
position: relative;
z-index: 999;
width: 12em;
}
position: fixed;
left: 0;
right: 0;
top: 20%;
bottom: 0;
margin: 0 auto;
z-index: 999;
width: 1000px;
height: 525px;
display:table;
.box-left, .box-right{
width: 100%;
height: 525px;
position: relative;
text-align: center;
padding: 5%;
#media (min-width: 54em){
display:table-cell;
vertical-align:middle;
width: 50%;
}
p{
//padding: 5%;
position: relative;
z-index: 99;
}
}
.box-left{
&:after{
content: '';
position: absolute;
z-index: 0;
top: 0;
left: 0;
width: 100%;
}
}
.box-right{
text-align: center;
h3 {
color: #fff;
text-transform: uppercase;
letter-spacing: 0.07em;
border-bottom: 1px solid #eee;
padding-bottom: 1em;
margin: 0 auto;
}
p{
color: #fff;
}
small{
color: #fff;
}
.btn{
font-weight: 600;
letter-spacing: 0.2em;
padding: 0.9em 1em 0.7em;
margin: 1em auto;
display: block;
}
}
}
#agePopUp a {
background-color: black;
color: white;
padding: 10px 20px;
margin-top: 10px;
display: inline-block;
}
.box,.overlay-verify{display:none}
Header JQuery Script
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script> jQuery(document).ready(function($){
if (sessionStorage.getItem('advertOnce') !== 'true') {
//Show Box on Start-Up
$('.box').show();
$('.overlay-verify').show();
}else{
$('.box').hide();
$('.overlay-verify').hide();
}
//Enter Button
$('#refresh-page').on('click',function(){
$('.box').hide();
$('.overlay-verify').hide();
sessionStorage.setItem('advertOnce','true');
});
//Exit Button
$('#reset-session').on('click',function(){
$('.box').show();
sessionStorage.setItem('advertOnce','');
});
});
</script>
<link href='https://fonts.googleapis.com/css?family=Raleway:600,900,400' rel='stylesheet' type='text/css'>
<main>
<article class="box">
<div class="box-left">
<img src="https://static1.squarespace.com/static/5ef08aa918c34c5e1ee24d37/t/5efc646a19c9962072e60679/1593599082426/SBR_centered+copy+-+white.png">
</div>
<div class="box-right">
<h3>Welcome</h3>
<p>By clicking enter, I certify that I am over the age of 18.</p>
ENTER
<span>OR</span>
EXIT
<small>Always enjoy responsibily.</small>
</div>
</div>
</article>
<div class="overlay-verify"></div>
</main>
You need to set the viewport.
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
The width property controls the size of the viewport, the initial-scale property controls the zoom level when the page is first loaded and user-scalable properties control how users are allowed to zoom the page in or out.
You might want to read more about the Viewport meta tag here.
I have simple HTML 5 video player, I have a function which opens a pop up when the current time is 0:07s, unfortunately, the pop on a small device flow out of a div.
Problem in graphic:
I want the popup to be centered in inside a video player in all devices like this.
Here is Plunker of what I am trying to do: HTML 5 Video Player
Here is HTML
<div class="video-container">
<div class="box1"></div>
<div class="box2"></div>
<video id="video1" class="video-js vjs-default-skin" controls autoplay="true">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="lightbox popUpQuestion1">
<div class="row row-no-padding">
<div class="product-left-col">
<div class="product-main-pic">
<div id="imgContent">
<!-- Sinon si pas de coloris et pas de default Sku
-> Affiche le premier SKU. -->
<img id="popinMainPic" src="http://www.sephora.pl/media/catalog_ProductCatalog/m11470681_P2264_princ_medium.jpg">
</div>
</div>
</div>
<div class="product-right-col">
<div class="prodcut-title">
<H1>Rose Deep Hydration Moisturizer</h1>
</div>
<div class="description-text">
An ultra-hydrating gel cream powered
by hyaluronic acid and time-release
technology for petal-soft skin.
</div>
<div class="product-price">
<span>299,00 zł</span>
</div>
<a target="_blank" href="http://www.sephora.pl/Makijaz/Oczy/Kredki-do-oczu-i-khol/Mini-kredka-do-powiek/P2255003?skuId=315720">
<div class="buy-button animates-in show">KUP TERAZ </div>
</a>
</div>
</div>
</div>
</div> <!-- End of Container -->
Here is css I have so far
body{
background-color: #f0f0f0;
overflow-x: hidden;
margin: 0em 0em;
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline;
}
h1, h2, h3, h4, h5, h6{
margin: 0;
font-weight: bold;
}
p{
margin: 0;
}
a{
text-decoration: none;
}
video{
width: 1266px;
height: 100%;
left: 0px;
top: 0px;
margin-left: 0px;
margin-top: 0px;
}
img{
float: left;
margin-right: 25px;
}
.container{
width: 100%;
margin: 0px auto;
overflow: hidden;
margin-top: 50px;
}
.descArea{
background-color: #fff;
box-shadow: 0 0 3px #c8c8c8;
padding: 15px;
box-sizing: border-box;
}
/* .videoArea{
position: relative;
} */
.video-container{
position: relative;
height: 100%;
width: 100%;
background-color: #000;
margin:0 auto;
}
.box1{
position: absolute;
background-color: rgba(40, 169, 220, 0);
width: 200px;
height: 200px;
top: 50px;
left: 630px;
cursor: pointer;
}
.box2{
position: absolute;
background-color: rgba(207, 50, 53, 0);
width: 200px;
height: 200px;
top: 70px;
left: 150px;
cursor: pointer;
}
.lightbox{
display: none;
}
.longBtns{
display: block;
}
.buy-button {
background-color: #555;
color: #fff;
font-size: 2em;
cursor: pointer;
width: 182px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
/* right: 10px; */
/* bottom: 41px; */
}
.product-modal{
background-color: #f5f5f5;
font-size: 1.2em;
width: 65em;
height: 46.3em;
}
.row-no-padding{
display: flex;
}
.sku-label-brand{
font-family: georgia;
letter-spacing: .2em;
}
.description-text {
margin-top: 1%;
line-height: 1.4;
/* font-size: 1.7em; */
/* width: 50%; */
font-size: 24.444px;
font-family: "Century Gothic";
color: rgb(0, 0, 0);
line-height: 1.2;
text-align: left;
margin-bottom: 60px;
}
.product-right-col{
width: 60%;
}
.product-left-col{
width: 50%;
margin-right: 45px;
}
#popinMainPic{
width: 100%;
height: 100%;
}
.sku-link{
margin-bottom: 20px;
}
.product-price{
margin-bottom: 20px;
font-size: 36px;
font-family: "Century Gothic";
color: rgb(0, 0, 0);
font-weight: bold;
line-height: 1.2;
text-align: left;
}
.prodcut-title > h1{
font-size: 30.556px;
font-family: "Century Gothic";
color: rgb(0, 0, 0);
font-weight: bold;
line-height: 1.2;
text-align: left;
margin-bottom: 14px
}
.vjs-marker{
width: 6px !important;
border-radius: 30%;
background-color: white !important;
margin-left: -3.5px;
left: 29.2002%;
height: 6px !important;
border-radius: 100px !important;
bottom: 11px;
-webkit-border-radius: 100px !important;
-moz-border-radius: 100px !important;
-ms-border-radius: 100px !important;
-o-border-radius: 100px !important;
}
.video-js .vjs-big-play-button {
display: none !important;
}
.vjs-has-started .vjs-control-bar {
background: linear-gradient(to bottom,rgba(0,0,0,.1) 0,rgba(0,0,0,.69) 99%,rgba(0,0,0,.7) 100%);
}
.video-js{
width: 100% !important;
}
.video1-dimensions {
height: 100% !important;
width: 100% !important;
}
.featherlight .featherlight-content{
transform: scale(0.7);
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
-ms-transform: scale(0.7);
-o-transform: scale(0.7);
}
I have tried to add overflow:hidden to parent div still the same.
What is wrong with my code? any idea or help will be apreciated.
featherlight basically provides you a window sized popup that has position: fixed and is set to be placed at center horizontally and vertically. If you look at the CSS of featherlight, then you'll see it has top: 0; bottom: 0; left: 0; right: 0;. This is the intended behaviour of this plugin.
Moreover, the way this plugin works is by cloning your modal content to its own div and then displaying it. Hence giving you little less control over its positioning.
To override this behaviour, you need to manually calculate top, left and height of the video and then apply this to .featherlight by javascript. This would force the featherlight modal to be displayed over the video only irrespective of the the device width/height.
Hope this helps.