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 Pointsfixing columns in a media query
Hello,
When I narrow the viewport, my header looks good, but the columns don't pile up the way they should. Could you please show me how to get my columns to pile in in media query. thanks!
<!DOCTYPE html>
<html>
<head>
<title>Floats</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/normalize.css">
<style>
/*
Page styles
================================================*/
body {
font: normal 1.1em/1.5 sans-serif;
color: #222;
background-color: #edeff0;
}
/* Layout Element Colors
================================ */
.main-header { background-color: #384047; }
.main-logo a { background-color: #5fcf80; }
.main-nav a { background-color: #3f8abf; }
.primary-content { background-color: #caebf6; }
.secondary-content { background-color: #bfe3d0; }
.main-footer { background-color: #b7c0c7; }
/* Main Layout Styles
================================ */
.main-wrapper {
width: 90%;
margin: auto;
}
/*Styling the navigation
=======================================*/
.main-header{
padding:15px;
}
.main-logo, .main-nav, .main-nav li{
float:left;
}
.main-nav li{
margin-top:46px;
}
.main-logo{
margin-right:50px;
}
.main-logo a, .main-nav a
{
text-decoration:block;
display:block;
padding:10px 15px;
color:white;
border-radius:5px;
text-align:center;
}
.main-nav li{
margin-right:10px;
}
/*Clear Fix
================================================*/
.group::after{
content:"";
display:table;
clear:both;
}
/*Media query
============================================*/
@media(max-width:768px)
{
.main-nav li,
.main-nav,
.main-logo,
.col,
.feat-img
{
height:initial;
width:initial;
margin:initial;
float:initial;
display:block;
}
.main-logo{
margin-right:0;
}
.feat-img{
width:100%;
}
.extra-content{
display:none;
}
.main-nav li{
margin-top:7px;
}
}
/*Styling Imagery
=====================================================*/
.feat-img{
width:50%;
float:left;
border:1px solid;
padding:5px;
margin-right:25px;
margin-bottom:10px;
}
/*styling the columns
====================================================*/
*{
box-sizing:border-box;
}
.col{
padding:20px;
float:left;
width:30%;
}
.primary-content{
width:40%;
}
.col:last-child{
float:right;
}
</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">
<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="main-banner">
<h1>This is the Main Banner Heading</h1>
<p>Andouille pork chop pancetta drumstick ground round beef ribs swine brisket ham.</p>
</div> -->
<div class="content-row group">
<div class="primary-content col">
<h2>Primary Content</h2>
<img class="feat-img" src="http://lorempixel.com/400/300"/>
<p>Bacon ipsum dolor sit amet chicken pork ground round brisket corned beef ball tip shank tail salami filet mignon ham hock pork belly venison shankle. Pig kielbasa drumstick sausage pork chop boudin. Chicken t-bone salami pork chop, beef ribs kevin ham tri-tip beef venison biltong brisket.</p>
<p>Venison strip steak meatball chicken, brisket prosciutto sirloin. Capicola drumstick brisket tri-tip salami. Chicken beef jerky, tail turkey prosciutto cow ham sirloin boudin tenderloin. Meatloaf tri-tip turducken brisket andouille, pork belly corned beef fatback hamburger.</p>
</div>
<div class="extra-content col">
<h3>Extra Content</h3>
<p>Strip steak tenderloin kevin swine meatloaf capicola, doner beef turducken pancetta corned beef pork loin shoulder.</p>
<hr>
<p>Pork filet mignon leberkas, tail swine venison pancetta turkey shoulder brisket chalkers likes hamburgers.</p>
</div>
<div class="secondary-content col">
<h3>Secondary Content</h3>
<p>Strip steak tenderloin kevin swine meatloaf capicola, doner beef turducken pancetta corned beef pork loin shoulder.</p>
<hr>
<p>Pork filet mignon leberkas, tail swine venison pancetta turkey shoulder brisket chalkers likes hamburgers.</p>
</div>
</div>
<footer class="main-footer">
<p>©2014 Example Layout</p>
</footer>
</div>
</body>
</html>
4 Answers
Jason Anello
Courses Plus Student 94,610 PointsHi orange sky,
You have some css after your 768px media query. This css can override what's in the media query when you're below 769px.
So you're setting the width's of the columns back to auto using the initial keyword inside the media query but then after the media query the columns are getting set back to the 40% and 30% widths that you probably want for larger viewport widths.
You probably want to move that media query to the end of the css so that all css outside of the media query comes before it.
Is the css you have above exactly how it is in the course?
Simon Woodard
6,545 PointsIt's in your width assignment of the columns, as the window gets smaller they continue to only have a width of 30% of the browser window size, you will need to either set a minimum width for them, or using a media query assign a new width property for the smaller size screen!
orange sky
Front End Web Development Techdegree Student 4,945 PointsHello Simon,
I gave .col in the media query a property of: width:initial. I would think setting the width to initial is enough. Could you please tell me how you would fix this problem? thanks!
orange sky
Front End Web Development Techdegree Student 4,945 PointsHello Jason!!!
Your explanation makes so much sense. Big thanks!!! As for the course content, no I actually strayed from it to understand media queries. Now, that you have said this, I think I can move ahead with confidence. Thanks, you are a life saver:) Not to be pushy, but can you please help me figure out this problem. The lists wont align with the logo in the media query. https://teamtreehouse.com/forum/media-query-6
Cheers!!
Jason Anello
Courses Plus Student 94,610 PointsI'm not sure if this is still a problem for you but I went ahead and left a comment in the other discussion.
orange sky
Front End Web Development Techdegree Student 4,945 PointsHello Jason, I have just read it. Thanks a lot, it all makes sense now. :)