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
Vicki Greer
5,020 PointsStrange behavior with responsive web site
I'm using the latest version of Firefox browser. That may be relevant, as the browser has caused some problems for me before. But this is repeatable, at least on my machine.
I've gone through the Responsive Web Site section, and done everything as the videos describe. On my About page, if the page is full-screen size on a PC, I see a white something (a margin?) above the green header, looks like about 20 pixels long. When I shrink the browser window to the size of a mobile phone window, the margin disappears, and the green header goes to the top of the screen as expected.
On my Contacts page, the behavior is opposite - I see no margin at full-screen width, and a margin at small-screen width. Is there any way to get someone to look at my code and see what I'm doing wrong? It's driving me crazy!
Thanks, Vicki Greer (vicki.l.greer@gmail.com)
Vicki Greer
5,020 PointsDear Anthony, If I could isolate a single part of the code, I'd probably be able to find the answer! :) I have a minimum of three files -- two CSS files and an HTML file. I don't know how to show you the problem without uploading all three files. Do I include them in one of these comments? I couldn't paste anything into the black box below your comment.
Pardon the newbie questions -- I am a newbie at Treehouse.
Vicki
Anthony Hill
Courses Plus Student 4,567 PointsHi Vicki,
Don't worry - we all start somewhere, just don't give up! :)
If you paste your HTML and CSS code then we can take a look. Start a new reply, then type three backticks and the language, so like this ```html, then on a new line paste your code, then on a new line at the bottom close it off with three more backticks - this will display your code and we can see what's going wrong.
Marcus Parsons
15,719 PointsHey Vicki Greer,
Here is a helpful image that will show you how you can post code. When you are doing the language part, it can be html, css, javascript, etc. You should try to separate each individual blocks of code by a couple hard returns so that it will all render properly.
4 Answers
Marcus Parsons
15,719 PointsHey Vicki,
I figured out your problem. All you need to do is clear the floats that you have by adding the following rule to your #wrapper selector in main.css:
clear: both;
For more information on why we had to add this to the wrapper element, I would start with this question on StackOverflow and then for more information check out this question..
Marcus Parsons
15,719 PointsBy the way, I did have to reformat your code, Vicki, although you really were close with posting it to get it to render. You just have to make sure when you post code that you only put the language on the starting 3 backticks line, and no text on the ending line (like you did) like Anthony showed in his comment.
Anthony Hill
Courses Plus Student 4,567 PointsGlad you got issue solved Vicki, keep up the good work! Ingenious use of a GIF Marcus, I was struggling to make my point without it turning it all into code.
Marcus Parsons
15,719 PointsHere is the code for the gif if you ever want to use it, Anthony:
Just put that in your comment! :]
Vicki Greer
5,020 PointsHey, Anthony Hill and Marcus Parsons,
The code is in three CSS files and an HTML file. The first CSS file is one I downloaded from the course. I'm including it in a separate message because it's so big, and you might not need it. Here it is:
/*! normalize.css v1.1.0 | MIT License | git.io/normalize */
/* ==========================================================================
HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined in IE 6/7/8/9 and Firefox 3.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
/**
* Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
*/
audio,
canvas,
video {
display: inline-block;
*display: inline;
*zoom: 1;
}
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
* Known issue: no IE 6 support.
*/
[hidden] {
display: none;
}
/* ==========================================================================
Base
========================================================================== */
/**
* 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
* `em` units.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-size: 100%; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
-ms-text-size-adjust: 100%; /* 2 */
}
/**
* Address `font-family` inconsistency between `textarea` and other form
* elements.
*/
html,
button,
input,
select,
textarea {
font-family: sans-serif;
}
/**
* Address margins handled incorrectly in IE 6/7.
*/
body {
margin: 0;
}
/* ==========================================================================
Links
========================================================================== */
/**
* Address `outline` inconsistency between Chrome and other browsers.
*/
a:focus {
outline: thin dotted;
}
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/* ==========================================================================
Typography
========================================================================== */
/**
* Address font sizes and margins set differently in IE 6/7.
* Address font sizes within `section` and `article` in Firefox 4+, Safari 5,
* and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
h2 {
font-size: 1.5em;
margin: 0.83em 0;
}
h3 {
font-size: 1.17em;
margin: 1em 0;
}
h4 {
font-size: 1em;
margin: 1.33em 0;
}
h5 {
font-size: 0.83em;
margin: 1.67em 0;
}
h6 {
font-size: 0.67em;
margin: 2.33em 0;
}
/**
* Address styling not present in IE 7/8/9, Safari 5, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
* Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
*/
b,
strong {
font-weight: bold;
}
blockquote {
margin: 1em 40px;
}
/**
* Address styling not present in Safari 5 and Chrome.
*/
dfn {
font-style: italic;
}
/**
* Address differences between Firefox and other browsers.
* Known issue: no IE 6/7 normalization.
*/
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
/**
* Address styling not present in IE 6/7/8/9.
*/
mark {
background: #ff0;
color: #000;
}
/**
* Address margins set differently in IE 6/7.
*/
p,
pre {
margin: 1em 0;
}
/**
* Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
*/
code,
kbd,
pre,
samp {
font-family: monospace, serif;
_font-family: 'courier new', monospace;
font-size: 1em;
}
/**
* Improve readability of pre-formatted text in all browsers.
*/
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}
/**
* Address CSS quotes not supported in IE 6/7.
*/
q {
quotes: none;
}
/**
* Address `quotes` property not supported in Safari 4.
*/
q:before,
q:after {
content: '';
content: none;
}
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* ==========================================================================
Lists
========================================================================== */
/**
* Address margins set differently in IE 6/7.
*/
dl,
menu,
ol,
ul {
margin: 1em 0;
}
dd {
margin: 0 0 0 40px;
}
/**
* Address paddings set differently in IE 6/7.
*/
menu,
ol,
ul {
padding: 0 0 0 40px;
}
/**
* Correct list images handled incorrectly in IE 7.
*/
nav ul,
nav ol {
list-style: none;
list-style-image: none;
}
/* ==========================================================================
Embedded content
========================================================================== */
/**
* 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
* 2. Improve image quality when scaled in IE 7.
*/
img {
border: 0; /* 1 */
-ms-interpolation-mode: bicubic; /* 2 */
}
/**
* Correct overflow displayed oddly in IE 9.
*/
svg:not(:root) {
overflow: hidden;
}
/* ==========================================================================
Figures
========================================================================== */
/**
* Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
*/
figure {
margin: 0;
}
/* ==========================================================================
Forms
========================================================================== */
/**
* Correct margin displayed oddly in IE 6/7.
*/
form {
margin: 0;
}
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct color not being inherited in IE 6/7/8/9.
* 2. Correct text not wrapping in Firefox 3.
* 3. Correct alignment displayed oddly in IE 6/7.
*/
legend {
border: 0; /* 1 */
padding: 0;
white-space: normal; /* 2 */
*margin-left: -7px; /* 3 */
}
/**
* 1. Correct font size not being inherited in all browsers.
* 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
* and Chrome.
* 3. Improve appearance and consistency in all browsers.
*/
button,
input,
select,
textarea {
font-size: 100%; /* 1 */
margin: 0; /* 2 */
vertical-align: baseline; /* 3 */
*vertical-align: middle; /* 3 */
}
/**
* Address Firefox 3+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
button,
input {
line-height: normal;
}
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
* Correct `select` style inheritance in Firefox 4+ and Opera.
*/
button,
select {
text-transform: none;
}
/**
* 1. Avoid the WebKit bug in Android 4.0.
* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
* 4. Remove inner spacing in IE 7 without affecting normal text inputs.
* Known issue: inner spacing remains in IE 6.
*/
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
*overflow: visible; /* 4 */
}
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* 1. Address box sizing set to content-box in IE 8/9.
* 2. Remove excess padding in IE 8/9.
* 3. Remove excess padding in IE 7.
* Known issue: excess padding remains in IE 6.
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
*height: 13px; /* 3 */
*width: 13px; /* 3 */
}
/**
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
}
/**
* Remove inner padding and search cancel button in Safari 5 and Chrome
* on OS X.
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Remove inner padding and border in Firefox 3+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* 1. Remove default vertical scrollbar in IE 6/7/8/9.
* 2. Improve readability and alignment in all browsers.
*/
textarea {
overflow: auto; /* 1 */
vertical-align: top; /* 2 */
}
/* ==========================================================================
Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
Vicki Greer
5,020 PointsHey, Anthony Hill and Marcus Parsons,
That first file does not look like it came through correctly, but I don't know what I did wrong. Here are the remaining files, separated by the three back-ticks ```
Thanks in advance for any help you can supply! Vicki Greer
/**************************
GENERAL main.css file
***************************/
body {
font-family: 'Open Sans', sans-serif;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
}
h3 {
margin: 0, 0, 1em, 0;
}
/**************************
HEADING
***************************/
header {
float: left;
margin: 0, 0, 30px, 0;
padding: 5px, 0, 0, 0;
width: 100%;
}
#logo {
text-align: center;
margin: 0;
}
h1 {
font-family: 'Changa One', sans-serif;
margin: 15px 0;
font-size: 1.75em;
font-weight: normal;
line-height: 0.8ems;
}
h2 {
font-size: 0.75em;
margin: -5px 0 0;
font-weight: normal;
}
/**************************
NAVIGATION
***************************/
nav {
text-align: center;
padding: 10px 0;
margin: 20px 0 0;
}
nav ul {
list-style: none;
margin: 0, 10px;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
font-weight: 800;
padding: 15px 10px;
}
/**************************
FOOTER
***************************/
footer{
font-size: 0.75 em;
text-align: center;
clear: both;
padding-top: 50px;
color: #ccc;
}
.social-icon {
width: 20px;
height: 20px;
margin: 0 5px;
}
/**************************
PAGE: PORTFOLIO
***************************/
#gallery {
margin: 0;
padding: 0;
list-style: none;
}
#gallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
#gallery li a p {
margin: 0;
padding: 5%;
font-size: 0.75em;
color: bdc3c7;
}
/**************************
PAGE: ABOUT
***************************/
.profile-photo {
display: block;
clear: both;
max-width: 150px;
margin: 20px auto 30px auto;
border-radius: 100%;
padding: 15px;
}
.contact-info a {
display: block;
min-height: 20px;
background-repeat: no-repeat;
background-size: 20px 20px;
padding: 0 0 0 30px;
margin: 0 0 10px;
}
.contact-info li.phone a {
background-image: url('../img/phone.png');
}
.contact-info li.mail a {
background-image: url('../img/mail.png');
}
.contact-info li.twitter a {
background-image: url('../img/twitter.png');
}
/**************************
PAGE: CONTACT
***************************/
.contact-info {
list-style: none;
padding: 0;
margin:: 0;
font-size:: 0.9em;
}
/**************************
COLORS
***************************/
/* site body */
body {
background-color: #fff;
color: #999;
}
/* green header */
header {
background: #6ab47b;
border-color: #599a68;
}
/* nav background on mobile */
nav {
background: #599a68;
}
/* logo text */
h1, h2 {
color: #fff;
}
/* links */
a {
color: #6ab47b;
}
/* nav link */
nav a, nav a:visited {
color: #fff;
}
/* selected nav link */
nav a.selected, nav a:hover {
color: #32673F;
}
@media screen and (min-width: 480px) {
/**************************
TWO COLUMN LAYOUT - responsive.css file
***************************/
#primary {
width: 50%;
float: left;
}
#secondary {
width: 40%;
float: right;
}
/**************************
3 columns * 5 margins on each side = 15
/* 100 (percent) - 15 (percent taken up by margins) = 85 (percent of screen available for three images)
85 / 3 = 28.333 (space for each image)
***************************/
/**************************
PAGE: PORTFOLIO
***************************/
#gallery li {
width: 28.3333%;
}
/* nth-child(3n + 1) selects every 3rd element plus 1, allowing for more than 5 images */
#gallery li:nth-child(3n + 1) {
clear: left;
}
/**************************
PAGE: ABOUT
***************************/
.profile-photo {
float: left;
margin: 0 5% 80px 0;
}
}
@media screen and (min-width: 660px) {
/**************************
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 #599868;
margin-bottom: 60px;
}
/**************************
PAGE: ABOUT
***************************/
.profile-photo {
float: left;
margin: 0 5% 80px 0;
}
}
<!-- - about.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vicki Greer | Developer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?
family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/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>
<body>
<header>
<a href="index.html" id="logo">
<h1>Vicki Greer</h1>
<h2>Developer</h2>
</a>
<nav>
<ul>
<li><a href="index.html">Portfolio</a></li>
<li><a href="about.html" class="selected">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<img src="img/vicki.jpg" alt="Photograph of Vicki Greer" class="profile-photo">
<h3>About</h3>
<p>Hi, I'm Vicki Greer. I am a Front End Web Developer based in Jeffersonville, VT. This is my
portfolio site where I show off some of my favorite work.</p>
<p>I have experience in HTML, CSS, JavaScript, jQuery, Ruby and Git.</p>
<p>I have been programming computers and teaching classes in various computer languages for
many years. I communicate well with both technical and non-technical people. I have the experience to
understand your needs, and the ability to turn those needs into something outstanding.</p>
<p>Contact me, and together we can turn your dream into a beautiful website.</p>
</section>
<footer>
<a href="http://twitter.com/myaccount">
<img src="img/twitter-wrap.png" alt="twitter logo" class="social-icon">
</a>
<a href="http://www.facebook.com/profile.php?id=100004812998624">
<img src="img/facebook-wrap.png" alt="facebook logo" class="social-icon">
</a>
<p>© 2015 Vicki Greer.</p>
</footer>
</div>
</body>
</html>
Vicki Greer
5,020 PointsThank you, Marcus Parsons, for answering my question and giving me the resources to figure out why the change was necessary. And thank you, too, Anthony Hill, for encouraging me to ask the experts.
Vicki Greer
Marcus Parsons
15,719 PointsAnytime, Vicki! If you don't have any more questions, you should go ahead and select a best answer so we can close this question out. :)
Anthony Hill
Courses Plus Student 4,567 PointsAnthony Hill
Courses Plus Student 4,567 PointsHi Vicki,
You can copy and post your code here for us to take a look at - just do it like this. Wrap your code with 3 backticks (```) on the line before and after. If you specify the language after the first set of backticks, that'll help us with syntax highlighting.
Kind Regards, Anthony