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 trialorange sky
Front End Web Development Techdegree Student 4,945 PointsI cant align the logo with the lists in the media query
Hello!
If you run the code below, and narrow the viewport to see the effect of media query, you will see that .main-logo is not equal in length with the lists. Can you please tell me how I can get the .main-logo to align in width with the lists.
thanks
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="normalize.css">
<style>
/*=====================================================*/
.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;}
.third-content {background-color:pink}
.main-footer { background-color: #b7c0c7;}
/*Styling the .main-header
===================================================*/
.main-header{
min-height:100px;
padding:15px;
}
.main-logo, .main-nav, .main-nav li{
float:left;
padding:10px;
}
.main-logo a, .main-nav a{
display:block;
text-decoration:none;
padding:8px 15px;
color:white;
}
.main-logo{
margin-right:35px;
border-radius:5px;
width:120px;
}
.main-nav li{
margin-right:10px;
margin-top:31px;
border-radius:5px;
}
/*clear fix
==================================================*/
.group::before, .group::after{
content:"";
display:table;
clear:both;
}
/*styling columns
=============================================*/
*{
box-sizing:border-box;
}
.col{
float:left;
padding:20px;
width:50%;
}
.primary-content{
width:50%;
}
.secondary-content{
width:50%
}
/* .main-footer & sticky footer
==========================================*/
.main-footer{
padding:15px;
text-align:center;
}
html, body, .main-wrapper, .col, .container{
height:100%;
}
/*styling the image
=============================================*/
.feat-img{
width:50%;
float:left;
margin-right:25px;
padding:5px;
border: 1px dotted grey;
}
/*media queries
=============================================*/
@media(max-width:768px)
{
.main-wrapper,
.main-logo,
.main-nav,
.main-nav li,
.col,
.main-footer,
.feat-img
{
float:initial;
margin:intial;
height:initial;
width:initial;
}
.main-logo{
margin-right:0;
margin-bottom:10px;
}
.main-nav li{
margin-top:10px;
}
.feat-img{
width:100%;
}
}
</style>
</head>
<body>
<div class="main-wrapper">
<header class="main-header group">
<h1 class="main-logo"><a href="#">Logo</a></h1>
<ul class="main-nav group">
<li><a href="#">Link1 </a></li>
<li><a href="#">Link2 </a></li>
<li><a href="#">Link3 </a></li>
<li><a href="#">Link4 </a></li>
</ul>
</header>
<div class="container group">
<div class="primary-content col">
<h2>Primary Content</h2>
<img class="feat-img" src="http://lorempixel.com/400/300">
<p>
ieaoeia iaehaoie ieaejaio aeiaoei eaoieua ue aeoia
eiaoei ao ieaoeaie ieaeiaioe aeoea ieoi eia eiaoeeioa
idoaei eiaofi oeaeipa:eoa:e paea:ej eaopeiap eapea:aieaoeia iaehaoie ieaejaio aeiaoei eaoieua ue aeoia
eiaoei ao ieaoeaie ieaeiaioe aeoea ieoi eia eiaoeeioa
idoaei eiaofi oeaeipa:eoa:e paea:ej eaopeiap eapea:a
ieaoeia iaehaoie ieaejaio aeiaoei eaoieua ue aeoia
eiaoei ao ieaoeaie ieaeiaioe aeoea ieoi eia eiaoeeioa
idoaei eiaofi oeaeipa:eoa:e paea:ej eaopeiap eapea:a
</p>
<p>
ieaoeia iaehaoie ieaejaio aeiaoei eaoieua ue aeoia
eiaoei ao ieaoeaie ieaeiaioe aeoea ieoi eia eiaoeeioa
idoaei eiaofi oeaeipa:eoa:e paea:ej eaopeiap eapea:a
idoaei eiaofi oeaeipa:eoa:e paea:ej eaopeiap eapea:a
ieaoeia iaehaoie ieaejaio aeiaoei eaoieua ue aeoia
eiaoei ao ieaoeaie ieaeiaioe aeoea ieoi eia eiaoeeioa
idoaei eiaofi oeaeipa:eoa:e paea:ej eaopeiap eapea:a
</p>
</div>
<div class="secondary-content col">
<h3>Secondary Content</h3>
<p>
ieaoeia iaehaoie ieaejaio aeiaoei eaoieua ue aeoia
eiaoei ao ieaoeaie ieaeiaioe aeoea ieoi eia eiaoeeioa
</p>
<hr/>
<p>
ieaoeia iaehaoie ieaejaio aeiaoei eaoieua ue aeoia
eiaoei ao ieaoeaie ieaeiaioe aeoea ieoi eia eiaoeeioa
</p>
</div>
<div id="clear"></div>
</div>
<footer class="main-footer">
<p>© 2014 Example Layout </p>
</footer>
</div>
</body>
</html>
4 Answers
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 PointsHi, No problem :)
There was 2 parts to the issue:
1) You were setting a 10px right margin on .main-nav li - See this image (the orange represents the margin)
2) Margin/Padding was also being set on the ul (.main-nav)- See this image
Had to play around with it a bit and move some of the code inside the media query as just removing the margin from .main-nav li on line 45 caused the layout to break when the viewport was larger see here - notice how the li's are all bunched together.
Hopefully that explains it, let me know if it makes sense :)
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 PointsHi, gave it a go and this seemed to work for me:
// I added this rule inside the media query:
.main-nav {
margin: 0;
padding: 0;
}
// And removed the right margin from .main-nav li (inside the media query again)
.main-nav li {
margin-top: 10px;
margin-right: 0;
}
// Also added a rule to main-nav li (in your main-header section) to get rid of ugly bulletpoints:
.main-nav li{
margin-right:10px;
margin-top:31px;
border-radius:5px;
list-style: none;
}
Hope this helps!
EDIT: updated the post a bit as my first go worked for narrow viewports but not wider ones
Full code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="normalize.css">
<style>
/*=====================================================*/
.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;}
.third-content {background-color:pink}
.main-footer { background-color: #b7c0c7;}
/*Styling the .main-header
===================================================*/
.main-header{
min-height:100px;
padding:15px;
}
.main-logo, .main-nav, .main-nav li{
float:left;
padding:10px;
}
.main-logo a, .main-nav a{
display:block;
text-decoration:none;
padding:8px 15px;
color:white;
}
.main-logo{
margin-right:35px;
border-radius:5px;
width:120px;
}
.main-nav li{
margin-right:10px;
margin-top:31px;
border-radius:5px;
list-style: none;
}
/*clear fix
==================================================*/
.group::before, .group::after{
content:"";
display:table;
clear:both;
}
/*styling columns
=============================================*/
*{
box-sizing:border-box;
}
.col{
float:left;
padding:20px;
width:50%;
}
.primary-content{
width:50%;
}
.secondary-content{
width:50%
}
/* .main-footer & sticky footer
==========================================*/
.main-footer{
padding:15px;
text-align:center;
}
html, body, .main-wrapper, .col, .container{
height:100%;
}
/*styling the image
=============================================*/
.feat-img{
width:50%;
float:left;
margin-right:25px;
padding:5px;
border: 1px dotted grey;
}
/*media queries
=============================================*/
@media(max-width:768px)
{
.main-wrapper,
.main-logo,
.main-nav,
.main-nav li,
.col,
.main-footer,
.feat-img
{
float:initial;
margin:intial;
height:initial;
width:initial;
}
.main-logo{
margin-right:0;
margin-bottom:10px;
}
.main-nav {
margin: 0;
padding: 0;
}
.main-nav li{
margin-top:10px;
margin-right: 0;
}
.main-nav li{
margin-top:10px;
}
.feat-img{
width:100%;
}
}
</style>
</head>
<body>
<div class="main-wrapper">
<header class="main-header group">
<h1 class="main-logo"><a href="#">Logo</a></h1>
<ul class="main-nav group">
<li><a href="#">Link1 </a></li>
<li><a href="#">Link2 </a></li>
<li><a href="#">Link3 </a></li>
<li><a href="#">Link4 </a></li>
</ul>
</header>
<div class="container group">
<div class="primary-content col">
<h2>Primary Content</h2>
<img class="feat-img" src="http://lorempixel.com/400/300">
<p>
ieaoeia iaehaoie ieaejaio aeiaoei eaoieua ue aeoia
eiaoei ao ieaoeaie ieaeiaioe aeoea ieoi eia eiaoeeioa
idoaei eiaofi oeaeipa:eoa:e paea:ej eaopeiap eapea:aieaoeia iaehaoie ieaejaio aeiaoei eaoieua ue aeoia
eiaoei ao ieaoeaie ieaeiaioe aeoea ieoi eia eiaoeeioa
idoaei eiaofi oeaeipa:eoa:e paea:ej eaopeiap eapea:a
ieaoeia iaehaoie ieaejaio aeiaoei eaoieua ue aeoia
eiaoei ao ieaoeaie ieaeiaioe aeoea ieoi eia eiaoeeioa
idoaei eiaofi oeaeipa:eoa:e paea:ej eaopeiap eapea:a
</p>
<p>
ieaoeia iaehaoie ieaejaio aeiaoei eaoieua ue aeoia
eiaoei ao ieaoeaie ieaeiaioe aeoea ieoi eia eiaoeeioa
idoaei eiaofi oeaeipa:eoa:e paea:ej eaopeiap eapea:a
idoaei eiaofi oeaeipa:eoa:e paea:ej eaopeiap eapea:a
ieaoeia iaehaoie ieaejaio aeiaoei eaoieua ue aeoia
eiaoei ao ieaoeaie ieaeiaioe aeoea ieoi eia eiaoeeioa
idoaei eiaofi oeaeipa:eoa:e paea:ej eaopeiap eapea:a
</p>
</div>
<div class="secondary-content col">
<h3>Secondary Content</h3>
<p>
ieaoeia iaehaoie ieaejaio aeiaoei eaoieua ue aeoia
eiaoei ao ieaoeaie ieaeiaioe aeoea ieoi eia eiaoeeioa
</p>
<hr/>
<p>
ieaoeia iaehaoie ieaejaio aeiaoei eaoieua ue aeoia
eiaoei ao ieaoeaie ieaeiaioe aeoea ieoi eia eiaoeeioa
</p>
</div>
<div id="clear"></div>
</div>
<footer class="main-footer">
<p>© 2014 Example Layout </p>
</footer>
</div>
</body>
</html>
orange sky
Front End Web Development Techdegree Student 4,945 PointsHello James,
That totally works, thanks. Can you please tell me what caused the .main logo to be disproportionately bigger than the lists.
thanks!!!
orange sky
Front End Web Development Techdegree Student 4,945 PointsThank you so much James. Just out of curiousity, how did get the print screen images into these blue links 'this image', 'see here'
Cheers!
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 PointsI used dropbox to host the images (saved in 'public' folder > right click > copy public link to get the url).
Then used markdown to add them to my post. See the markdown cheatsheet below or check out this guide.