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

Simon Swallow
Simon Swallow
501 Points
Posted by Simon Swallow
Simon Swallow
501 Points

2 page breaks

Hi. I seem to have two page breaks. The first with 2 columns with extra columns on the right and the 2nd that acts as normal with 3 columns. What can i do to fix it?

https://codepen.io/anon/pen/NvGxma

8 Answers

Leanne Millar
Leanne Millar
9,555 Points
Leanne Millar
Leanne Millar
9,555 Points

Hi Simon, You are missing your closing HTML tag. Put that in and if it still doesn't fix the problem give me another shout. :-)

Leanne Millar
Leanne Millar
9,555 Points

You are also missing your closing ; semi colon on your CSS for the width of your #gallery li in the media query. Try running your code through the w3c validators for CSS and HTML

Simon Swallow
Simon Swallow
501 Points
Simon Swallow
Simon Swallow
501 Points

Hi. Thanks for the help. Unfortunately those two issues didn't fix it

Leanne Millar
Leanne Millar
9,555 Points
Leanne Millar
Leanne Millar
9,555 Points

Here is your HTML cleaned up a little.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Simon Swallow | Front End Developer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Changa+One" >
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
</head>
<body>
<header>
    <a href="index.html" id="logo">
    <h1>Simon Swallow</h1>
    <h2>Front End Developer</h2>
    </a>
</header>
<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 id="wrapper">

<section>
        <h2>Gallery</h2>

        <ul id="gallery">

        <li>
        <a href="img/2017-06-03_15-00-46_060.jpeg">
        <img src="img/2017-06-03_15-00-46_060.jpeg" alt=""></a>
        <p>Hoist the main sail!! Aye Aye Captain!!</p>
        </li>

        <li>
        <a href="img/oliverYingInFritton.jpeg">
          <img src="img/oliverYingInFritton.jpeg" alt=""></a>
          <p>We had a nice walk in Fritton woods</p>
        </li>

        <li>
        <a href="img/queenBee.jpeg">
          <img src="img/queenBee.jpeg" alt=""></a>
          <p>Spotted the Queen bee! A rare site!</p>

        </li>

        <li>
        <a href="img/loganTrain.jpeg">
          <img src="img/loganTrain.jpeg" alt=""></a>
          <p>Choo! Choo! Logan going full steam ahead!</p>
        </li>

        <li>
        <a href="img/dadChrisBoat.jpeg">
          <img src="img/dadChrisBoat.jpeg" alt=""></a>
          <p>Reading a book with a nice pint while enjoying a beautiful sunset</p>

        </li>

        <li>
        <a href="img/garlic.jpeg">
          <img src="img/garlic.jpeg" alt=""></a>
          <p>Garlic Harvest. Bad breath and fart festival. At least there will be no vampires.</p>
        </li>
    </ul>
</section>

<footer>
    <a href="https://twitter.com/BeekeeperSimes"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
    <a href="https://www.facebook.com/simon.swallow.90"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
    <p>&copy; 2014 Simon Swallow</p>
</footer>

</div>
</body>
</html>

CSS

/* CSS Document */

#gallery li{
  display:inline-block;
  width: 44%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

@media screen and (min-width: 480px){
  /*****************************

Two Coloumn layout

******************************/
  #primary{
    width: 50%;
    float: left;
  }
  #secondary{
    width: 40%;
    float: right;   
  }

    /*****************************

Page:portfolio

******************************/
  #gallery li{
    width: 27.88%;
  }

}
Simon Swallow
Simon Swallow
501 Points
Simon Swallow
Simon Swallow
501 Points

Thanks for cleaning up the code. However, the problem in question still persists

Leanne Millar
Leanne Millar
9,555 Points
Leanne Millar
Leanne Millar
9,555 Points

You also had alt tags in your links. Alt tags are for images only. You need to create another link if you want the text hyperlinked too.

Leanne Millar
Leanne Millar
9,555 Points
Leanne Millar
Leanne Millar
9,555 Points

Is it a treehouse question you are stuck on? Send me a link to the question and I'll look through it. I'm still learning myself hence why I'm struggling to problem solve. I reuse a lot of code, once I've written it, checked it and saved it. I just alter it the next time I need something similar or if I learn something that can improve it.

Leanne Millar
Leanne Millar
9,555 Points

If it's this question that you're stuck on.

https://teamtreehouse.com/library/how-to-make-a-website/responsive-web-design-and-testing/refactor-the-layout This will pass the code challenge.

@media screen and (min-width: 480px) {
  #gallery li{
    width:28.33%;
  }
   #gallery li:nth-child(4n){ 
  clear:left;
  }
}
Alexander Kapriniotis
Alexander Kapriniotis
25,897 Points
Alexander Kapriniotis
Alexander Kapriniotis
25,897 Points

Can you explain a little bit better what you are trying to achieve?

Simon Swallow
Simon Swallow
501 Points
Simon Swallow
Simon Swallow
501 Points

My page is supposed to have 2 columns on a mobile size page. It is supposed to have 3 columns at a min-width of 480px. However, there seems to be a 3rd format with 2 columns and space on the right. It can be seen while resizing the screen. It is supposed to go from 2 columns to 3 at a min-width of 480px

Simon Swallow
Simon Swallow
501 Points
Simon Swallow
Simon Swallow
501 Points

No it's the page break problem that I have. I don't know why it is behaving like that

Alexander Kapriniotis
Alexander Kapriniotis
25,897 Points
Alexander Kapriniotis
Alexander Kapriniotis
25,897 Points

It's the margins that cause an overflow, change the margin to 2.4% or a fixed number in pixels, problem solved

Simon Swallow
Simon Swallow
501 Points
Simon Swallow
Simon Swallow
501 Points

Hi. Thank you for your fix. Would you mind explaining why it wasn't working before and why this has fixed it be cause it doesn't seem obvious as (li width + margin) - (3x28.88) + (6x2.5) = 98.64 which I would have thought would fit. Also, why does it work ok when the page is dragged a little wider when we are dealing with percentages and not fixed pixels? Thanks again

Simon Swallow
Simon Swallow
501 Points
Simon Swallow
Simon Swallow
501 Points

Also, what actually causes the white space to appear?

Alexander Kapriniotis
Alexander Kapriniotis
25,897 Points
Alexander Kapriniotis
Alexander Kapriniotis
25,897 Points

I'll you an answer mainly based on my experience. Set the margin to 0 and see what happens. They still have some whitespace between them. There are several articles about it and there is even a video on treehouse called Removing Gaps Between Inline and Inline-Block Elements. Try to to remove any white space between your li elements on the code (write them like this: <li>stuff></li><li>stuff</li> ) and without line breaking etc and see what happens. Boom whitespace no longer exists. Or try something else, set the font size to 0. Again white space is removed . Personally i use negative margins to solve that issue whenever it occurs. The other thing i have noticed is that you have left the default left padding on your ul and this is taking some space as well.