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 Max Reinsch
Max Reinsch
5,740 Points

Making a neat and precise picture gallery

http://s27.photobucket.com/user/MaxReinsch/media/help.png.html

How would I go about making the images the same size (assuming that's best practice) and lining them up with some consistency/precision?

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




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


/*  naviagtion */


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


#gallery {
  margin:0;
  padding:0;
  list-style:none;
}

#gallery li {
  float:left;
  width:45%;
  margin:0 2.5% 0 0;
  background-color:#746FF7B;
  color:#bdc3c7;
  min-height:800px;
  max-height:800px;
}

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

#gallery li a {
 max-height:600px;
 min-height:600px;  
 max-width:45%;
 min-width:45%;




}



.profile-photo {
  display:block;
  max-width:150px;
  margin:0 auto 30px;
  border-radius:100%;  
}

/*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;
  padding:0 0 0 30px;
  margin:0 0 10px;
  color:#999;
}

.contact-info a:hover {
  color:#0900EF;
  font-size:1.5em;
  padding-left:40px;
  font-weight:bold;
}

.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 li.linkedin a {
  background-image:url('../img/linkedin.png');  
}
/* page portfolio */
body {
  background-color:#746FF7;
  color:#999;  
}

a {
  color:#746FF7;  
}

header {
  background:#453EF7;
  boder-color:#06009B;
}

h1, h2 {
  color:#fff;  
}

nav {
   background:#06009B; 
}

nav a, , nav a:visited {
  color:#fff;  
}

nav a.selected, nav a:hover {
  color:#0900EF;    
}


/*  Site body */

3 Answers

Nick Pettit
STAFF
Nick Pettit
Treehouse Teacher
Nick Pettit
Nick Pettit
Treehouse Teacher

Hi everyone,

I edited your posts so that your code is properly formatted. Please check out the Markdown Cheatsheet to see how this is done, or edit your own posts to view the proper formatting. :)

Justin Hunter
PLUS
Justin Hunter
Courses Plus Student 11,484 Points
Justin Hunter
Justin Hunter
Courses Plus Student 11,484 Points

Hi Max, couple things for you to try:

For this line of code:

gallery li {
float:left; width:45%; margin:0 2.5% 0 0; background-color:#746FF7B; color:#bdc3c7; min-height:800px; max-height:800px; }

set the margin to 2.5% instead of 0 2.5% 0 0

Also, on this line:

gallery li a {
max-height:600px; min-height:600px;
max-width:45%; min-width:45%;}

Try just applying margin, padding, color, and font-size like this: 

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

I have a feeling that the max and min-height for the anchor element is applying to the image and causing you problems.

Max Reinsch
Max Reinsch
5,740 Points
Max Reinsch
Max Reinsch
5,740 Points

Thanks for getting back to me Justin.

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




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


/*  naviagtion */


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


#gallery {
  margin:0;
  padding:0;
  list-style:none;
}

#gallery li {
  float:left;
  width:45%;
  margin:2.5%;
  background-color:#746FF7B;
  color:#bdc3c7;
  min-height:800px;
  max-height:800px;
}

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

.profile-photo {
  display:block;
  max-width:150px;
  margin:0 auto 30px;
  border-radius:100%;  
}



/*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;
  padding:0 0 0 30px;
  margin:0 0 10px;
  color:#999;
}

.contact-info a:hover {
  color:#0900EF;
  font-size:1.5em;
  padding-left:40px;
  font-weight:bold;
}

.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 li.linkedin a {
  background-image:url('../img/linkedin.png');  
}
/* page portfolio */
body {
  background-color:#746FF7;
  color:#999;  
}

a {
  color:#746FF7;  
}

header {
  background:#453EF7;
  boder-color:#06009B;
}

h1, h2 {
  color:#fff;  
}

nav {
   background:#06009B; 
}

nav a, , nav a:visited {
  color:#fff;  
}

nav a.selected, nav a:hover {
  color:#0900EF;    
}

section a {
  color:#bdc3c7;
}


/*  Site body */

Result- http://i27.photobucket.com/albums/c165/MaxReinsch/2.png

Can't see any difference.

Max Reinsch
Max Reinsch
5,740 Points

Nick Pettit, any ideas?

Nick Pettit
Nick Pettit
Treehouse Teacher
Nick Pettit
Nick Pettit
Treehouse Teacher

Max Reinsch,

At the 2:10 mark in this video I mention that the site works best with images sized to 1024x768 pixels. Otherwise, you'll see results like the one you're getting.

In other words, you'll need to resize or crop your images in a separate image editing program. I see you're using Ubuntu, so you'll probably want to use GIMP for this.

Max Reinsch
Max Reinsch
5,740 Points

Thanks Nick!

Nick Pettit
Nick Pettit
Treehouse Teacher
Nick Pettit
Nick Pettit
Treehouse Teacher

No problem! Hope that helps. :)