Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Layout Techniques Display Modes Display Modes Challenge

Posted by orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

Problems with my css

Hello!

1) I am not sure why my media query does not stack my nav lists.

2) One of my columns does not reach the sticker footer, despite the fact I gave all the main containers a style rule of height:100%.

3) This is just for my own knowledge, but how can I move my nav lists down by let's, say 20px;

4) Also, my min-height does not cause my main-header to grow tall, what did I do wrong.

Cheers!!

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="">
<link rel="stylesheet" href="normalize.css">
<style>

body{
font : normal 1.1em/1.5 sans-serif;
color : #222;
background-color: #edeff0;

}
.main-wrapper{
margin:0 auto;
width:90%;


}

.main-header { background-color: #384047;}
.main-logo { background-color: #5fcf80;}
.main-nav li { background-color: #3f8abf;}
.primary-content { background-color: #caebf6;}
.secondary-content { background-color: #bfe3d0;}
.main-footer { background-color: #b7c0c7;}

/*.main-wrapper{
width:90%;
margin:auto;

 } */

.main-header{
padding:20px;
display:table;
width: 100%;
min-height:550px;
}

.main-logo, .main-nav{
display:table-cell;
vertical-align:middle;

}

*{
box-sizing:border-box;

}



.main-nav{
padding-left:20px;

}
.main-logo, .main-nav, .main-nav li{
display:inline-block;
border-radius:5px;


}







.main-nav li{
margin-right:10px;



}


.main-logo{

width:100px;


}



.main-logo a, .main-nav a{

text-align:center;
color:white;
text-decoration:none;
padding: 10px 20px;
display:block;

}


 .colbe{
 display:inline-block;
 vertical-align:top;
 padding:20px;


 }
 .primary-content{
 width:60%;
 margin-right:-5px;
 }
 .secondary-content{

 width:40%;
 }

 html, body, main-wrapper, .colbe{
 height:100%;


 }
 .main-footer{
 padding:20px;
 text-align:center;

 }

@media(max-width:768px){
.main-logo, .main-nav, .main-nav ,.colbe
{
display:block;
width:initial;
margin:initial;
height:initial;



}
.main-nav {

padding-left:initial;

}
.main-nav li{
margin-top:10px;

}





</style>

</head>

<body>
<div class="main-wrapper">
<header class="main-header"> 
<h1 class="main-logo"><a href="#">logo</a></h1>
<ul class="main-nav">
<li> <a href="#">Link 1 </a></li>
<li> <a href="#">Link 2</a></li>
<li> <a href="#">Link 3</a></li>
<li> <a href="#">Link 4</a></li>
</ul>

</header>

<div class="primary-content colbe">
<h2> Primary Content </h2>
<p>deaearyo apaea  epauapei aepaijaiae eia aeairaoeaioa e77
eapora aopeajeioaupa  aepoapa epaoeap:o pa:ea:ap pa:ap:a
iapeepeo euapiai  eau:aja eaoia:ia :eaao: eoia:i :aiiiee
iea:eirea ejira:er eruaeir  eoairair  eruoaeu rea:ora:re
</p>
<p>
deaearyo apaea  epauapei aepaijaiae eia aeairaoeaioa e77
eapora aopeajeioaupa  aepoapa epaoeap:o pa:ea:ap pa:ap:a
iapeepeo euapiai  eau:aja eaoia:ia :eaao: eoia:i :aiiiee
iea:eirea ejira:er eruaeir  eoairair  eruoaeu rea:ora:re
 </p>
</div>

<div class="secondary-content colbe">
<h2> Secondary Content </h2>
<p>
deaearyo apaea  epauapei aepaijaiae eia aeairaoeaioa e77
eapora aopeajeioaupa  aepoapa epaoeap:o pa:ea:ap pa:ap:a
</p>
<hr>
<p>
deaearyo apaea  epauapei aepaijaiae eia aeairaoeaioa e77
eapora aopeajeioaupa  aepoapa epaoeap:o pa:ea:ap pa:ap:a

</p>
</div>


<footer class="main-footer">
<p>&copy; 2014 Example Layout </p>
</footer>

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

2 Answers

Ben Singer
Ben Singer
8,621 Points
Ben Singer
Ben Singer
8,621 Points

1 ) Your nav list li items aren't told to display:block at your mobile width, you also have multiple declarations, which I think is confusing things a bit. It's almost always easier to write your styles from a mobile first perspective so that you're only overwriting styles from the ground up, rather than backwards, which can be a lot more confusing.

2) Your .main-wrapper class hasn't got a height of 100%, with that changed your header height does change with the min-height:550px and your content columns reach the footer at the bottom.

Here's a codepen link: http://codepen.io/bensinger/pen/qwuIm

orange sky
seal-mask
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points
orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

Hello Ben,

I am just following the videos, but I think it makes sense to code my queries first (" easier to write your styles from a mobile first perspective "), I will get into the habit of doing it that way:)

As for the for the min-height problem in my .main-header, I noticed you added a height:100% in .main-wrapper to get my header to increase in height, but in the lecture video, the instructor did not add : height:100% in .main-wrapper. How did you know to do that? Now, I am wondering why it isn't a problem in the instructor code?

Just out of curiousity, why do you share code through a paid servce like codepen( first time to hear about, what a nice concept, though). **I am just asking to know what more experienced people are doing in general? :)

Thanks!!