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

Posted by Unsubscribed User
Unsubscribed User
2,512 Points

Adjust my contact page my header "Portfolio About Contact" heading disappear when I float and make window larger 660px

I have three issues, 1) when I adjust my media screen to 660px I loose my porfolio, about and contact header. 2) my logo is always on left never center 3) on my contact page the phone, twitter, and email icons are underneath type Here is my coding in responsive.css @media screen and (min-width: 480px){

PLEASE HELP...LOL

/*************************** TWO COLUMN LAYOUT ***************************/

primary {

width: 50%;
float: left;

}

secondary {

width: 40%;
float: right;

}

/*************************** 3 X ? 2.5 margin +2.5 margin so 3X 5=15 100%-15% = 85% 85 / 3+ 28.3333333333333333 ***************************/

/*************************** PAGE:PORTFOLIO ***************************/

gallery li {

width: 28.333%; } #gallery li:nth-child(4n) { 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: 2.5em; margin-bottom: 20px; }

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

} Here's my coding in main.css /*************************** GENERAL ***************************/ 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: center; 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.8em; }

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; }

/*************************** 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 { clear: both; display:block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }

/*************************** PAGE: CONTACT ***************************/

.contact-info { list-style: none; padding: 0; margin: 0; font-size: 0.9em; }

.contact-info a { display: block; min-height: 20px; background-repeat: no-repeat; background-size: 20px 20px; margin: 0 0 0 30px;

}

.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') } /*************************** 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; }

/*************************** FOOTER ***************************/ footer { font-size: 0.75em; text-align: center; clear: both; color: #ccc; } .social-icon { width: 20px; height: 20px; margin: 0 5px; }

Coding In my index.html: <!DOCTYPE> <html> <head> <meta charset="utf-8"> <title>Kim Grisco | Photography></title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/media.css"> <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic,800italic|Changa+One' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> </head> <body> <header> <a href:="index.html"> <h1>Kim Grisco</h1> <h2>Photography</h2> </a> <nav> <ul> <li><a href="index.html">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul id="gallery"> <li> <a href="img/numbers-01.jpg"> <img src="img/numbers-01.jpg" alt=""> <p>Tricks in Photoshop.</p> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>Drips created using photoshop brushes.</p> </a> </li><li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Trying to create an 80's style of glows.</p> </a> </li><li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Creating shapes using Repitition.</p> </a> </li><li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Playing with blending modes in Photoshop.</p> </a> </li>

    </ul>
  </section>
  </div>
  <footer>
    <a href="http://twitter.com/kimgrisco"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>

    <a href="http://facebook.com/kimberlygrisco"><img src="img/facebook-wrap.png" alt="Facebook Logo"class="social-icon">
    </a>
    <p>&copy; 2014 kimgriscophoto</p>
  </footer>
</body>

</html>

Jacob Miller
Jacob Miller
12,466 Points
Jacob Miller
Jacob Miller
12,466 Points

I haven't looked through all your code yet, but for one thing you're missing a semicolor after the margin-left value on the #logo inside your second media query.

#logo {
    float: left;
    margin-left: 5% <-- MISSING SEMICOLON
Unsubscribed User
Unsubscribed User
2,512 Points

Thanks Jacob! this helped to and I did have it incorrect. I also had a problem with my main css float: center; should have been float: left;

5 Answers

Jacob Miller
Jacob Miller
12,466 Points
Jacob Miller
Jacob Miller
12,466 Points

You need to change margin below to padding. Margin will add space outside of an element's border, while padding will add space between an element's content and it's border. So with the margin you have set below, you are simply moving the entire anchor element to the right, but what you want to do is move only the content (the text) inside the anchor element away from it's left border to make space for the icon.

.contact-info a {
    display: block;
    min-height: 20px;
    background-repeat: no-repeat;
    background-size: 20px 20px;
    margin: 0 0 0 30px;  <--- CHANGE THIS TO padding: 0 0 0 30px;
}
Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Kimberly,

In main.css you have float: center; for your header. It should be float: left

This should take care of issue #1. Let us know if it doesn't.

Timothy Ahrens
Timothy Ahrens
914 Points

This fixed my issue of having my header disappear when wider than the 660px break point. Somehow I didn't have a float property at all. How did I miss that?!

Unsubscribed User
Unsubscribed User
2,512 Points
Unsubscribed User
Unsubscribed User
2,512 Points

Thank you so Much " my main Css was the issue should have been float: left like you advised! Thank you!

K

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

You're welcome.

Did the 2 fixes here resolve issues 2 and 3 for you?

Unsubscribed User
Unsubscribed User
2,512 Points
Unsubscribed User
Unsubscribed User
2,512 Points

2 issues were resolved I still have problem with phone email and icons on my contact page

Unsubscribed User
Unsubscribed User
2,512 Points
Unsubscribed User
Unsubscribed User
2,512 Points

Hi Jacob, no wonder I couldn't figure it out! Thanks so much ... this worked and solved the problem. I need much more practice