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 trialSimon Swallow
501 Points2 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?
8 Answers
Leanne Millar
9,555 PointsHi 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
9,555 PointsHere 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>© 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
501 PointsThanks for cleaning up the code. However, the problem in question still persists
Leanne Millar
9,555 PointsYou 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
9,555 PointsIs 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
9,555 PointsIf 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
25,897 PointsCan you explain a little bit better what you are trying to achieve?
Simon Swallow
501 PointsMy 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
501 PointsNo it's the page break problem that I have. I don't know why it is behaving like that
Alexander Kapriniotis
25,897 PointsIt's the margins that cause an overflow, change the margin to 2.4% or a fixed number in pixels, problem solved
Simon Swallow
501 PointsHi. 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
501 PointsAlso, what actually causes the white space to appear?
Alexander Kapriniotis
25,897 PointsI'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.
Leanne Millar
9,555 PointsLeanne Millar
9,555 PointsYou 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
501 PointsSimon Swallow
501 PointsHi. Thanks for the help. Unfortunately those two issues didn't fix it