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

Posted by Kyle Biancardi
Kyle Biancardi
1,674 Points

how do you keep the images to stay responsive to web pages size?

I am building my portfolio page and having trouble keeping my gallery responsive. It is defiantly responding however when i shrink it down to mobile sized my middle left image gets pushed over to the right leaving an empty space where it came from. Please help me, i can't seem to find my error.

Much appreciated,

Kyle

here is my code and url for the web page: http://port-80-36ggxrr814.treehouse-app.com/

here is my code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Kyle Biancardi | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Holtwood+One+SC|Cinzel+Decorative|NTR' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logos">
        <h1>Kyle Biancardi</h1>
        <h2>Designer</h2>
      </a>
      <div id="nav">
        <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>
      </div>
  </header>
  <div id="wrapper">
    <section>
     <ul id="gallery">
      <li>
        <a href="img/numbers-01.jpg">
          <img src="img/numbers-01.jpg" alt="">
          <p>Learning texture and Colors</p>
        </a>
      </li>
      <li>
        <a href="img/numbers-02.jpg">
          <img src="img/numbers-02.jpg" alt="">
          <p>Playing with Drips</p>
        </a>
      </li>
      <li>
        <a href="img/numbers-06.jpg">
          <img src="img/numbers-06.jpg" alt="">
          <p>Trying 80's Glow!</p>
        </a>
      </li>
      <li>
       <a href="img/numbers-09.jpg">
        <img src="img/numbers-09.jpg" alt="">
         <p>playing with brush</p>
       </a>
      </li>
      <li>
       <a href="img/numbers-12.jpg"> 
        <img src="img/numbers-12.jpg" alt="">
         <p> playing with repitions</p>
      </a>
     </li>
     </ul>   
    </section>  
    <footer>
       <a href="http://www.facebook.com" alt="facebook logo">
        <img src="img/facebook-wrap.png">
      </a>
      <a href="http://www.twitter.com" alt="twitter logo">
        <img src="img/twitter-wrap.png">
      </a>
      <p>&copy; 2014 Kyle Biancardi</p>
    </footer>
  </div>
 </body>
</html>

/******************************
 General Basic Design CSS Page
******************************/
a {
 text-decoration: none;
}

img{
max-width: 100%;
}

}
/**************************
Page Content imgs, captions
**************************/
#wrapper{
  max-width: 940px;
  margin:0 auto;
  text-align:center;
  padding:0 5%; 
  font-family: 'ntr',sans-serif;
}
/******************
    Headlines
******************/
#logos{
  text-align: center;
  margin:0;
}
h1 {
  font-family: 'cinzel decorative', sans-serif;
  margin:5px 0;
  padding-top: 2%;
  font-size:1.5em;
}
h2{
  font-family:'cinzel decorative', sans-serif;
  margin: -2px 0 0;
  padding-bottom:-3%;
  font-size: 1.35em;
}
header{
  float: left;
  margin: 0;
  padding: 5px 0 0 0;
  width:100%;
  background:#990000;
}
h1,h2, h1:visited{
 color:#fff; 
} 
/******************
 Navigation 
******************/
nav{
  font-family:'poiret one',sans-serif;
  font-weight:normal;
  font-size:1.75em;
}
nav li{
  display: inline-block;
  margin: 0 px 0 10px;


}
nav{
   text-align: center;  
}
nav{
  background:#cccccc;
}
nav a, nav a:visited{
 color:#fff;
}
nav a.selected{
color:#cc0000;
} 
nav a:hover{
color:#cc0000;  
}
/******************
    Body
******************/
body{
  background:#fff;
}
footer{
  text-align:center;
  font-size: 0.75em;
  clear:both;
  color:#999;
  margin:5px 0 0;
  padding-top:-5px;
}

/**************************
Portfoilio Design
**************************/

#Gallery{
  margin:0;
  padding:0;

}

#gallery li{
  list-style:none;
  float:left;
  width:45%;
  margin:2.5%;
  background:#f5f5f5;
  text-align:center;
}

#gallery li a p{
margin: 0;
padding: 5%;
color: #bdc3c7;
font-size: 0.75em;
}

2 Answers

Dan Oswalt
Dan Oswalt
23,438 Points

Great! If you can mark it best answer, I'd appreciate it.

Dan Oswalt
Dan Oswalt
23,438 Points
Dan Oswalt
Dan Oswalt
23,438 Points

The caption under your top-left picture rolls onto a second line when the screen width gets smaller, which make the height up that element just big enough to cause problems when the size is small. I don't think the styling of the images is the problem. If you fiddle with the font-size of the captions, I'll bet that will fix it.

Dan Oswalt
Dan Oswalt
23,438 Points

Yeah, I just tested the p font-size at 0.5 em, and it works.

Kyle Biancardi
Kyle Biancardi
1,674 Points

thank you bud much appreciated