CSS Grid- Iframes in nested grid

Hello, im currently working on this Proyect

I have it divided into 1 grid area “wrap” and a “nav-var” (position:fixed) area,wich floats arround the page

inside the grid area there is an element thats a grid area itself “freatures”. Whitin this area there are two divs one contains a h1 and a p and the other one an Iframe from youtube with its widht and height set to 100%

the i frame is staying at the top-left area of the grid, some how… im doing something wrong?

here is my code pen code so you guys can see it. CodePEN

Here is the code for those who dont want to go to codePen

HTML

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Landing Page</title>
  <meta name="description" content="Landing Page">
  <meta name="author" content="Big Clown">

  <link rel="stylesheet" href="styles.css">

</head>

<body>
 
	<header id="header">
		<nav id="nav-var">
			<img id="header-img"             src="https://www.nvidia.com/etc/designs/nvidiaGDC/clientlibs_base/images/NVIDIA-Logo.svg" alt="logo">
			<div id="nav-link">
				<a href="#freatures"  class="nav-links">Freatures</a>
				<a href="#model"  class="nav-links">Models</a>
				<a href="#pricing"  class="nav-links">Pricing</a>
			</div>
		</nav>
	</header>
<div id="wrap">
	<div id="freatures">
	
		
		<div id="producto">
				<h1 id="gpu-1-title" class="gpu-header"> GEFORCE RTX 2080 Ti </h1>
				<p id="gpu-1-info" class="gpu-info"> La tarjeta gráfica más nueva de NVIDIA revoluciona
														el realismo y el rendimiento de los juegos. Su poderosa
														arquitectura GPU NVIDIA Turing™, además de las tecnologías
														innovadoras y sus 11 GB de memoria GDDR6 ultrarrápida de
														próxima generación la convierten en la GPU de juegos más 
														avanzada del mundo.
				</p>
		</div>
		<div id="wrapper-iframe">
			<iframe width="90%" height="100%" src="https://www.youtube.com/embed/02h_dNl-C-s" class="video"  allowfullscreen> </iframe> 
		</div>
	</div>

	<div id="pricing"> 
		<div id="gpu-1-price" class="gpu-price black-ba"></div>
	</div>
	<div id="buying"> 
		<div id="info-buy black-ba">sent us an email to buy it</div>
		<form id="form" class="black-ba" >
			<input type="email" id="email" class="input-form" name="email" value="Email" >
 
		</form>
	</div>
 <footer id="footer">im afooter
 </footer>
 

</div>
</body>
</html>

CSS


body {
	background-color:#8c8c8c;
	text-align: center;

}

/* nav-var start -  position:fixed; not part of the main grid area!

IGNORE- WORKS AMAZING -


 */

#nav-var { /*big container*/
	display:grid; 
	grid-template-columns: 25% 1fr;
	grid-template-rows:1fr;
	background-color:#145A32 !important;
	height:10%;
	width:100%;
	border-radius:5px;
	position:fixed;
	margin:-10px;
	align-content:center;
	justify-content:center;
	grid-template-area: '#header-img  #nav-link';
	min-height:5vw;
}
#nav-link { /*nav-links container*/
	grid-column: 2 / 4 ;
	align-content:center;
	justify-content:center;
	margin:center;
	
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
	
}

#header-img {
	grid-column: 1 / 2 ;
	margin:auto;
}

.nav-links {
	justify-self :center;
	padding:2.5%;
	font-size:2vw;
	font-weight:900;	
	font-family: arial;
	background-color:#114D2B;
	border-radius:5px;
	color:black;
	text-decoration:none !important;
	transition: background-color 0.5s ease;	
	
}
.nav-links:hover {
	background-color:#145A32; /*hover color*/
}

/* nav-var end -  position:fixed; not part of the main grid area! */



#wrap {
	width:100%;;
	height:100%;
	display:grid;
	grid-template-columns: 10% 1fr 10%;
	grid-template-rows: 1fr 1fr 1fr ;
	grid-column-gap: 10px;
	grid-row-gap: 30px;
	padding-top:5%;
	grid-template-areas: " . freaturess . "
						 " . pricingg . "
						 " . buyingg . "
						 " . footerr . ";
	
	/* Main wrapper 
		divides
		page in 4
		padding-top=5%
		its for 
		the nav-var 
		position
		be visible
		*/
}


header {
	grid-column: 1 / 4;
	grid-area: headerr;
	height:90px;	
}
#freatures {
			
		grid-area: freaturess;
		display:grid ;
		height: 100%;
		width: 100%;
		justify-content: stretch;
		grid-template-columns:15% 1fr 1fr 15%;
		grid-template-rows:1fr 1fr;
		box-shadow: 0px -6px 50px 5px #000000;
		background-color:#633974;
		border-radius:10px;
		grid-template-areas: " . productoo productoo .  "
							 " . wrapper-iframe wrapper-iframe . " ;
		
		/* first area	
			of the main wrapper
			its a grid within a grid
			*/
	


}							

#pricing {

		grid-area:pricingg;
		
}

/* empty one so far, to be filled with shit */

#buying {

		grid-area:buyingg;
}
/* empty one so far, to be filled with shit */

footer {

	grid-area: footerr;
	}
/* empty one so far, to be filled with shit */
	
}
.wrapper-iframe{
	height:100%; /* to get parent height*/
	width:100%;	/* to get parent width*/
	grid-area: wrapper-iframe; /* area name */
}

#producto {	
	grid-area: productoo; /* area-name */
	height:100%;	/* to get parent height*/
	width:100%;	/* to get parent width*/
}


	

wrapper-iframe is a id not a class (#wrapper-iframe).

still the same problem

You have a stray closing } before the selector.

hoyl shit i love you

No problem glad to help, happy coding!

1 Like