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

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

Danilio Moreno
Danilio Moreno
929 Points

Margins are not working, no spacing between pic and wording wraps around in mobile mode.

My code is the same as nick's but not working, it does float left but the rest of the code does not seem to work.

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

      .profile-photo {
          float: left;
          margin: 0 5% 80px 0;
      }
}
Danilio Moreno
Danilio Moreno
929 Points

the } at the very bottom is from the @media screen and (min-width: 480px) {

Guil Hernandez
Guil Hernandez
Treehouse Teacher

Hi Danilio Moreno,

Can you please post the rest of the CSS? Your code looks correct, but it looks like you have a closing } that I'm not sure which rule it belongs to. :)

Danilio Moreno
Danilio Moreno
929 Points
@media screen and (min-width: 480px) {
    /****************************
    TWO COLUMN LAYOUT
    ****************************/
    #primary {
          width: 50%;
            float: left;
     }

     #secondary {
            width: 40%;
              float: right;
      }

     /***********************
     PAGE: PORTFOLIO
     ***********************/
    #gallery li {
            width: 28.3333%;
     }

     #gallery li:nth-child(4n)
            clear: left;
     }

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

      .profile-photo {
                float: left;
             margin: 0 5% 80px 0;
      }

}
Danilio Moreno
Danilio Moreno
929 Points

The wording no longer wraps around, but when I shrink the page to mobile mode the picture does not stack on top of the wording. Please help!!!!

3 Answers

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher

In that case, your media query looks fine. If the issue is happening in the "mobile view," it sounds like it might be the code in your default/main CSS—not the media query.

Danilio Moreno
Danilio Moreno
929 Points

I've gone step by step and everything has worked properly up till now. Iooked at my css in main, could this be it?

.profile-photo {
   clear: both;
   display: block;
   max-width: 150px;
   margin: 0 auto 30px;
   border-radius: 100%
}
Danilio Moreno
Danilio Moreno
929 Points

How do I go about double checking that? Everything has gone according to the videos up till this point.

</header>
    <div id="wrapper">
      <section id="primary">
        <h3>General Information</h3>
        <p>I am not currently looking for new design work, but I am available for speaking gigs and similiar engagements.  If you have questions, please don't hesitate to contact me!</p>
        <p>  Please only use phone contact for urgent inquiries.  Otherwise, Twitter and email are the best way to reach me.</p>
      </section>
      <section id="secondary">
        <h3>Contact Details</h3>
        <ul class="contact-info">
          <li class="phone"><a href="tel:555-6425">555-6425</a></li>
          <li class="mail"><a href="mailto:nick@example.com">nick@example.com</a></li>
          <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=nickrp">@nickrp</a></li>
        </ul>
      </section>
Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher

Hi there,

It looks like you're also missing a ; after the value 40%:

#secondary {
  width: 40%
  float: right;
}
Danilio Moreno
Danilio Moreno
929 Points

actually that is a typo on my part, it is there on my css

Sean T. Unwin
Sean T. Unwin
28,690 Points

Remove float: left; from the header rule in main.css.

i.e (main.css)

/**********************************
HEADING
***********************************/

header {
  float: left; /* Remove this line: */
  margin: 0 0 30px 0;
  padding: 5px 0 0 0;
  width: 100%;
}
Danilio Moreno
Danilio Moreno
929 Points

removing the float screws up the rest of my page, for example, when I enlarge the Portfolio Page the About and Contact disappear and the first picture is out of alignment. On the About page the darker green background behind the Portflio About and Contact wording is still there even though the background was removed.