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 Styling Web Pages and Navigation Style the Image Captions

Posted by Simon sydendal
Simon sydendal
405 Points

Images doesn't align in two'es like in the video.

My images does not react the same way as yours shown in the video. How could that be, have i done something wrong along the way?

6 Answers

lovell
lovell
7,882 Points

Theres a : missing after your width selector. Try that :-)

Simon sydendal
Simon sydendal
405 Points

Ha ha, nice one. I definitely managed to miss that one even after several hours. Thank you so much!

Ricardo Hill-Henry
Ricardo Hill-Henry
38,442 Points
Ricardo Hill-Henry
Ricardo Hill-Henry
38,442 Points

Post some example code.

Simon sydendal
Simon sydendal
405 Points

Thank you for the quick reply.

Was taught that using the float: left; code would make the images appear side by side. In this specific case 2 images on mobile and 3 on desktop.

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


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

h1{
  font-family: 'Roboto', 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 0;
  }

  /*******************************************************
footer
********************************************************/



footer {
  font-size: 0.75em;
  text-align: center;
  padding-top: 50px;
  color: #ccc;
  margin:
  text-align: center;
    }

/*******************************************************
page portfolio
********************************************************/


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

#gallery li, #gallery li:visited {
  float:left;
  width 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7
}

/*******************************************************
COLORS
********************************************************/

/*over nav link*/
nav a.selected, nav a:hover {
  color: #43563f}

/*site body*/
body {
  background-color: #f5f5f5;
  color: #f5f5f5;
  }

header {
  background: #eba133;
  border-color: #500a68
  }

nav {
  background: #888888;
  }

/*logo text*/
h1, h2 {
  color: #f5f5f5; }

/*link color*/
a {
  color: #EBA133;
  }

/*nav link*/

nav a, nav a:visited {
  color: #eba133;
  font-family: 'Roboto', sans-serif
  font-weight: normal;
  line-height: 0.8em;
}
lovell
lovell
7,882 Points
lovell
lovell
7,882 Points

Are your images set to a reasonable size? ie you don't want them at 100% where they wont fit side by side because they'll take up whole screen.

Simon sydendal
Simon sydendal
405 Points

I've tried putting them to 30% and they still won't align.

lovell
lovell
7,882 Points
lovell
lovell
7,882 Points

No probs, glad to help. Good luck.

PS: Put http://codepen.io/ in your favourites. It's great for using to post issues on here.

Ryan Scott
Ryan Scott
989 Points
Ryan Scott
Ryan Scott
989 Points

HI, I am having the exact same problem. I can't figure out how to make my pictures format into two columns. Can someone please look at my code and give some suggestions. Thank you so much!

Ryan Scott
Ryan Scott
989 Points
Ryan Scott
Ryan Scott
989 Points

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

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

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

footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }

/*************************************** PAGE: PORTFOLIO ****************************************/

gallery {

margin: 0; padding: 0; list-style: none; }

gallery li {

float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; }

/*************************************** COLORS ****************************************/

/* site body */ body { background-color: #fff; color: #999; }

/* green header */ header { background: #a95a1d; border-color: #2b7b6b; }

/* nav background on mobile */ nav{ background: #2b7b6b; }

/* logo text*/ h1, h2 { color: #fff; }

/* Links */ a { color: #a95a1d; }

/* color for nav link*/ nav a, nav a:visited { color: #fff; }

/* selected nav link */ nav a.selected, nav a:hover { color: #3267f3; }