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
Jodie Whipple
11,321 PointsResponsive page not working.
I cannot get the columns to form when the page is windowed beyond 480px
****This is my responsive.css page****
@media screen and (min-width: 480px) {
/********************************** TWO COLUMN LAYOUT **********************************/
#primary { width: 50%; float: left; }
#secondary { width: 40%; float: right; }
}
@media screen and (min-width: 660px) {
}
****This is my contact.html page****
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jodie Whipple | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
</head>
****This is my index.html page****
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jodie Whipple | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
</head>
4 Answers
Jodie Whipple
11,321 PointsI would like to thank everyone for the help, but your efforts are futile, given that it was a silly mistake on my part. I had the responsive.css file in the main directory instead of my css folder and no one would have seen that considering I hadn't posted my file tree. Sorry everyone and thanks again for the help.
Shawn Denham
Python Development Techdegree Student 17,801 PointsHi Jodie!
Couple of things.
What exactly is it not doing that you want it to do? ie. what's the problem? Not working doesn't tell us much since we don't know what's expected! :D
Doesn't look like your code got pasted completely. make sure you include 3 back-ticks (the key to the left of the "1" key) before your first line of code and after your last line
for example:
back-ticks here your code here closing back-ticks here
Jodie Whipple
11,321 PointsThanks for the back-tick tip. The format looks much better now. This is my first post.
Jodie Whipple
11,321 PointsOnce the browser is shortened (emulating a mobile site), all the text should be in one colum. and when it's wider than 480px it should shift upward into two colums. I should mention that I have tried this in Chrome and Firefox, whereas the instructor is using Safari, if that makes any differance.
Brenna Leker
7,596 PointsHi Jodie, Can you supply us with the html? Is it possible that you gave the elements a class of secondary and primary rather than an id?
Also sharing your stylesheet with us may help as well. There is a possibility that you have some styles setup (margin, padding, borders) that are accounting for more than the missing 10% (100%-secondary width and primary width) making it impossible for the two to sit next to one another.
Jodie Whipple
11,321 PointsI have updated the post to show the html, although not all of it out of fear it would be too busy and unnecessary. I hope this helps.