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
orange sky
Front End Web Development Techdegree Student 4,945 Pointshow to center the text in .main-footer of my media query
Hello,
I am trying the center the text in .main-footer fo my media-query. If you look at my media query, you see that I gave .main-footer {text-align:center} but when you run the code and narrow the viewport, you will see the text in the main footer is flushed against the top edge of .main-footer. How can I center this text in the footer of my media-query. 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;}
body{
font: normal 1.1em/1.5 sans-serif;
color:#222;
background:#edeff0;
}
.main-wrapper{
width:90%;
margin: 0 auto;
}
.main-header{
padding:20px;
}
.main-logo, .main-nav, .main-nav li{
display:inline-block;
}
.main-logo a, .main-nav a{
display:block;
padding:10px 20px;
text-decoration:none;
color:white;
border-radius:5px;
}
.main-logo{
margin-right:30px;
border-radius:5px;
}
.main-nav li{
margin-right:8px;
border-radius:5px;
}
/*styling the columns
====================================================*/
.col{
display:inline-block;
float:left;
padding:20px;
}
.primary-content{
width:60%;
}
.secondary-content{
width:40%;
}
*{
box-sizing:border-box;
}
/*styling the picture
====================================================*/
.feat-img{
width:50%;
float:left;
padding:4px;
border:1px dotted black;
margin-right:15px;
}
/*styling the footer and the height of the page*/
html, body, .main-wrapper, .container, .col{
height:100%;
}
.main-footer{
padding:20px;
text-align:center;
}
/*clear fix
==============================================*/
.group::after{
content:"";
display:table;
clear:both;
}
/*media query
============================================*/
@media(max-width:768px)
{
.main-logo,
.main-nav,
.main-nav li,
.col,
.feat-img,
.main-footer{
display:block;
height:initial;
width:initial;
margin:initial;
}
.main-nav li{
margin-top:8px;
}
.feat-img{
width:100%;
margin-bottom:10px;
}
.main-footer{
text-align:center;
}
}
</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>
7 Answers
Hugo Paz
15,622 PointsThe best way for you to check what is happening is using chrome inspect element. The footer occupies more space due to the floated elements being taken from the normal flow of the document.
Hugo Paz
15,622 PointsOn the media query add
.main-footer{
text-align:center;
clear:both;
}
orange sky
Front End Web Development Techdegree Student 4,945 Pointswhy did you give it a clear:both? cheers!
orange sky
Front End Web Development Techdegree Student 4,945 Pointswhy did you give it a clear:both? cheers!
Hugo Paz
15,622 PointsDue to the float on the side column
orange sky
Front End Web Development Techdegree Student 4,945 PointsYes, but the columns are floated inside the div with id=container. In fact, the float:left is in .col{...} which is contained inside div id="container". The .main-footer is outside of the .container.
I thought we should only clear the float inside the containing element or the parent of the floated children, in this case .container.
orange sky
Front End Web Development Techdegree Student 4,945 PointsThanks Hugo!