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

Pascal Houben
Pascal Houben
7,566 Points
Posted by Pascal Houben
Pascal Houben
7,566 Points

Icons on Contact Page appear behind General Information Text in Full Screen Mode

For whatever reasons, the contact icons that appear to the left of the contact details when the width of browser screen is reduced to the minimum, appear in the background of the 'General Information' (1st column) in full screen mode.

Why don't the icons move with the 'Contact Details' to the right side? What additional code needs to be entered in the Responsive.css to make this happen?

Please help! Thx!

Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

What's the time index in the video where you see this?

Ashish Mehra
Ashish Mehra
Courses Plus Student 103 Points

kindly paste your code....

5 Answers

Pascal Houben
Pascal Houben
7,566 Points
Pascal Houben
Pascal Houben
7,566 Points

Well, this is my main.css code:

/********************
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: left;
  margin: 0 0 30px 0;
  padding 5px 0 0 0;
  width: 100%;
}

#logo {
  text-align:: center;
  margin: 0 none;
}

h1 {
  font-family: 'Changa One', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normail;
  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;
}



/********************
FOOTER
*********************/

footer {
  font-size: 0.75em;
  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 {
  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 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');
}

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



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

Thanks!

Jason Ruby
Jason Ruby
2,867 Points
Jason Ruby
Jason Ruby
2,867 Points

I am having the same issue and cannot figure out why. My main.css is the same as Pascal's. Here is the responsive.css I am using.

Jason Ruby
Jason Ruby
2,867 Points
Jason Ruby
Jason Ruby
2,867 Points 
@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){

}

/************************************
PAGE: ABOUT
************************************/

.profile-photo {
  float: left;
  margin: 0 5% 80px 0;
}
Pascal Houben
Pascal Houben
7,566 Points
Pascal Houben
Pascal Houben
7,566 Points

Thanks Jason for adding the Responsive.css. it looks the same as mine. I kinda have the feeling that this issue wasn't covered in the videos on adding responsiveness to the website since these are only focusing on the 'Gallery' and 'About' pages but say nothing about the 'Contact' page.

Dear Team Treehouse Administrator: Please clarify!

Thx!

Pascal

Jason Ruby
Jason Ruby
2,867 Points
Jason Ruby
Jason Ruby
2,867 Points

Pascal, I've managed to figure out what was causing the issue for me, but as I write this I cannot specifically remember what it was that I changed. I do remember one of the things I found was a syntactical error on my part. In the CSS rule we created in responsive.css for the #secondary ID class I did not have a semicolon (;) after declaring the 40% value for the width property. Also in responsive.css, the first media query (@media screen and (min-width: 480px){) I found that there was a closing brace ("curly bracket") after the #secondary rule that was to close the first media query. This seemed to make sense, but after I deleted it the responsive.css seemed to work better. I've posted my responsive.css below which now seems to work as it should. I hope this helps!

Pascal Houben
Pascal Houben
7,566 Points
Pascal Houben
Pascal Houben
7,566 Points

Hey Jason, just out of fun I just changed the allocation of float positions of the .primary and .secondary selectors. I assigned the .secondary selector to float to the left and the .primary selector to float to the right and now the icons appear again nicely next to the contact details. Therefore, I guess, an additional CSS rule for the logos need to be included in the Responsive.css ...

Jason Ruby
Jason Ruby
2,867 Points
Jason Ruby
Jason Ruby
2,867 Points 
@media screen and (min-width: 480px){

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

  #primary {
    width: 50%;
    float: left;
    margin: 0px 0.5em 0px 0.5em;
  }

  #secondary {
    width: 40%;
    float: right;
    margin: 0px 0.5em 0px 0.5em;
  }


/************************************
PAGE: PROTFOLIO
************************************/

#gallery li {
    width: 28.333%;
  }
#gallery li:nth-child(4n){
  clear: left;
}



@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 #599a68;
      margin-bottom: 60px;
    }
}

/************************************
PAGE: ABOUT
************************************/

.profile-photo {
  float: left;
  margin: 0 5% 80px 0;
}
Pascal Houben
Pascal Houben
7,566 Points
Pascal Houben
Pascal Houben
7,566 Points

Thanks a lot Jason! Seems that I also had a syntactical error ... Thx!