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

Watch Video

Posted October 21, 2014 4:24pm by

Issues with "Three Column Layout"

I am able to achieve the three column and two column layout. However, when I resize my browser to certain sizes, the awkward spacing comes back. I found that this problem occurs at one specific size inside the first breakpoint and whenever the browser size is greater than 660 pixels, although I do not know what the specific sizes are or how to find them. Does anyone know where the error in my code is occurring? I didn't have time to figure out how to use Markdown, so I copied my code into this message instead. I hope this helps anyone who can answer my question.

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

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

}

October 21, 2014 7:51pm

could you post all your code? and it would be nice if you could post it on here http://codepen.io/pen/

October 21, 2014 8:21pm

Hey Aurelian, I tried your link and http://codeopen.io/pen/ requires that I sign up for an account with a monthly payment. That may seem hypocritical of me considering I'm using this site to learn web design, but I'm not looking to add on more monthly payments for myself right now. If you really need to see the code, the best I can do is post all of it in another comment because I'm still having issues with understanding how to put my code in markdown and use it in my comment.

October 21, 2014 8:27pm

It's free. Search codepen.io and on top right you have 'New Pen' click there and you should be able to post your code. And heres how to post your code, you have iMac or windows? https://teamtreehouse.com/forum/howto-guide-markdown-within-posts .

Write three times this ``` and later put these three and css so it would look like

<p> write ```css and close it with e.g:   
@```css

@```

 hope it works , don't use the email sign </p>

h1{
float:left;
}

Yes it would be useful to see why you have error.

October 21, 2014 8:49pm

Thank you for that information Aurelian. Also so you know ahead of time, I copied a lot of the code from the tutorial videos so none of the pictures are actually mine. I'm not sure whether or not stating that matters, but I figured why not mention it. Here are the links to my code and their respective file names:

index.html http://codepen.io/anon/pen/HKxAI.html

responsive.css http://codepen.io/anon/pen/HKxAI.css

I am only posting these two links because I imagine these are the only two pages you need since they are the only ones that involve my error. Also I posted them as links because I am not sure how to post something from codepen to here so I went with my best guess. I hope this works for you. If not, I need more help on understanding how to post "all" of my code onto codepen and how to properly put it into a comment.

October 21, 2014 9:00pm

When you paste CSS, i guess you should post it all as same as HTML like you did.

Okay so I'm confused, what are you trying to do? you are trying to change the column layout when they are below 660px right?

October 21, 2014 9:14pm

I can get the column layout to change. My problem was when I was testing to make sure the awkward spacing no longer occurred in the site by changing the size of the browser page. There was one particular size of the browser that was smaller than 480 pixels where the spacing issue occurred, but the weird thing is when I adjust the browser to a size smaller than that particular size where the error occurs the layout is just fine. The same issue occurs when I make the browser very large as well. I'm guessing it is when I pass 660px, but when I pass that size I get the spacing issue again. Before that size, my column layout is just fine.

October 21, 2014 9:37pm

Im getting more understanding but is it possible to make a screenshot and post it here?

October 21, 2014 10:05pm

Sure. I have 4 screen shots showing the browser at different sizes. The first one has the correct layout for a small browser size. The next photo shows the error, which occurs when the browser is that particular size. The 3rd one shows how when I make it larger, the layout transitions to the correct layout I want, but the 4th one shows how eventually when I get to a certain large size, the spacing error appears again.

/Users/nick/Desktop/Ist screen shot.png /Users/nick/Desktop/2nd screen shot.png /Users/nick/Desktop/3rd screen shot.png /Users/nick/Desktop/4th screen shot.png

I'm not sure if these links work because the directory starts from my desktop, but I don't know how to post the photos otherwise. I hope this works for you otherwise if you know a way to post a screen shot from my desktop to this forum please let me know and I'll be sure you get the pictures.

October 21, 2014 11:57pm

post them here http://imgur.com

October 22, 2014 12:47am

Ok. Here are the img links. I hope this helps:

1st screen shot http://i.imgur.com/1XFPMbF.png

2nd screen shot http://i.imgur.com/f9V0m9c.png

3rd screen shot http://i.imgur.com/m5B2LAH.png

4th screen shot http://i.imgur.com/71Iv6iy.png

4 Answers

October 23, 2014 8:53pm

Hey thanks Jon. I experimented with changing the height of the captions to 30px and to 2.0em. Both methods fixed my error, however setting the caption height to 30px worked best. Setting the height to 2.0em allowed for the last line text in the caption to appear somewhat outside of the grey background. In the end, setting the height to 30px was more visually pleasing, but both methods worked!

October 22, 2014 4:30pm

hmm, see if this code helps

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

October 22, 2014 7:42pm

Unfortunately, that did not help me. Do you have any other suggestions?

October 22, 2014 7:53pm

well, my last suggestion is to paste this code and with the code i provided above too and see what happens

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nick Pettit | Designer</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>Nick Pettit</h1>
        <h2>Designer</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>Experimentation with color and texture.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Playing with blending modes in Photoshop.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>Trying to create an 80's style of glows.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p>Drips created using Photoshop brushes.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>Creating shapes using repetition.</p>
            </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <p>&copy; 2014 Nick Pettit.</p>
      </footer>
    </div>
  </body>
</html>

October 22, 2014 7:54pm

`if it works, tell me and i go and get your original , your code made and try to fix it.

October 22, 2014 8:53pm

Still experiences the same issues. I really appreciate the help though. At this point considering the time I've spent trying to fix this, I think I'll keep moving on with the other lessons and hopefully I can find a way to deal with it. Thanks again and if you happen to think of any other ideas for helping me, please let me know.

October 22, 2014 11:18pm

I have no idea then apart there is still one hope, what browse are you using? if you are using for example chrome, try to load the website on opera , safari or any other browser . It may be too old to carry some functions although i dont really think so but maybe it can be an issue.

if you find the answer , post it here so we can learn from it :)

October 23, 2014 6:51pm

Edit: I was right, one of my images was not perfectly square ( only off by 2 pixels!) My new question is, how can I account for longer caption names, when the gallery is resized small enough for the captions to wrap to the next line, the same issue occurs because the caption container becomes a little taller. If anyone knows of a solution, thanks. Or would I be better off using a different template such as bootstrap for my portfolio, since this is going to be my real website. I am quite a ways past this course now in my front end track.

I am having exactly the same issue as well. It seems that there is a strange gap in the gallery that occurs when the window is at certain sizes (On the 3rd row, 2 gaps appear and only the 3rd gallery image is displayed.) Also, occurs in the 4th row of the 2 column layout.

My guess is that it has to do with the height of the images or the captions (btw the caption length is important, can't be too long). Also, the strange thing is in the editor, the nth-child rule is not a recognized color/word that I can tell. I am using the latest version of Chrome. Here is my code for responsive, if it is necessary I will try to post everything on codepen. Thanks!

October 23, 2014 7:01pm

Im normal , i don't have any problems. I don't know whats the problem in yours ;/

October 23, 2014 7:15pm

It was that image size issue. What do you think would be the best method to fix the caption length? Add a height to the caption box so that they already account for a line wrap automatically even if it is a short caption? That way all are equally sized.

October 23, 2014 7:17pm

you can set the images the same sizer e.g. heightL200px and width 200 px

October 23, 2014 7:36pm

Thanks, I'll try that to allow for differently proportioned images. Also, setting the <p> height to 30 px for the captions seems to allow for the line wrapping if anyone else is following along. I'm not sure if it is necessary to use a percentage value for this instead of px.

#gallery li a p {
    margin: 0;
    padding: 5%;
    font-size: 0.85em;
    color: #29798e;
    height: 30px;
}

October 23, 2014 7:40pm

Yes it is. If you lisen nick , he will tell yo why he uses % instead of px. With % is more flexibile and resize nice etc..

October 23, 2014 8:33pm

How do you suggest setting the height for the captions in a "responsive" way? Any percentage values are ineffective, I believe since the height of the parent element is what determines the percentage height. Perhaps using ems?

Edit: I believe a value of 2.0em for the height will do the trick!

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

Welcome to the Treehouse Community

Looking to learn something new?

Nicholas DIPinto

Nicholas DIPinto

Issues with "Three Column Layout"

Aurelian Spodarec

Aurelian Spodarec

Nicholas DIPinto

Nicholas DIPinto

Aurelian Spodarec

Aurelian Spodarec

Nicholas DIPinto

Nicholas DIPinto

Aurelian Spodarec

Aurelian Spodarec

Nicholas DIPinto

Nicholas DIPinto

Aurelian Spodarec

Aurelian Spodarec

Nicholas DIPinto

Nicholas DIPinto

Aurelian Spodarec

Aurelian Spodarec

Nicholas DIPinto

Nicholas DIPinto

4 Answers

Nicholas DIPinto

Nicholas DIPinto

Aurelian Spodarec

Aurelian Spodarec

Nicholas DIPinto

Nicholas DIPinto

Aurelian Spodarec

Aurelian Spodarec

Aurelian Spodarec

Aurelian Spodarec

Nicholas DIPinto

Nicholas DIPinto

Aurelian Spodarec

Aurelian Spodarec

Jon Edwards

Jon Edwards

Aurelian Spodarec

Aurelian Spodarec

Jon Edwards

Jon Edwards

Aurelian Spodarec

Aurelian Spodarec

Jon Edwards

Jon Edwards

Aurelian Spodarec

Aurelian Spodarec

Jon Edwards

Jon Edwards