响应式网格中的空列
Empty columns in responsive grid
我有点进退两难。首先，这是一个 [codepen][1]。我的问题是，我有一个 4 列的网格结构，左列保留用于副标题，内容出现在其他 3 列中。
我有一个名为 'social' 的部分，我希望在 3 列中每列显示 1 张个人资料图片。问题是，当我添加一行新图像时，它们从左栏（为副标题保留的栏）开始。有没有办法通过添加一个空列来阻止这种情况？我尝试使用 ，但它似乎只是弄乱了我的格式。
另一个问题是，当网站变成移动设备时，我希望图像连续显示 2 个。添加空白列后，这将如何影响它们随后在移动设备中的布局方式？会不会有空格space？
抱歉，如果这让您感到困惑。我对这一切还很陌生。感谢您的帮助！
这是 CSS 的一个片段，可以帮到您！
.image-item:nth-child(5n) {
margin-left:25%;
}
https://codepen.io/hoonin_hooligan/pen/rmPBro
这里发生的事情是每第 4 个图像项我们添加一个 "extra" 个 margin-left 图像项来创建你的社交专栏是一个独立于其余部分的独立实体的错觉图像网格。
您无需尝试插入和清空列
像这样添加空列：
<div class="grid-item empty">
</div>
对于问题一:
.empty {
clear: both;
}
问题二...
/* whatever screen width you need */
@media (max-width: 668px) {
.empty {
display: none;
}
}
关于 clear 属性 的信息。
/* CSS Document */
/* Responsive Column Grid */
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.row::after {
content: "";
clear: both;
display: table;
display: table;
}
.l-wrap .heading {
width: 100%;
border-top: 3px solid;
border-top-style: solid;
border-top-color: #9EF2F6;
border-bottom: 3px solid;
border-bottom-style: solid;
border-bottom-color: #9EF2F6;
padding-top: 10px;
padding-bottom: 10px;
margin-bottom: 30px;
}
.l-wrap {
max-width: 1170px;
margin-right: auto;
margin-left: auto;
}
.l-quote {
max-width: 1170px;
margin-right: auto;
margin-left: auto;
}
.l-quote .l-single {
width: 25%;
padding-left: 10px;
padding-right: 10px;
float: left;
}
.four-col-grid .l-double {
width: 75%;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-top: 20px;
margin-bottom: 40px;
float: left;
background-color: #1F2975;
}
.four-col-grid .l-discuss {
width: 75%;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-top: 20px;
margin-bottom: 25px;
float: right;
background-color: #F95899;
}
.four-col-grid .grid-item {
float: left;
width: calc((100% - 20px * 4) / 4);
margin-right: 10px;
margin-left: 10px;
}
.four-col-grid .details {
float: left;
width: calc((100% - 20px * 4) / 4);
}
.four-col-grid:after {
display: table;
clear: both;
content: '';
}
.four-col-grid .image-item {
width: 25%;
float: left;
}
.image-item {
/* width property
padding-right: 10px;
padding-left: 10px; */
float: left;
position: relative;
width: 25%;
}
.image-item img {
flex-shrink: 0;
min-width: 100%;
min-height: 100%;
padding-bottom: 10px;
margin-bottom: 30px;
width: calc((100% - 20px * 4) / 4);
margin-right: 10px;
margin-left: 10px;
}
/* PROFILE HOVER */
/*
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
padding-right: 10px;
padding-left: 10px;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.four-col-grid:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
} */
/* -------- TEXT ELEMENTS -------- */
p span {
display: block;
}
body {
background: #ffffff;
font-size: 22px;
line-height: 32px;
color: #ffffff;
margin: 0;
padding: 0;
word-wrap: break-word !important;
font-family: 'Poppins', sans-serif;
}
h1 {
font-size: 50px;
text-align: center;
color: #1F2975;
font-family: 'Poppins', sans-serif;
letter-spacing: 8px;
line-height: 60px;
}
h2 {
font-size: 20px;
line-height: 34px;
text-align: left;
color: #1F2975;
margin: 0;
padding: 0;
letter-spacing: 2px;
border-top-style: solid;
border-color: #9EF2F6;
}
h3 {
font-size: 20px;
line-height: 34px;
text-align: left;
color: #F95899;
margin: 0;
padding: 0;
letter-spacing: 2px;
font-weight: bold;
}
h4 {
font-size: 20px;
line-height: 34px;
text-align: left;
color: #1F2975;
margin: 0;
padding: 0;
letter-spacing: 2px;
font-weight: bold;
}
h5 {
font-size: 20px;
line-height: 34px;
text-align: left;
color: #F95899;
position: absolute;
width: 100%;
letter-spacing: 2px;
font-weight: bold;
}
p {
text-align: left;
color: #1F2975;
font-size: 12px;
margin: 0px;
line-height: 15px;
}
p2 {
text-align: left;
color: #1F2975;
font-size: 30px;
line-height: 40px;
font-weight: bold;
color: #F95899;
}
p3 {
text-align: left;
color: #1F2975;
font-size: 30px;
line-height: 40px;
font-weight: bold;
color: #1F2975;
}
p4 {
text-align: left;
color: #1F2975;
font-size: 12px;
margin: 0px;
line-height: 15px;
font-weight: bold;
display: block;
}
br {
display: block;
/* makes it have a width */
content: "";
/* clears default height */
margin-top: 15px;
/* change this to whatever height you want it */
}
a {
color: #FFF;
}
.info {
-webkit-column-count: 2;
/* Chrome, Safari, Opera */
-moz-column-count: 2;
/* Firefox */
column-count: 2;
-webkit-column-width: 100px;
/* Chrome, Safari, Opera */
-moz-column-width: 100px;
/* Firefox */
column-width: 100px;
padding-bottom: 30px;
min-height: 200px;
}
/* -------- VIDEO ELEMENTS -------- */
.embed-container {
position: relative;
padding-bottom: 56.25%;
margin-top: 10px;
height: 0;
overflow: hidden;
max-width: 1170px;
margin-bottom: 30px;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#container {
margin: 0 auto;
max-width: 890px;
}
.toggle,
[id^=drop] {
display: none;
}
/* -------- NAV ELEMENTS -------- */
/* Giving a background-color to the nav container. */
nav {
margin: 0;
margin-bottom: 30px;
padding: 0;
background-color: #9EF2F6;
}
#logo {
display: block;
padding: 0 30px;
float: left;
font-size: 20px;
line-height: 60px;
}
/* Since we'll have the "ul li" "float:left"
* we need to add a clear after the container. */
nav:after {
content: "";
display: table;
clear: both;
}
/* Removing padding, margin and "list-style" from the "ul",
* and adding "position:reltive" */
nav ul {
float: right;
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
/* Positioning the navigation items inline */
nav ul li {
margin: 0px;
display: inline-block;
float: left;
background-color: #9EF2F6;
font-weight: bold;
}
/* Styling the links */
nav a {
display: block;
padding: 14px 20px;
color: #1F2975;
font-size: 17px;
text-decoration: none;
}
nav ul li ul li:hover {
background: #000000;
}
/* Background color change on Hover */
nav a:hover {
background-color: #3DE5ED;
}
/* Hide Dropdowns by Default
* and giving it a position of absolute */
nav ul ul {
display: none;
position: absolute;
/* has to be the same number as the "line-height" of "nav a" */
top: 60px;
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
display: inherit;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
width: 170px;
float: none;
display: list-item;
position: relative;
}
/* Second, Third and more Tiers
* We move the 2nd and 3rd etc tier dropdowns to the left
* by the amount of the width of the first tier.
*/
nav ul ul ul li {
flex-shrink: 0;
min-width: 100%;
min-height: 100%
}
position: relative;
top:-60px;
/* has to be the same number as the "width" of "nav ul ul li" */
left:170px;
}
/* Change ' +' in order to change the Dropdown symbol */
li > a:after {
content: ' ';
}
li > a:only-child:after {
content: '';
}
/* Media Queries
--------------------------------------------- */
@media all and (max-width: 667px) {
#logo {
display: block;
padding: 0;
width: 100%;
text-align: center;
float: none;
}
nav {
margin: 0;
}
/* Hide the navigation menu by default */
/* Also hide the */
.toggle + a,
.menu {
display: none;
width: 100%;
}
/* TEXT ELEMENTS */
h1 {
font-size: 30px;
text-align: center;
color: #1F2975;
font-family: 'Poppins', sans-serif;
letter-spacing: 8px;
line-height: 36px;
}
p2 {
text-align: left;
color: #1F2975;
font-size: 25px;
line-height: 30px;
font-weight: bold;
color: #F95899;
}
p3 {
text-align: left;
color: #1F2975;
font-size: 25px;
line-height: 30px;
font-weight: bold;
color: #1F2975;
}
/* RESPONSIVE GRID */
.l-wrap {
width: 100%;
padding-right: 30px;
padding-left: 30px;
}
.l-wrap .heading {
width: 100%;
border-top: 3px solid;
border-top-style: solid;
border-top-color: #9EF2F6;
border-bottom: 3px solid;
border-bottom-style: solid;
border-bottom-color: #9EF2F6;
padding-top: 0px;
padding-bottom: 0px;
margin-bottom: 25px;
margin-top: 25px;
}
.four-col-grid .grid-item {
width: 100%;
float: left;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 10px;
}
.four-col-grid .details {
width: 100%;
float: left;
margin-bottom: 15px;
}
.four-col-grid .l-double {
width: 100%;
padding-bottom: 20px;
padding-top: 20px;
margin-bottom: 40px;
float: left;
background-color: #1F2975;
}
.four-col-grid .l-discuss {
width: 100%;
padding-bottom: 20px;
padding-top: 20px;
margin-bottom: 20px;
float: left;
background-color: #F95899;
}
.info {
width: 100%;
-webkit-column-count: 1;
/* Chrome, Safari, Opera */
-moz-column-count: 1;
/* Firefox */
column-count: 1;
-webkit-column-width: 100px;
/* Chrome, Safari, Opera */
-moz-column-width: 100px;
/* Firefox */
padding-bottom: 30px;
padding-top: 30px;
border-top: 2px;
border-top-color: #9EF2F6;
border-top-style: solid;
}
.image-item {
/* width property
padding-right: 10px;
padding-left: 10px; */
float: left;
position: relative;
width: 50%;
}
.image-item img {
flex-shrink: 0;
min-width: 100%;
min-height: 100%;
padding-bottom: 10px;
margin-bottom: 30px;
width: calc((100% - 20px * 2) / 2);
margin-right: 10px;
margin-left: 10px;
}
.four-col-grid .image-item {
width: 50%;
float: left;
}
/* VIDEO ELEMENTS */
.video-responsive {
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
height: 0;
}
.video-responsive iframe {
left: 0;
top: 0;
height: 100%;
width: 100%;
padding-bottom: 50px;
position: absolute;
}
/* Stylinf the toggle lable */
.toggle {
display: block;
background-color: #9EF2F6;
padding: 14px 20px;
color: #1F2975;
font-size: 17px;
text-decoration: none;
border: none;
}
.toggle:hover {
background-color: #3DE5ED;
}
/* Display Dropdown when clicked on Parent Lable */
[id^=drop]:checked + ul {
display: block;
}
/* Change menu item's width to 100% */
nav ul li {
display: block;
width: 100%;
}
nav ul ul .toggle,
nav ul ul a {
padding: 0 40px;
text-indent: 20px;
}
nav ul ul ul a {
padding: 0 80px;
}
nav a:hover,
nav ul ul ul a {
background-color: #3DE5ED;
}
nav ul li ul li .toggle,
nav ul ul a,
nav ul ul ul a {
padding: 14px 20px;
color: #1F2975;
font-size: 17px;
}
nav ul li ul li .toggle,
nav ul ul a {
background-color: #9EF2F6;
}
/* Hide Dropdowns by Default */
nav ul ul {
float: none;
position: static;
color: #1F2975;
/* has to be the same number as the "line-height" of "nav a" */
}
/* Hide menus on hover */
nav ul ul li:hover > ul,
nav ul li:hover > ul {
display: none;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
display: block;
width: 100%;
}
nav ul ul ul li {
position: static;
/* has to be the same number as the "width" of "nav ul ul li" */
}
}
@media all and (max-width: 330px) {
nav ul li {
display: block;
width: 94%;
}
}
.empty {
clear: both;
}
@media (max-width: 668px) {
.empty {
display: none;
}
}
<nav>
<div id="logo">Logo</div>
<label for="drop" class="toggle">☰ Menu</label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li>
<!-- First Tier Drop Down -->
<label for="drop-1" class="toggle">Reviews</label>
<a href="#">Reviews</a>
<input type="checkbox" id="drop-1" />
<ul>
<li><a href="#">By Rating</a></li>
<li><a href="#">By Name</a></li>
<li><a href="#">By Genre</a></li>
</ul>
</li>
<li>
<!-- First Tier Drop Down -->
<label for="drop-2" class="toggle">Discussion</label>
<a href="#">Discussion</a>
<input type="checkbox" id="drop-2" />
<ul>
<li><a href="#">Start a Discussion</a></li>
<li><a href="#">View Discussions</a></li>
</ul>
</li>
<li><a href="#">Social</a></li>
<li><a href="#">News</a></li>
</ul>
</nav>
<!-- TITLE OF MOVIE -->
<div class="l-wrap">
<div class="heading">
<h1>TRAINSPOTTING 2</h1>
</div>
</div>
<div class="l-wrap">
<!-- YOUTUBE EMBED -->
<div class='embed-container'>
<iframe src='https://www.youtube.com/embed/EsozpEE543w' frameborder='0' allowfullscreen></iframe>
</div>
<div class="four-col-grid">
<div class="grid-item">
<h2>ABOUT</h2>
</div>
<div class="details">
<p4>DIRECTOR</p4>
<p4>Danny Boyle</p4>
<br>
<p4>WRITERS</p4>
<p4>John Hodge, Irvine Welsh</p4>
<br>
<p4>STARRING</p4>
<p4>Ewan McGregor, Ewen Bremner, Jonny Lee Miller, Robert Carlyle</p4>
<br>
<p4>DURATION</p4>
<p4>1h17m</p4>
</div>
<div class="info">
<p>First there was an opportunity......then there was a betrayal. Twenty years have gone by. Much has changed but just as much remains the same. Mark Renton (Ewan McGregor) returns to the only place he can ever call home. They are waiting for him:
Spud (Ewen Bremner), Sick Boy (Jonny Lee Miller), and Begbie (Robert Carlyle). Other old friends are waiting too: sorrow, loss, joy, vengeance, hatred, friendship, love, longing, fear, regret, diamorphine, self-destruction and mortal danger, they
are all lined up to welcome him, ready to join the dance.</p>
</div>
</div>
<div class="four-col-grid">
<div class="l-quote">
<div class="grid-item">
<h2>SYNOPSIS</h2>
</div>
<div class="l-double">
<p2>"As juicy as the heroin they inject, Trainspotting 2 offers all the joys and woes of the original, with the same direction from Boyle that made the first such a treat."</p2>
<br>
<h3>JOHN SMITH</h3>
</div>
</div>
</div>
<div class="four-col-grid">
<div class="grid-item">
<h2>DISCUSSION</h2>
</div>
<div class="l-discuss">
<p3>Name or question of the discussion topic</p3>
<br>
<h4>VIEW</h4>
</div>
<div class="l-discuss">
<p3>Name or question of the discussion topic</p3>
<br>
<h4>VIEW</h4>
</div>
<div class="l-discuss">
<p3>Name or question of the discussion topic</p3>
<br>
<h4>VIEW</h4>
</div>
</div>
<div class="four-col-grid social">
<div class="grid-item">
<h2>SOCIAL</h2>
</div>
<div class="image-item">
<img src="img/profile1.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<div class="image-item">
<img src="img/profile2.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<div class="image-item">
<img src="img/profile3.jpg">
</div>
<div class="grid-item empty">
</div>
<div class="image-item clear">
<img src="img/profile4.jpg">
</div>
<div class="image-item">
<img src="img/profile5.jpg">
</div>
<div class="image-item">
<img src="img/profile6.jpg">
</div>
</div>
</div>
我有点进退两难。首先，这是一个 [codepen][1]。我的问题是，我有一个 4 列的网格结构，左列保留用于副标题，内容出现在其他 3 列中。
我有一个名为 'social' 的部分，我希望在 3 列中每列显示 1 张个人资料图片。问题是，当我添加一行新图像时，它们从左栏（为副标题保留的栏）开始。有没有办法通过添加一个空列来阻止这种情况？我尝试使用 ，但它似乎只是弄乱了我的格式。
另一个问题是，当网站变成移动设备时，我希望图像连续显示 2 个。添加空白列后，这将如何影响它们随后在移动设备中的布局方式？会不会有空格space？
抱歉，如果这让您感到困惑。我对这一切还很陌生。感谢您的帮助！
这是 CSS 的一个片段，可以帮到您！
.image-item:nth-child(5n) {
margin-left:25%;
}
https://codepen.io/hoonin_hooligan/pen/rmPBro
这里发生的事情是每第 4 个图像项我们添加一个 "extra" 个 margin-left 图像项来创建你的社交专栏是一个独立于其余部分的独立实体的错觉图像网格。
您无需尝试插入和清空列
像这样添加空列：
<div class="grid-item empty">
</div>
对于问题一:
.empty {
clear: both;
}
问题二...
/* whatever screen width you need */
@media (max-width: 668px) {
.empty {
display: none;
}
}
关于 clear 属性 的信息。
/* CSS Document */
/* Responsive Column Grid */
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.row::after {
content: "";
clear: both;
display: table;
display: table;
}
.l-wrap .heading {
width: 100%;
border-top: 3px solid;
border-top-style: solid;
border-top-color: #9EF2F6;
border-bottom: 3px solid;
border-bottom-style: solid;
border-bottom-color: #9EF2F6;
padding-top: 10px;
padding-bottom: 10px;
margin-bottom: 30px;
}
.l-wrap {
max-width: 1170px;
margin-right: auto;
margin-left: auto;
}
.l-quote {
max-width: 1170px;
margin-right: auto;
margin-left: auto;
}
.l-quote .l-single {
width: 25%;
padding-left: 10px;
padding-right: 10px;
float: left;
}
.four-col-grid .l-double {
width: 75%;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-top: 20px;
margin-bottom: 40px;
float: left;
background-color: #1F2975;
}
.four-col-grid .l-discuss {
width: 75%;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-top: 20px;
margin-bottom: 25px;
float: right;
background-color: #F95899;
}
.four-col-grid .grid-item {
float: left;
width: calc((100% - 20px * 4) / 4);
margin-right: 10px;
margin-left: 10px;
}
.four-col-grid .details {
float: left;
width: calc((100% - 20px * 4) / 4);
}
.four-col-grid:after {
display: table;
clear: both;
content: '';
}
.four-col-grid .image-item {
width: 25%;
float: left;
}
.image-item {
/* width property
padding-right: 10px;
padding-left: 10px; */
float: left;
position: relative;
width: 25%;
}
.image-item img {
flex-shrink: 0;
min-width: 100%;
min-height: 100%;
padding-bottom: 10px;
margin-bottom: 30px;
width: calc((100% - 20px * 4) / 4);
margin-right: 10px;
margin-left: 10px;
}
/* PROFILE HOVER */
/*
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
padding-right: 10px;
padding-left: 10px;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.four-col-grid:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
} */
/* -------- TEXT ELEMENTS -------- */
p span {
display: block;
}
body {
background: #ffffff;
font-size: 22px;
line-height: 32px;
color: #ffffff;
margin: 0;
padding: 0;
word-wrap: break-word !important;
font-family: 'Poppins', sans-serif;
}
h1 {
font-size: 50px;
text-align: center;
color: #1F2975;
font-family: 'Poppins', sans-serif;
letter-spacing: 8px;
line-height: 60px;
}
h2 {
font-size: 20px;
line-height: 34px;
text-align: left;
color: #1F2975;
margin: 0;
padding: 0;
letter-spacing: 2px;
border-top-style: solid;
border-color: #9EF2F6;
}
h3 {
font-size: 20px;
line-height: 34px;
text-align: left;
color: #F95899;
margin: 0;
padding: 0;
letter-spacing: 2px;
font-weight: bold;
}
h4 {
font-size: 20px;
line-height: 34px;
text-align: left;
color: #1F2975;
margin: 0;
padding: 0;
letter-spacing: 2px;
font-weight: bold;
}
h5 {
font-size: 20px;
line-height: 34px;
text-align: left;
color: #F95899;
position: absolute;
width: 100%;
letter-spacing: 2px;
font-weight: bold;
}
p {
text-align: left;
color: #1F2975;
font-size: 12px;
margin: 0px;
line-height: 15px;
}
p2 {
text-align: left;
color: #1F2975;
font-size: 30px;
line-height: 40px;
font-weight: bold;
color: #F95899;
}
p3 {
text-align: left;
color: #1F2975;
font-size: 30px;
line-height: 40px;
font-weight: bold;
color: #1F2975;
}
p4 {
text-align: left;
color: #1F2975;
font-size: 12px;
margin: 0px;
line-height: 15px;
font-weight: bold;
display: block;
}
br {
display: block;
/* makes it have a width */
content: "";
/* clears default height */
margin-top: 15px;
/* change this to whatever height you want it */
}
a {
color: #FFF;
}
.info {
-webkit-column-count: 2;
/* Chrome, Safari, Opera */
-moz-column-count: 2;
/* Firefox */
column-count: 2;
-webkit-column-width: 100px;
/* Chrome, Safari, Opera */
-moz-column-width: 100px;
/* Firefox */
column-width: 100px;
padding-bottom: 30px;
min-height: 200px;
}
/* -------- VIDEO ELEMENTS -------- */
.embed-container {
position: relative;
padding-bottom: 56.25%;
margin-top: 10px;
height: 0;
overflow: hidden;
max-width: 1170px;
margin-bottom: 30px;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#container {
margin: 0 auto;
max-width: 890px;
}
.toggle,
[id^=drop] {
display: none;
}
/* -------- NAV ELEMENTS -------- */
/* Giving a background-color to the nav container. */
nav {
margin: 0;
margin-bottom: 30px;
padding: 0;
background-color: #9EF2F6;
}
#logo {
display: block;
padding: 0 30px;
float: left;
font-size: 20px;
line-height: 60px;
}
/* Since we'll have the "ul li" "float:left"
* we need to add a clear after the container. */
nav:after {
content: "";
display: table;
clear: both;
}
/* Removing padding, margin and "list-style" from the "ul",
* and adding "position:reltive" */
nav ul {
float: right;
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
/* Positioning the navigation items inline */
nav ul li {
margin: 0px;
display: inline-block;
float: left;
background-color: #9EF2F6;
font-weight: bold;
}
/* Styling the links */
nav a {
display: block;
padding: 14px 20px;
color: #1F2975;
font-size: 17px;
text-decoration: none;
}
nav ul li ul li:hover {
background: #000000;
}
/* Background color change on Hover */
nav a:hover {
background-color: #3DE5ED;
}
/* Hide Dropdowns by Default
* and giving it a position of absolute */
nav ul ul {
display: none;
position: absolute;
/* has to be the same number as the "line-height" of "nav a" */
top: 60px;
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
display: inherit;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
width: 170px;
float: none;
display: list-item;
position: relative;
}
/* Second, Third and more Tiers
* We move the 2nd and 3rd etc tier dropdowns to the left
* by the amount of the width of the first tier.
*/
nav ul ul ul li {
flex-shrink: 0;
min-width: 100%;
min-height: 100%
}
position: relative;
top:-60px;
/* has to be the same number as the "width" of "nav ul ul li" */
left:170px;
}
/* Change ' +' in order to change the Dropdown symbol */
li > a:after {
content: ' ';
}
li > a:only-child:after {
content: '';
}
/* Media Queries
--------------------------------------------- */
@media all and (max-width: 667px) {
#logo {
display: block;
padding: 0;
width: 100%;
text-align: center;
float: none;
}
nav {
margin: 0;
}
/* Hide the navigation menu by default */
/* Also hide the */
.toggle + a,
.menu {
display: none;
width: 100%;
}
/* TEXT ELEMENTS */
h1 {
font-size: 30px;
text-align: center;
color: #1F2975;
font-family: 'Poppins', sans-serif;
letter-spacing: 8px;
line-height: 36px;
}
p2 {
text-align: left;
color: #1F2975;
font-size: 25px;
line-height: 30px;
font-weight: bold;
color: #F95899;
}
p3 {
text-align: left;
color: #1F2975;
font-size: 25px;
line-height: 30px;
font-weight: bold;
color: #1F2975;
}
/* RESPONSIVE GRID */
.l-wrap {
width: 100%;
padding-right: 30px;
padding-left: 30px;
}
.l-wrap .heading {
width: 100%;
border-top: 3px solid;
border-top-style: solid;
border-top-color: #9EF2F6;
border-bottom: 3px solid;
border-bottom-style: solid;
border-bottom-color: #9EF2F6;
padding-top: 0px;
padding-bottom: 0px;
margin-bottom: 25px;
margin-top: 25px;
}
.four-col-grid .grid-item {
width: 100%;
float: left;
margin-right: 0px;
margin-left: 0px;
margin-bottom: 10px;
}
.four-col-grid .details {
width: 100%;
float: left;
margin-bottom: 15px;
}
.four-col-grid .l-double {
width: 100%;
padding-bottom: 20px;
padding-top: 20px;
margin-bottom: 40px;
float: left;
background-color: #1F2975;
}
.four-col-grid .l-discuss {
width: 100%;
padding-bottom: 20px;
padding-top: 20px;
margin-bottom: 20px;
float: left;
background-color: #F95899;
}
.info {
width: 100%;
-webkit-column-count: 1;
/* Chrome, Safari, Opera */
-moz-column-count: 1;
/* Firefox */
column-count: 1;
-webkit-column-width: 100px;
/* Chrome, Safari, Opera */
-moz-column-width: 100px;
/* Firefox */
padding-bottom: 30px;
padding-top: 30px;
border-top: 2px;
border-top-color: #9EF2F6;
border-top-style: solid;
}
.image-item {
/* width property
padding-right: 10px;
padding-left: 10px; */
float: left;
position: relative;
width: 50%;
}
.image-item img {
flex-shrink: 0;
min-width: 100%;
min-height: 100%;
padding-bottom: 10px;
margin-bottom: 30px;
width: calc((100% - 20px * 2) / 2);
margin-right: 10px;
margin-left: 10px;
}
.four-col-grid .image-item {
width: 50%;
float: left;
}
/* VIDEO ELEMENTS */
.video-responsive {
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
height: 0;
}
.video-responsive iframe {
left: 0;
top: 0;
height: 100%;
width: 100%;
padding-bottom: 50px;
position: absolute;
}
/* Stylinf the toggle lable */
.toggle {
display: block;
background-color: #9EF2F6;
padding: 14px 20px;
color: #1F2975;
font-size: 17px;
text-decoration: none;
border: none;
}
.toggle:hover {
background-color: #3DE5ED;
}
/* Display Dropdown when clicked on Parent Lable */
[id^=drop]:checked + ul {
display: block;
}
/* Change menu item's width to 100% */
nav ul li {
display: block;
width: 100%;
}
nav ul ul .toggle,
nav ul ul a {
padding: 0 40px;
text-indent: 20px;
}
nav ul ul ul a {
padding: 0 80px;
}
nav a:hover,
nav ul ul ul a {
background-color: #3DE5ED;
}
nav ul li ul li .toggle,
nav ul ul a,
nav ul ul ul a {
padding: 14px 20px;
color: #1F2975;
font-size: 17px;
}
nav ul li ul li .toggle,
nav ul ul a {
background-color: #9EF2F6;
}
/* Hide Dropdowns by Default */
nav ul ul {
float: none;
position: static;
color: #1F2975;
/* has to be the same number as the "line-height" of "nav a" */
}
/* Hide menus on hover */
nav ul ul li:hover > ul,
nav ul li:hover > ul {
display: none;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
display: block;
width: 100%;
}
nav ul ul ul li {
position: static;
/* has to be the same number as the "width" of "nav ul ul li" */
}
}
@media all and (max-width: 330px) {
nav ul li {
display: block;
width: 94%;
}
}
.empty {
clear: both;
}
@media (max-width: 668px) {
.empty {
display: none;
}
}
<nav>
<div id="logo">Logo</div>
<label for="drop" class="toggle">☰ Menu</label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li>
<!-- First Tier Drop Down -->
<label for="drop-1" class="toggle">Reviews</label>
<a href="#">Reviews</a>
<input type="checkbox" id="drop-1" />
<ul>
<li><a href="#">By Rating</a></li>
<li><a href="#">By Name</a></li>
<li><a href="#">By Genre</a></li>
</ul>
</li>
<li>
<!-- First Tier Drop Down -->
<label for="drop-2" class="toggle">Discussion</label>
<a href="#">Discussion</a>
<input type="checkbox" id="drop-2" />
<ul>
<li><a href="#">Start a Discussion</a></li>
<li><a href="#">View Discussions</a></li>
</ul>
</li>
<li><a href="#">Social</a></li>
<li><a href="#">News</a></li>
</ul>
</nav>
<!-- TITLE OF MOVIE -->
<div class="l-wrap">
<div class="heading">
<h1>TRAINSPOTTING 2</h1>
</div>
</div>
<div class="l-wrap">
<!-- YOUTUBE EMBED -->
<div class='embed-container'>
<iframe src='https://www.youtube.com/embed/EsozpEE543w' frameborder='0' allowfullscreen></iframe>
</div>
<div class="four-col-grid">
<div class="grid-item">
<h2>ABOUT</h2>
</div>
<div class="details">
<p4>DIRECTOR</p4>
<p4>Danny Boyle</p4>
<br>
<p4>WRITERS</p4>
<p4>John Hodge, Irvine Welsh</p4>
<br>
<p4>STARRING</p4>
<p4>Ewan McGregor, Ewen Bremner, Jonny Lee Miller, Robert Carlyle</p4>
<br>
<p4>DURATION</p4>
<p4>1h17m</p4>
</div>
<div class="info">
<p>First there was an opportunity......then there was a betrayal. Twenty years have gone by. Much has changed but just as much remains the same. Mark Renton (Ewan McGregor) returns to the only place he can ever call home. They are waiting for him:
Spud (Ewen Bremner), Sick Boy (Jonny Lee Miller), and Begbie (Robert Carlyle). Other old friends are waiting too: sorrow, loss, joy, vengeance, hatred, friendship, love, longing, fear, regret, diamorphine, self-destruction and mortal danger, they
are all lined up to welcome him, ready to join the dance.</p>
</div>
</div>
<div class="four-col-grid">
<div class="l-quote">
<div class="grid-item">
<h2>SYNOPSIS</h2>
</div>
<div class="l-double">
<p2>"As juicy as the heroin they inject, Trainspotting 2 offers all the joys and woes of the original, with the same direction from Boyle that made the first such a treat."</p2>
<br>
<h3>JOHN SMITH</h3>
</div>
</div>
</div>
<div class="four-col-grid">
<div class="grid-item">
<h2>DISCUSSION</h2>
</div>
<div class="l-discuss">
<p3>Name or question of the discussion topic</p3>
<br>
<h4>VIEW</h4>
</div>
<div class="l-discuss">
<p3>Name or question of the discussion topic</p3>
<br>
<h4>VIEW</h4>
</div>
<div class="l-discuss">
<p3>Name or question of the discussion topic</p3>
<br>
<h4>VIEW</h4>
</div>
</div>
<div class="four-col-grid social">
<div class="grid-item">
<h2>SOCIAL</h2>
</div>
<div class="image-item">
<img src="img/profile1.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<div class="image-item">
<img src="img/profile2.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<div class="image-item">
<img src="img/profile3.jpg">
</div>
<div class="grid-item empty">
</div>
<div class="image-item clear">
<img src="img/profile4.jpg">
</div>
<div class="image-item">
<img src="img/profile5.jpg">
</div>
<div class="image-item">
<img src="img/profile6.jpg">
</div>
</div>
</div>