I need help for the following:
I am using grid in "small-container" div, when screen size is below 768px I want to have one of its child ( "vod-player" ) to take full screen width and not the width of 8 columns of grid, while other children will span across the 8 columns.
index.html:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Wireframe</title>
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<div class="big-container">
<div class="header">Header</div>
<div class="small-container">
<div class=vod-player>Vod Player 16x9 8cols</div>
<div class=highlights>Highlights 4cols, height=vodplayer height</div>
<div class=video-information>
<div class="video-name">Video Name</div>
<div class="details-section">Details Section</div>
</div>
<div class=feedback>Feedback</div>
<vr class=rule>
</div>
<div class="footer">2019</div>
</div>
</body>
</html>
style.css:
/* html {
margin: 0;
border: 2px solid black;
height: 100%;
}
body {
margin: 0;
border: 2px solid yellow;
height: 100%;
} */
.big-container {
max-width: 1920px;
border: 2px solid red;
width: 100%;
margin: 0 auto;
}
.header {
width: 100%;
max-width: 1920px;
height: 54px;
border: 2px solid red;
margin: 0;
margin-bottom: 24px;
background-color: #263238;
}
.small-container {
display: grid;
/* max-width:1800px; */
max-width:95%;
margin: auto;
grid-column-gap: 30px;
grid-row-gap: 24px;
margin-right: 60px;
margin-left: 60px;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: auto auto auto;
border: 2px solid red;
/* grid-auto-rows: 766px; */
}
.vod-player {
grid-area: vodplayer;
max-height: 715px;
border: 2px solid red;
grid-column-start: 1;
grid-column-end: 9;
grid-row-start: 1;
grid-row-end: 2;
padding-top: 56.25%;
background-color: #f4511e;
}
.highlights {
grid-area: highlights;
max-height: 715px;
border: 2px solid purple;
grid-column-start: 9;
grid-column-end: 13;
grid-row-start: 1;
grid-row-end: 2;
background-color: #546e7a;
}
.video-information {
grid-area: info;
max-height: 333px;
border: 2px solid green;
grid-column-start: 1;
grid-column-end: 9;
grid-row-start: 2;
grid-row-end: 3;
background-color: #4caf50;
display: grid;
grid-column-gap: 24px;
grid-row-gap: 24px;
margin-right: 0px;
margin-left: 0px;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: auto auto;
border: 2px solid red;
/* margin-bottom: 80px; */
}
.video-name {
grid-column-start: 1;
grid-column-end: 9;
grid-row-start: 1;
grid-row-end: 2;
height: 66px;
border: 1px solid green;
}
.details-section {
grid-column-start: 1;
grid-column-end: 9;
grid-row-start: 2;
grid-row-end: 3;
height: 243px;
border: 1px solid green;
}
.feedback {
height: 214px;
grid-area: feedback;
/* max-width: 580; */
max-height: 214;
grid-column-start: 9;
grid-column-end: 13;
border: 2px solid pink;
grid-row-start: 2;
grid-row-end: 3;
background-color: #00bcd4;
}
.footer {
height: 17px;
width: 285px;
color: #1c1c1d;
font-family: "Proxima Nova";
font-size: 14px;
font-weight: 300;
line-height: 17px;
margin: auto;
text-align: center;
border: 2px solid red;
}
vr {
grid-area: rule;
grid-column-start: 1;
grid-column-end: 9;
grid-row-start: 3;
grid-row-end: 4;
margin-top: 16px;
margin-bottom: 40px;
box-sizing: border-box;
height: 1px;
width: 100%;
border: 1px solid #cbd2da;
}
@media (max-width: 1440px) {
.small-container {
grid-column-gap: 30px;
margin-right: 60px;
margin-left: 60px;
}
}
@media (max-width: 1280px) {
.small-container {
grid-column-gap: 30px;
margin-right: 30px;
margin-left: 30px;
}
}
@media (max-width: 1024px) {
.small-container {
grid-column-gap: 30px;
margin-right: 30px;
margin-left: 30px;
}
}
@media (max-width: 960px) {
.small-container {
grid-column-gap: 30px;
margin-right: 30px;
margin-left: 30px;
}
}
@media (max-width: 768px) {
.header {
display: none;
}
.small-container {
grid-column-gap: 30px;
grid-row-gap: 0px;
margin-right: 30px;
margin-left: 30px;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: auto auto auto auto auto;
}
.vod-player {
grid-column-start: 1;
grid-column-end: 9;
grid-row-start: 1;
grid-row-end: 2;
}
.highlights {
grid-column-start: 1;
grid-column-end: 9;
grid-row-start: 2;
grid-row-end: 3;
}
.video-information {
grid-column-start: 1;
grid-column-end: 9;
grid-row-start: 3;
grid-row-end: 4;
margin-bottom: 0px;
}
.feedback {
grid-column-start: 1;
grid-column-end: 9;
grid-row-start: 4;
grid-row-end: 5;
}
.rule {
grid-column-start: 1;
grid-column-end: 9;
grid-row-start: 5;
grid-row-end: 6;
}
vr {
margin-top: 20px;
margin-bottom: 20px;
}
}
@media (max-width: 360px) {
.header {
display: none;
}
.small-container {
grid-column-gap: 20px;
margin-right: 20px;
margin-left: 20px;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto auto auto auto auto;
}
.vod-player {
grid-column-start: 1;
grid-column-end: 5;
grid-row-start: 1;
grid-row-end: 2;
}
.highlights {
grid-column-start: 1;
grid-column-end: 5;
grid-row-start: 2;
grid-row-end: 3;
}
.video-information {
grid-column-start: 1;
grid-column-end: 5;
grid-row-start: 3;
grid-row-end: 4;
}
.feedback {
grid-column-start: 1;
grid-column-end: 5;
grid-row-start: 4;
grid-row-end: 5;
}
}
expected output:
above 768px: ( blue bar is "vod-player" and orange "highlights" ) grid: https://ibb.co/dtHdvt2
below 768px: grid: https://ibb.co/DfN83mC
Try something like this:
.vod-player {
width: 100vw;
z-index: 2;
margin-left: -30px;
}