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!
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
Jonathon Irizarry
4,280 PointsPicture not fitting on the line with the other picture?
I have no idea on how to get the picture to fit in the same line as the other because their is a huge space of nothingness and I have messed around with the margin and widths of all the images and even made a seperate id with no luck. I will link what the page looks like from photobucket, my css and html as well. http://s1358.photobucket.com/user/Bkprodigy5150/media/Website_zps7ed79d11.png.html?filters[user]=135212518&filters[recent]=1&filters[publicOnly]=1&sort=1&o=0
![http://s1358.photobucket.com/user/Bkprodigy5150/media/Website_zps7ed79d11.png.html?filters[user]=135212518&filters[recent]=1&filters[publicOnly]=1&sort=1&o=0](http://s1358.photobucket.com/user/Bkprodigy5150/media/Website_zps7ed79d11.png.html?filters%5Buser%5D=135212518&filters%5Brecent%5D=1&filters%5BpublicOnly%5D=1&sort=1&o=0){kind=link}
![http://s1358.photobucket.com/user/Bkprodigy5150/media/csspart1_zps5fbd898e.png.html?filters[user]=135212518&filters[recent]=1&filters[publicOnly]=1&sort=1&o=1](http://s1358.photobucket.com/user/Bkprodigy5150/media/csspart1_zps5fbd898e.png.html?filters%5Buser%5D=135212518&filters%5Brecent%5D=1&filters%5BpublicOnly%5D=1&sort=1&o=1){kind=link}
![http://s1358.photobucket.com/user/Bkprodigy5150/media/csspart2_zpscaacee84.png.html?filters[user]=135212518&filters[recent]=1&filters[publicOnly]=1&sort=1&o=2](http://s1358.photobucket.com/user/Bkprodigy5150/media/csspart2_zpscaacee84.png.html?filters%5Buser%5D=135212518&filters%5Brecent%5D=1&filters%5BpublicOnly%5D=1&sort=1&o=2){kind=link}
![http://s1358.photobucket.com/user/Bkprodigy5150/media/Html_zpsa219a4b0.png.html?filters[user]=135212518&filters[recent]=1&filters[publicOnly]=1&sort=1&o=3](http://s1358.photobucket.com/user/Bkprodigy5150/media/Html_zpsa219a4b0.png.html?filters%5Buser%5D=135212518&filters%5Brecent%5D=1&filters%5BpublicOnly%5D=1&sort=1&o=3){kind=link}
7 Answers
Mo Daka
Courses Plus Student 10,363 PointsTry this.
<!DOCTYPE html>
<html>
<!--This is the header-->
<head>
<meta charset="utf-8">
<title> Justin Ranton | Creative | Digital PM | Web Designer </title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400,300|Roboto:400,300italic,300,500italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/swag.css">
<link rel="stylesheet" href="css/responsive.css">
<meta name="viewport" content="width=device-width, intial-scale=1.0">
</head>
<!--This is the body-->
<body>
<header>
<a href="index.html" id=logo>
<h1>Justin Ranton</h1>
<h2>Creative | Digital PM | Web Designer</h2>
</a>
<nav>
<ul>
<a href="index.html" class="selected"><li>Work</li></a>
<a href="about.html"><li>About</li></a>
<a href="contact.html"><li>Contact</li></a>
</ul>
</nav>
</header>
<div id="wrapper">
<section id="gallery">
<ul>
<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>
<!--this is the footer-->
<footer>
<a href="http://www.twitter.com/jwranton"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="https://www.facebook.com/justinranton"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<p>© 2014 jwranton.pro | Privacy</p>
</footer>
</div>
</body>
</html>
/******************************************************** GENERAL ********************************************************/ body{ Font-family: 'Open Sans', sans-serif; }
wrapper {
max-width: 940px; margin: 0 auto; }
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 */
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-family: 'Open Sans', sans-serif; margin: -5px 0 0; font-weight: normal; color: #ff0000 }
/******************************************************** 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: 15px 10px; }
/******************************************************** 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 ********************************************************/
.proile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }
/******************************************************** FOOTER ********************************************************/
footer { font-size: 0.75em; text-align: center; clear: both; padding: 50px; color: #ccc; }
.social-icon { width: 20px; height: 20px; margin: 0 5px; }
/******************************************************** 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.phone a { background-image: url('../img/phone.png'); }
.contact-info li.mail a { background-image: url('../img/mail.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: #599a68; }
h1, h2 { color: #fff; }
a { color: #6ab47b; }
/* nav link color */ nav a, nav a:visited { color: #fff; }
/* selected nav link color */ nav a.selected, nav a:hover { color: #32673f; } ...
Jonathon Irizarry
4,280 PointsYea I tried to change up the code and try what you had coded in but nothing has changed the end results I wonder if I could possible just use the class or id selector on just one picture and somehow move it up with a command I tried making the picture smaller but nothing happened...
Michael Mahler
8,560 PointsFrom the looks of it, it seems like the images are of different sizes- which is causing the 2nd line to be pushed down. You could fix this by specifying a height on your images (CSS), or by cropping them to a uniform aspect ratio before uploading. If you don't feel like doing either of those and are relatively experienced in javascript/jquery, you can check out the masonry plugin: http://masonry.desandro.com
Jonathon Irizarry
4,280 PointsWell I'm really new to coding and feel like their must be something I'm doing work and a solution to this! So I made all 4 pictures on the webpage the same size 1024x768 and it is the same result which really makes no sense since they are smaller pictures :(..... http://s1358.photobucket.com/user/Bkprodigy5150/media/Untitled_zps84dad3e3.png.html That's the link to the end result with different images plugged into the code that are all the same size.
Jonathon Irizarry
4,280 PointsI guess the answer to this simple question is 2 hard GG
Jason Anello
Courses Plus Student 94,610 PointsHi Jonathon,
I answered a similar problem here: https://teamtreehouse.com/forum/my-workspaces-site-doesnt-quite-look-like-the-video-after-this-lesson-and-i-cant-see-why
See if that helps you.
The problem and solution should make more sense once you get to the responsive part of the course.
Jonathon Irizarry
4,280 PointsThe only way I see fixing this problem is later down the road when I figure out how to use javascript...
Jason Anello
Courses Plus Student 94,610 Pointsjavascript should not be needed for this.
Just to be clear, I posted some css in that answer that is to be saved and not used until you get to the 3 column layout video that I linked to.
If you put the following into main.css then it should fix your current 2 column layout problem. (Add the nth-child part)
#gallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
/* Add this */
#gallery li:nth-child(2n + 1) {
clear: left;
}
If you save and refresh then that should fix what your screenshot is showing unless you have some other html or css problems.
Jonathon Irizarry
4,280 PointsI have that exact code and used the validators for css and html I just wish I knew somebody to walk me through this via screen sharing. When I got to that part of the lesson I thought it would fix it and I even messed around with various nth-child inputs and none seemed to fix it or push the pictures into the right place with the declerations you have suggested.
Jason Anello
Courses Plus Student 94,610 PointsAbout all I can suggest at this point is to post your gallery html here and the css relating to the gallery from both main.css and responsive.css if you're at that point. Not the whole files just the gallery related parts and I'll take a look.
See this post for how to do that: https://teamtreehouse.com/forum/posting-code-to-the-forum
Jonathon Irizarry
4,280 PointsYea I tried with the code you left for the nth child to clear before the nth child to the left. I just went on with the course and have just purchased a web domain and host for this project of mine and still see this problem which kind of makes my website look a little sloppy lol. Maybe we could skype and share screens and you could help a pal out?