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
Katie Tartamella
Front End Web Development Techdegree Student 2,537 PointsAll 3 columns will not display side by side once the browser width is beyond 1025px.
I have been racking my brain for days trying to figure this out. When my browser width is 769 or below everything displays fine, all columns are showed stacked and the footer is where in needs to be.
Once I expand the browser passed 769px it will then display the primary and secondary columns side by side and the tertiary col gets pushed down in the footer. The web page stays like this when I expand the browser between 769px-1025px and beyond. I have attached my workspace. Please help because I am seriously lost!
Here is my workspace https://w.trhou.se/664ee2y6sn
4 Answers
Bert Witzel
Full Stack JavaScript Techdegree Graduate 27,918 PointsHi Katie, taking another look now. Ok, so when I run the CSS through the validator on line 78 there is an error with "padding-top", a dash is missing between padding and top. On line 105 for "margin-top" there should just be one value, 30px I guess in this case. If you just used the "margin" property you could have two values. There was an issue with the @media for the 1025px, it looks like the @ and media have a space in-between them which was causing an issue.
There was an issue with where the .container <div> ended, I assume you want to have the three columns in the .container div, so I moved the closing div tag to after the tertiary column. That seemed to take care of the problem.
What I seem to remember is that the min-width 769px media query was supposed to have two columns and then the third on the bottom, and 1025px media query was supposed to be three columns. You're almost there is that's the case, I just changed .tertiary width in 769px @media to 100%, and then everything else worked out. Let me know if there's anything else I can help with or explain!
Bert Witzel
Full Stack JavaScript Techdegree Graduate 27,918 PointsHi Katie, I took a look at your workspace. Great work! One thing I do when I'm having a hard time figuring out what might be going wrong with my code is to see if there are any issue using the W3C CSS validator. And here is the HTML Validator. There were a few issues with your CSS, most importantly your .clearfix needs to be at the very bottom, after all of the media queries.
I made a rule for the footer too:
footer { clear: both; }
That took care of the issue with your footer. I can't remember if in this exercise the columns were supposed to look, different between 769px and 1024px.
Another thing I do if my floats aren't looking right is I mess around with the width of the columns.
Katie Tartamella
Front End Web Development Techdegree Student 2,537 PointsHey Bert,
Thank you for the help! I originally had the .clearfix at the very end of the style.css but saw another student had it between the two @media and thought I would give it a shot to see if it would work.
From the video when the browser is 769px the columns display stacked one on top of the other but once the screen reaches 1025px all 3 columns are supposed to be side by side, however only the primary and tertiary columns display side by side.
I ran it through the HTML validator and everything was good, ran through the CSS and I get this:
Sorry! We found the following errors (2) URI : TextArea 71 .main-header Value Error : padding Parse Error top: .5em 178 Parse Error media (min-width: 1025px) { .container { width: 90%; max-width: 1150px; } .primary { width: 50%; } .secondary, .tertiary { width: 50%; } }
Still confused!!!!
footer { clear: both; } <----- this worked! thank you :)
Katie Tartamella
Front End Web Development Techdegree Student 2,537 PointsBert,
Thank you for all of your help! It's always those little mistakes that makes huge impacts :)
I made all the changes that you suggested but I still cannot seem to get all 3 columns on the page once my browser hits 1025px. And now when I put my style.css in a validator I get more errors that I originally had. I am trying to move on to the next step but I do not want to continue until I get this.
Bert Witzel
Full Stack JavaScript Techdegree Graduate 27,918 PointsHi Katie, you're welcome, glad to help. I ran your code through both the CSS and html validator and it came out no errors, so maybe you did a little more work to the code since this last comment. As far as getting the three columns side by side for min-width 1025px that was an easy fix:
.primary {
width: 40%;
}
.secondary,
.tertiary {
width: 30%;
}
You still had the three columns at 50% width, which would equal 150% combined. I changed it so the widths combined equals 100% width. If it's over 100% then the floats will move around because there's not enough room for them all to fit side by side. Same goes for min-width 769px, if you wanted to make them all equal, side by side, just make sure their combined width is 100%.
Here's workspace: https://w.trhou.se/10v3v17kwq
Katie Tartamella
Front End Web Development Techdegree Student 2,537 PointsThank you Bert!!
That was my initial thought but I believe when I tried it I don't think I saw that it worked, or maybe I was looking at something else. Thank you again for all of your help! Have a wonderful weekend!