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

HTML How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

Tobias Edwards
Tobias Edwards
14,458 Points
Posted by Tobias Edwards
Tobias Edwards
14,458 Points

[SOLVED] Images in 2 columns are organized wrong

Hi, I have exactly the same issue as Alexander Strand, but I keep getting an error when try to post a comment so I was forced to create a separate post.

He said in a comment:

"...The text underneath my first photo still causes the 3rd photo to move. I could just make the text a bit shorter... but that is not a good way to fix things in the long run."

Basically, whenever I resize the screen so it is small and the images are supposed to fit inside two columns, the 3 images does not slot underneath the first image, but it moves underneath the second image.

So if my caption is too long, this causes the images to not fall into place as supposed to but slide underneath the image with a small caption.

Does anyone have a solution to this problem?

Thank you

SOLUTION I tried Stackoverflow for a solution and someone suggested a really easy solution:

<!-- Add this to your main.css -->
#gallery li:nth-child(odd) {
    clear: left;
}

<!-- Make this change to your responsive.css -->
#gallery li:nth-child(odd) {
        clear: none;
}

The first part will tell the text to split every second image to solve my 2 column image problem, and the second part of CSS overwrites the first part when the screen is a certain size so that it splits after every odd image (in our case 3), I think :)

Joe Consterdine
Joe Consterdine
13,965 Points
Joe Consterdine
Joe Consterdine
13,965 Points

Hi Tobias,

can I see your code please?

Thanks

Tobias Edwards
Tobias Edwards
14,458 Points
Tobias Edwards
Tobias Edwards
14,458 Points

My commenting isn't working consistently so that's why I posted it as an answer. Tell me if you need to see the about.html and contact.html, but I didn't think they were needed.

THANK YOU!

Tobias Edwards
Tobias Edwards
14,458 Points
Tobias Edwards
Tobias Edwards
14,458 Points

I have checked my code for syntax errors, and I have found none. The problem is the caption for my first image is big, consequently (when in two column mode) the 3rd image doesn't fit underneath the first image. The easy solution is to make the first image caption smaller, but I don't want to have to do that....

4 Answers

Joe Consterdine
Joe Consterdine
13,965 Points
Joe Consterdine
Joe Consterdine
13,965 Points

Hi Tobias,

I wouldn't worry about fixing that because when you learn more about responsive design you will understand that you won't usually have these pictures side by side at that screen size.

At smaller screen sizes you will start stacking the images on top of each other rather than side by side trying to fit everything on.

So if you remove the float and width from your gallery li and look you will see the images stack one by one.

Just keep learning and you'll get there!

Good luck.

Tobias Edwards
Tobias Edwards
14,458 Points
Tobias Edwards
Tobias Edwards
14,458 Points

Cheers, mate for all your help :) I'm going to sleep now

Jake Ford
Jake Ford
9,230 Points
Jake Ford
Jake Ford
9,230 Points

If you just add one more media query to the responsive css, it will fix it:

@media screen and (max-width: 480px){
     #gallery li:nth-child(odd){
      clear: left;
  }
}

Opposite of min-width: 480px, this will focus on anything below 480px, which would be mobile.

Tobias Edwards
Tobias Edwards
14,458 Points
Tobias Edwards
Tobias Edwards
14,458 Points

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Tobias Edwards | Programmer</title>
    <link rel="stylesheet" href="css/normalize.css" />
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' 
rel='stylesheet' type='text/css' />
    <link rel="stylesheet" href="css/main.css" />
    <link rel="stylesheet" href="css/responsive.css" />
    <meta name="viewport" content="width-device-width, initial-scale=1.0" />
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Tobias Edwards</h1>
        <h2>Programmer</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/blocks.jpg">
              <img src="img/blocks.jpg" alt="" />
              <p>Building a city from the ground up.</p>
            </a>
          </li>
          <li>
            <a href="img/code.jpg">
              <img src="img/code.jpg" alt="" />
              <p>Beautiful code.</p>
            </a>
          </li>
          <li>
            <a href="img/skier.jpg">
              <img src="img/skier.jpg" alt="" />
              <p>Marinus Kraus of Germany, ski jumper.</p>
            </a>
          </li>
          <li>
            <a href="img/android.jpg">
              <img src="img/android.jpg" alt="" />
              <p>Android intelligence is powerful.</p>
            </a>
          </li>
          <li>
            <a href="img/woodland.jpg">
              <img src="img/woodland.jpg" alt="" />
              <p>An adventurous woodland.</p>
            </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="https://twitter.com/EdwardsTobias"><img src="img/twitter-wrap.png" alt="Twitter Logo"
class="social-icon"></a>
        <a href="https://www.facebook.com/edwardstobias"><img src="img/facebook-wrap.png" alt="Facebook Logo"
class="social-icon"></a>
        <p>&copy; 2015 Tobias Edwards.</p>
      </footer>
    </div>
  </body>
</html>

main.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%;
}

h3 {
  margin: 0 0 1em 0;
}



/**********************************
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 0;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding: 10px 15px;
}



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



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

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

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

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



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

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



/**********************************
PAGE: 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;
}

.contact-info li.mail a {
    background-image: url('../img/phone.png');
}

.contact-info li.twitter a {
    background-image: url('../img/twitter.png');
}



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

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

/* green header */
header {
  background: #6ab47b;
  border-color: #599a68;
}

/* nav background on mobile */
nav {
  background: #599a68;
}

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

/* links */
a {
  color: #6ab47b;
}

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

/* selected nav link */
nav a.selected, nav a:hover {
  color: #32673f;
}

responsive.css

@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(3n+1) {
        clear: left;
    }



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

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

@media screen and (min-width: 660px) {

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

    nav {
        background: none;
        float: right;
        font-size: 1.125em;
        margin-right: 5%;
        text-align: right;
        width: 45%
        width: 45%
    }   

    #logo {
        float: left;
        margin-left: 5%;
        text-align: left;
        width: 45%;
    }

    h1 {
        font-size: 2.5em;
    }

    h2 {
        font-size: 0.825em;
        margin-bottom: 20px;
    }

    header {
        border-bottom: 5px solid #599a68;
        margin-bottom: 60px;
    }
}
Joe Consterdine
Joe Consterdine
13,965 Points
Joe Consterdine
Joe Consterdine
13,965 Points

Hi Tobias,

if I'm thinking right you want your images to stack properly at mobile views?

I don't have your images so I used the images from the project, but try the code below.

replace your current code for #gallery li with this. I've added a min-height declaration:

#gallery li {
  float: left;
  width: 45%;
  min-height: 150px;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}
Tobias Edwards
Tobias Edwards
14,458 Points
Tobias Edwards
Tobias Edwards
14,458 Points

I'll try it! fingers crossed

Tobias Edwards
Tobias Edwards
14,458 Points
Tobias Edwards
Tobias Edwards
14,458 Points

Well, this is weird! It works when the window size is very small, and it works when the window size is large; however, there is a point where the size of the internet window is like 'iphone 6+ size' and I get my problem again!

Thank you for your help so far

Tobias Edwards
Tobias Edwards
14,458 Points
Tobias Edwards
Tobias Edwards
14,458 Points

I set the min-height to 200px and it works!

However, the size of the caption box is HUGE! Is there anything i could do to change this?