CSS - Media queries - elements not stacking / floating properly - html

I'm setting media queries for tablet-size screens and my nav bar, header logo and top section don't seem to want to stack properly. If I fix the position of the nav I'm losing the section heading or if I put the nav position as static the nav bar is trying to hide behind it. So, when I reduce to 680px or below I get this at the top of my screen -
Or this -
It all stacks fine at 480px and below so not sure what I'm doing wrong. Here are my media queries -
#media screen and (max-width: 680px) {
nav {
float: none;
text-align: center;
padding-bottom: 10px;
padding-top: 10px;
}
nav a {
display: block;
border-bottom: 0;
}
#logo {
height: auto;
}
#logo img {
width: 200px;
height: 100px;
position: relative;
top: 0;
left: 21%;
}
section {
float: none;
height: auto;
}
}
#media screen and (max-width: 480px) {
body {
max-width: 500px;
}
header {
height: auto;
}
nav {
text-align: center;
padding-bottom: 10px;
padding-top: 10px;
position: static;
}
nav a {
display: block;
border-bottom: 0;
}
nav a:hover {
background-color: rgba(0,0,0,0.6);
color: #fff;
}
#logo {
height: auto;
}
#logo img {
width: 200px;
height: 100px;
position: relative;
top: 0;
left: 21%;
}
section {
float: none;
height: auto;
font-size: 20px;
}
<header>
<div id="logo"> <img src="images/havoc_logo.png"> </div>
<nav>
Home
What we do
Who we are
Who we work with
Say hello
Blog
</nav>
</header>
<section id="whatwedo">
<div class="container-fluid">
<h1><span style="color: rgb(133,52,146);">+</span>What we do</h1>
<div class="cols">
<div class="row no-gutters">
<div class="col-md-3">
<h2>ADVERTISING</h2>
<img src="images/advertising.jpg" class="image" style="width: 100%; height: 300px;">
<div class="overlay">
<div class="text"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</div>
</div>
</div>
<div class="col-md-3">
<h2>GRAPHIC DESIGN</h2>
<img src="images/graphic_design.jpg" class="image" style="width: 100%; height: 300px;">
<div class="overlay">
<div class="text"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</div>
</div>
</div>
<div class="col-md-3">
<h2>BRAND IDENTITY</h2>
<img src="images/brand_identity.jpg" class="image" style="width: 100%; height: 300px;">
<div class="overlay">
<div class="text"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</div>
</div>
</div>
<div class="col-md-3">
<h2>BRAND GUIDELINES</h2>
<img src="images/beard.jpg" class="image" style="width: 100%; height: 300px;">
<div class="overlay">
<div class="text"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</div>
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-md-3">
<h2>PRINT MANAGEMENT</h2>
<img src="images/print.jpg" class="image" style="width: 100%; height: 300px;">
<div class="overlay">
<div class="text"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</div>
</div>
</div>
<div class="col-md-3">
<h2>CREATIVE DIRECTION</h2>
<img src="images/creative_direction.jpg" class="image" style="width: 100%; height: 300px;">
<div class="overlay">
<div class="text"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</div>
</div>
</div>
<div class="col-md-3">
<h2>EDITORIAL DESIGN</h2>
<img src="images/ed_design.jpg" class="image" style="width: 100%; height: 300px;">
<div class="overlay">
<div class="text"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</div>
</div>
</div>
<div class="col-md-3">
<h2>AND LOTS OF OTHER STUFF</h2>
<img src="images/other_stuff.jpg" class="image" style="width: 100%; height: 300px;">
<div class="overlay">
<div class="text"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</br> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias cum repellat velit quae suscipit.</div>
</div>
</div>
</div>
</div>
</div>
</section>
Any help appreciated.

I think your problem is the height!
Try with min-height.

It is really hard to find errors in your code when this amount of it is provided. You should post relevant html, use css-flexbox or bootstrap grid (or any other grid system). You can find Bootrstrap v.4 grid only (withot any other styling) here. Hope it helps!

Related

contents are going outside from grid box

.mn2 {
display: grid;
grid-template-columns: 30vh 30vh;
grid-template-rows: 30vh 30vh;
grid-gap: 5px 5px;
height: 50vh;
border: 3px dashed red;
}
<div class="mn2">
<div class="box2">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consectetur doloremque labore corrupti atque.
</div>
<div class="box3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque error maiores asperiores! Lorem ipsum, dolor sit amet consectetur adipisicing elit.
</div>
<div class="box4">
Lorem ipsum dolor sit amet consectetur adipisicing elit
</div>
<div class="box5">Lorem ipsum dolor, sit amet consectetur adipisicing elit. A sit quaerat error ad, ut nulla.</div>
</div>
You should let the content define box height & widths. By setting everything to auto..
you can set height of the boxes with grid-auto-rows: [first-row-height] [second-row-height]; for eg
grid-auto-rows: 200px 200px;
.mn2 {
display: grid;
grid-template-columns: auto auto;
grid-auto-rows: 200px 200px;
grid-gap: 5px 5px;
height: auto;
}
.mn2>div {
padding: 1rem;
background-color: gray;
}
<div class="mn2">
<div class="box2">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consectetur doloremque labore corrupti atque.
</div>
<div class="box3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque error maiores asperiores! Lorem ipsum, dolor sit amet consectetur adipisicing elit.
</div>
<div class="box4">
Lorem ipsum dolor sit amet consectetur adipisicing elit
</div>
<div class="box5">Lorem ipsum dolor, sit amet consectetur adipisicing elit. A sit quaerat error ad, ut nulla.</div>
</div>
Try this:
.mn2 {
display: grid;
grid-template-columns: 24% 24% 24% 24%;
grid-gap: 5px 5px;
height: auto;
border: 3px dashed red;
}
<div class="mn2">
<div class="box2">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consectetur doloremque labore corrupti atque.
</div>
<div class="box3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque error maiores asperiores! Lorem ipsum, dolor sit amet consectetur adipisicing elit.
</div>
<div class="box4">
Lorem ipsum dolor sit amet consectetur adipisicing elit
</div>
<div class="box5">Lorem ipsum dolor, sit amet consectetur adipisicing elit. A sit quaerat error ad, ut nulla.</div>
</div>

How can I move these elements up? in CSS [duplicate]

This question already has answers here:
CSS-only masonry layout
(4 answers)
Closed 8 months ago.
I want to move element to up like in photo in attachment. which code I should write to my css ?
here is photo of my code
*{box-sizing: border-box;}
body{
height: 100vh;
width: 100vw;
font-family: sans-serif;
}
h2{padding: 5px;}
p{padding: 5px;}
.container{
display: flex;
width: 1200px;
margin: 50px auto;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-around;
background-color: aquamarine;
}
.container__item{
width: 350px;
/* height: 100%; */
background-color: #fff;
}
[class*="image"]{
width: 350px;
background-color: rgb(200, 200, 200);
color: gray;
font-size: 2rem;
display: flex;
justify-content: center;
align-items: center;
}
[class$="150"]{height: 150px;}
[class$="100"]{height: 100px;}
[class$="350"]{height: 350px;}
[class$="220"]{height: 220px;}
[class$="230"]{height: 230px;}
<div class="container">
<div class="container__item">
<div class="container__item-image 350x150">350x150</div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
</div>
<div class="container__item">
<div class="container__item-image 350x100">350x100</div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
</div>
<div class="container__item">
<div class="container__item-image 350x100">350x100</div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
</div>
<div class="container__item">
<div class="container__item-image 350x220">350x220</div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
</div>
<div class="container__item">
<div class="container__item-image 350x230">350x230</div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
</div>
<div class="container__item">
<div class="container__item-image 350x350">350x350</div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
</div>
<div class="container__item">
<div class="container__item-image 350x100">350x100</div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
</div>
<div class="container__item">
<div class="container__item-image 350x150">350x150</div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
</div>
<div class="container__item">
<div class="container__item-image 350x150">350x150</div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
</div>
</div>
I already tried justify-content: flex-start; and align-items: flex-start; but they didn't help for this example. Maybe I have another problem ? I can't solve it. I try to solve it about two days :D I can't find answer for this. Please somebody help to solve this exercise.
Check this. You can use display:grid to check it out.
*{box-sizing: border-box;}
body{
height: 100vh;
width: 100vw;
font-family: sans-serif;
}
h2{padding: 5px;}
p{padding: 5px;}
.container{
width: 1200px;
margin: 50px auto;
column-count: 4;
column-gap: 5px;
}
.container__item{
margin: 0;
display: grid;
grid-template-rows: 1fr auto;
margin-bottom: 0px;
break-inside: avoid;
}
[class*="image"]{
width: 100%;
background-color: rgb(200, 200, 200);
color: gray;
font-size: 2rem;
display: flex;
justify-content: center;
align-items: center;
}
[class$="150"]{height: 150px;}
[class$="100"]{height: 100px;}
[class$="350"]{height: 350px;}
[class$="220"]{height: 220px;}
[class$="230"]{height: 230px;}
<div class="container">
<div class="container__item">
<div class="container__item-image 350x150">350x150</div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
</div>
<div class="container__item">
<div class="container__item-image 350x100">350x100</div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
</div>
<div class="container__item">
<div class="container__item-image 350x100">350x100</div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
</div>
<div class="container__item">
<div class="container__item-image 350x220">350x220</div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
</div>
<div class="container__item">
<div class="container__item-image 350x230">350x230</div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
</div>
<div class="container__item">
<div class="container__item-image 350x350">350x350</div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
</div>
<div class="container__item">
<div class="container__item-image 350x100">350x100</div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
</div>
<div class="container__item">
<div class="container__item-image 350x150">350x150</div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
</div>
<div class="container__item">
<div class="container__item-image 350x150">350x150</div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque accusamus impedit recusandae enim maxime, animi at hic aliquam quod fugiat.</p>
</div>
</div>

Css display property not working perfectly in my practice website

I don't understand why 2nd div is not up of 1st div. I want they 2 div perfectly set as like my image direction. already i try display block but not working. i don't know why main problem. already i have many research, but all fail. so please help me to solution my problem. advanced thanks and love from my top heart.
`
.testimonial .content{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.testimonial .content .testimonialBx{
max-width: calc(50% - 40px);
padding: 60px 40px;
margin: 20px;
background: #2196f3;
}
<section class="testimonial">
<div class="heading">
<h2>Testimonial</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure!</p>
</div>
<div class="content">
<div class="testimonialBx">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit necessitatibus culpa magnam ipsum illum provident nostrum id temporibus? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat similique nostrum harum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quos quo qui in.</p>
<h3>Someone Famous <br><span>Creative Designer</span></h3>
</div>
</div>
<div class="content">
<div class="testimonialBx">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit necessitatibus culpa magnam ipsum illum provident nostrum id temporibus? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat similique nostrum harum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quos quo qui in.</p>
<h3>Someone Famous <br><span>Creative Designer</span></h3>
</div>
</div>
</section>
`
Wrap those 2 divs in 1 div and make it as flex.
Updated Code
.testimonial .content {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.testimonial .content .testimonialBx {
max-width: calc(50% - 40px);
padding: 60px 40px;
margin: 20px;
background: #2196f3;
}
.container {
display: flex;
}
<!DOCTYPE html>
<html>
<head> </head>
<body>
<section class="testimonial">
<div class="heading">
<h2>Testimonial</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure!</p>
</div>
<div class="container">
<div class="content">
<div class="testimonialBx">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit necessitatibus culpa magnam ipsum illum provident nostrum id temporibus? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat similique nostrum harum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quos quo qui in.</p>
<h3>Someone Famous <br><span>Creative Designer</span></h3>
</div>
</div>
<div class="content">
<div class="testimonialBx">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit necessitatibus culpa magnam ipsum illum provident nostrum id temporibus? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat similique nostrum harum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quos quo qui in.</p>
<h3>Someone Famous <br><span>Creative Designer</span></h3>
</div>
</div>
</div>
</section>
</body>
</html>
Answer from #nagendraNag is ideal. I would just remove the max-width
max-width: calc(50% - 40px);

Items are not horizontally aligned [duplicate]

This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 3 years ago.
The 4 divs have a width of 23% and are displayed inline-block, they have a height of 220px and margin 0. The issue is that they are not horizontally aligned
I tried to change the height and width already and removed the margin but that does not fix it.
It looks like this...
.aside-column {
width: 23%;
display: inline-block;
height: 220px;
margin: 0;
}
<div class="aside-column aside-column1">
<h4>Lufthansa vs Airbus</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, exercitationem nulla? Ea rerum necessitatibus ratione optio iure. Aliquid?</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>
<div class="aside-column aside-column2">
<h4>Bill Gates History</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero in labore assumenda tempora nostrum nisi possimus saepe dolor incidunt voluptatem, iure cum atque!</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>
<div class="aside-column aside-column3">
<h4>Tescos Stabbing</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed quis quaerat quo reprehenderit?</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>
<div class="aside-column aside-column4">
<h4>Amazon Forest Fire</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur aliquid sint tenetur.</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>
Give vertical-align:top; to .aside-column class.
.aside-column {
width: 23%;
display: inline-block;
height: 220px;
margin: 0;
vertical-align:top;
}
<div class="aside-column aside-column1">
<h4>Lufthansa vs Airbus</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, exercitationem nulla? Ea rerum necessitatibus ratione optio iure. Aliquid?</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>
<div class="aside-column aside-column2">
<h4>Bill Gates History</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero in labore assumenda tempora nostrum nisi possimus saepe dolor incidunt voluptatem, iure cum atque!</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>
<div class="aside-column aside-column3">
<h4>Tescos Stabbing</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed quis quaerat quo reprehenderit?</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>
<div class="aside-column aside-column4">
<h4>Amazon Forest Fire</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur aliquid sint tenetur.</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>
You can also use a parent container which is a flexbox.
.container {
display: flex;
}
.aside-column {
width: 23%;
height: 220px;
margin: 1%;
}
<div class="container">
<div class="aside-column aside-column1">
<h4>Lufthansa vs Airbus</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, exercitationem nulla? Ea rerum necessitatibus ratione optio iure. Aliquid?</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>
<div class="aside-column aside-column2">
<h4>Bill Gates History</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero in labore assumenda tempora nostrum nisi possimus saepe dolor incidunt voluptatem, iure cum atque!</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>
<div class="aside-column aside-column3">
<h4>Tescos Stabbing</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed quis quaerat quo reprehenderit?</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>
<div class="aside-column aside-column4">
<h4>Amazon Forest Fire</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur aliquid sint tenetur.</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>
</div>

Foundation 4 auto height on container when reducing browser window size

I'm currently trying to center my block elements that i've laid out as a UL within a NAV so each block element is an LI with child elements within it.
This is my first time using F4 or Foundation for that matter.
I've been using .container for new 100% full width divs, within those i use rows (however rows also has 100% width per foundation.css) I want my LI's to be responsive so my logic was to add the .small-# and .large-# classes to the LI's themselves and then figure out how i want them to break and stack at smaller screen sizes.
When i reduce the size of the browser window my elements (LI's) stack on top of each other, which is fine, however the background container does not auto heighten to wrap around these elements.
Anyways here's the markup:
<div class="container l-capListBg">
<div class="row capListContainer">
<nav class="capList">
<ul>
<li class="small-4 large-2 colums">
<img src="img/icon-ds.png" alt="">
<h5>Digital<br>Strategy</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, magni iure quod vel dolor excepturi.</p>
</li>
<li class="small-4 large-2 colums">
<img src="img/icon-di.png" alt="">
<h5>Digital<br>Interactive</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, laboriosam, quibusdam sequi sint asperiores magni.</p>
</li>
<li class="small-4 large-2 colums">
<img src="img/icon-csm.png" alt="">
<h5>Collaboration & Social Media</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, optio officia reiciendis laudantium atque deserunt!</p>
</li>
<li class="small-4 large-2 colums">
<img src="img/icon-is.png" alt="">
<h5>Infrastructure Services</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam libero aspernatur aliquid minus aperiam quos!</p>
</li>
<li class="small-4 large-2 colums">
<img src="img/icon-iaas.png" alt="">
<h5>Identity-As-A-Service</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil et repellendus cupiditate minus consectetur consequatur.</p>
</li>
<li class="small-4 large-2 colums">
<img src="img/icon-ca.png" alt="">
<h5>Communications Analytics</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, eius harum aliquam assumenda officiis nihil.</p>
</li>
</ul>
</nav>
</div>
</div>
And here is the CSS:
.l-capListBg {
background: $lt-grey;
position: relative;
}
.capListContainer {
position: relative;
// max-width: 1000px;
// min-width: auto;
max-height: auto;
margin: 0 auto;
background: $lt-grey;
}
nav.capList {
position: absolute;
top: -50px;
left: 0;
list-style-type: none;
ul {
display: inline-block;
li {
display: inline-block;
vertical-align: top;
padding: 20px 0.5em 0;
width: 155px;
}
img {
width: auto;
height: auto;
}
h5 {
font-weight: 200;
color: $black;
height: 50px;
}
p {
font-size: 0.750em;
font-weight: $lighter;
vertical-align: top;
line-height: 1.250em;
}
}
}
Basically when i reduce the size of the browser window and the LI items begin to stack on top of each other (there are six and they end up stacking 3 rows of 2) the background container (which also has a color of grey) doesn't auto heighten when the other elements that are being pushed down.
I've been working on this for hours and really need some help.
Any advice would be greatly appreciated.
Thanks.
try with this:
foundation block-grid
<ul small-block-grid-3 medium-block-grid-6>
<li >
<img src="img/icon-ds.png" alt="">
<h5>Digital<br>Strategy</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum, magni iure quod vel dolor excepturi.</p>
</li>
<li >
<img src="img/icon-di.png" alt="">
<h5>Digital<br>Interactive</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, laboriosam, quibusdam sequi sint asperiores magni.</p>
</li>
<li >
<img src="img/icon-csm.png" alt="">
<h5>Collaboration & Social Media</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, optio officia reiciendis laudantium atque deserunt!</p>
</li>
<li >
<img src="img/icon-is.png" alt="">
<h5>Infrastructure Services</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam libero aspernatur aliquid minus aperiam quos!</p>
</li>
<li >
<img src="img/icon-iaas.png" alt="">
<h5>Identity-As-A-Service</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil et repellendus cupiditate minus consectetur consequatur.</p>
</li>
<li class="small-4 large-2 colums">
<img src="img/icon-ca.png" alt="">
<h5>Communications Analytics</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, eius harum aliquam assumenda officiis nihil.</p>
</li>
</ul>