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

General Discussion

Jason Nelson
Jason Nelson
6,209 Points
Posted by Jason Nelson
Jason Nelson
6,209 Points

My image falls off to the second row when i shrink my tab for mobile display.

I just noticed when I reduce my window to show what a mobile display might look like one of my images skips to the next row. It's perfect in full screen desktop mode but not mobile?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Jason Nelson | Casual Consumer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:600italic,700italic,400,800,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Jason Nelson</h1>
        <h2>Casual Consumer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">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>This is an example of my new artwork.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-02".jpg">
            <img src="img/numbers-02.jpg" alt="">
            <p>Photoshop.</p>
            </a>
          </li>


    <li>
            <a href="img/numbers-06".jpg">
            <img src="img/numbers-06.jpg" alt="">
            <p>Dripsk.</p>
            </a>
          </li>

    <li>
            <a href="img/numbers-09".jpg">
            <img src="img/numbers-09.jpg" alt="">
            <p>New shapes.</p>
            </a>
          </li>

    <li>
            <a href="img/numbers-12".jpg">
            <img src="img/numbers-12.jpg" alt="">
            <p>This is an example of my new artwork.</p>
            </a>
          </li>


        </ul>
      </section>
      <footer>
        <a href="http://twitter.com/seattlefootclan"><img src="img/twitter-wrap.png" alt="Twitter logo" class=" social-icon"></a>
        <a href="http://facebook.com/Jasonnelson"><img src="img/facebook-wrap.png" alt="Facebook logo" class="social-icon"></a>
        <p>&copy; 2014 Jason Nelson.</p>
      </footer>
  </body>
</div>
</html>

```/

```/
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%;
}


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

h2 {
    font-size: 0.75em;
    margin: -5px 0 0;
    font-weight: normal;

}


/***********************************
NAVIGATION

************************************/

nav {
    text-align: center;
    padding: 10px 0;
    margin: 20px 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;
    heigth :20px;
    margin: 0 5px;
}

```/

1 Answer

Jason Nelson
Jason Nelson
6,209 Points
Jason Nelson
Jason Nelson
6,209 Points

Maybe the layout is right but I don't think so. Any help would be great. thanks