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

HTML How to Make a Website Responsive Web Design and Testing Adjust the Profile Page and Header

Han Jiang
Han Jiang
8,556 Points
Posted by Han Jiang
Han Jiang
8,556 Points

the responsive. css code doesn't work.

HEADER *********************************/

nav { background:none; float:right; font-size:1.125em; margin-right:5%; text-align:right; width:45%;

} #logo{ float:left; margin-left:5%; text-align:left; width:45%; }

h1{ font-size:2.5em;}

h2{ font-size:0.825em; margin-bottom:20px;}

header{ border-bottom:5px solid #599a69; margin-bottom:60px;

}

Is there anyone know anything wrong with my code?

Thank you!

Unsubscribed User
Unsubscribed User
8,841 Points

can you provide us a snapshot of your workspace which will give us more insight on what is the issue.

My understanding is "CSS is correct" but the elements which u referenced to which the CSS is added may not be correct.

5 Answers

unsubscribed User
unsubscribed User
8,639 Points
unsubscribed User
unsubscribed User
8,639 Points

2 Main things I would check first,

Your content should be wrapped inside a media query, and in your html file, you should link your responsive.css file in the correct location.

Han Jiang
Han Jiang
8,556 Points
Han Jiang
Han Jiang
8,556 Points

Hi Alissa,

What do you mean the correct location? <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Paul Jiang | Bay Area Realtor</title> <link rel="stylesheet" type="text/css" href="your css stylesheet's file directory goes in here"> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> </head>

thank you1

Han Jiang
Han Jiang
8,556 Points
Han Jiang
Han Jiang
8,556 Points

How to add a snapshot? thank you!

Unsubscribed User
Unsubscribed User
8,841 Points

To create the snapshot,

  • Launch the workspaces.
  • Select the snapshot menu in the upper right corner.
  • Click "Take Snapshot"
  • Visit the link and share it
Dennis Castillo
Dennis Castillo
16,018 Points
Dennis Castillo
Dennis Castillo
16,018 Points

Your left and right content should wrapped it follow by css code "overflow: Auto;" then use media querie. For more information about responsive design check out on the library programs of treehouse.

Han Jiang
Han Jiang
8,556 Points
Han Jiang
Han Jiang
8,556 Points

sorry Dennis,

I don't not quite understand what you saying? Could you write a example kindly?

thank you!

Dennis Castillo
Dennis Castillo
16,018 Points
Dennis Castillo
Dennis Castillo
16,018 Points

sorry about my english :) but anyway, i saw your code on your responsive.css your "#primary" and "#secondary" are still acting like a whole page in any mobile devices because of your width percentage and float things. In the big screen this is fine because you have a full access vision on every each content of your web, we are talking about more than 1024x768 screen, every screen devices will consider as 100% width such as mobile, tablet, laptop, and desktop. So if you declare 50% on the left and right on responsive and you use your mobile let say 320 to 480 width of mobile screen this will consider as 100% and your float are still right and left it will be more smaller, the way you look on the big screen will be the same on the smaller screen.

On my responsive code sample, you will notice the width is 100% because we are relying on the full screen of mobile device so that's why it is 100% if we declare it to 50% it will just show half screen on your mobile device and float are all left, because the content is 100% all content will automatically move down.

Just sharing what I know <thumbs-up> XD.... Check my sample:

HTML

<div class="wrapped">
     <div class="leftContent">
          <!-- Your left content code here -->
     </div>
     <div class="rightContent">
          <!-- Your right content code here -->
     </div>
</div>

CSS

.wrapped {
overflow: auto;
width: 100%;
height: 250px; /* you can change this to "auto" */
}
.leftContent {
float: left;
margin-left: 0%;
width: 50%;
height: 250px; /* you can change this to "auto" */
background-color: #4c4c4c;
}
.rightContent {
float: right;
margin-right: 0%;
width: 50%;
height: 250px; /* you can change this to "auto" */
background-color: #FFCC33;
}

Responsive.css

@media only screen and (min-width: 480px) and (max-width: 639px) {
     .leftContent {
          float: left;
          width: 100%;
     }
     .rightContent {
          float: left;
          width: 100%;
     }
}

You can do also:

     .leftContent, .rightContent {
          float: left:
          width: 100%;
     }

Hope it helps :) again sorry about my English... Good Luck