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
angel angel
6,620 PointsI am adding 6 picture to the gallery instead of 5, but one of the picture is not acting as inline-block .
I am adding 6 pictures to the gallery instead of 5, but one of the picture is not acting as inline-block . In the third place .The size of the picture are 1280x853. This is the css code
/************************
General
***********************/
body{
font-family: 'Vollkorn', serif;
background-image:url(img/1.jpg);
}
#wrapper {
max-width: 940px; /* This is more for mobile device*/
margin: 0 auto; /* The auto value just will fill the space of left and right automatically */
padding: 0 25%;
}
a {
text-decoration: none; /* This is to take the anchor link out of the links*/
}
img {
max-width: 100%;
}
/************************
Heading
***********************/
header {
float: left;
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
}
#logo {
text-align:center;
margin: 0;
}
h1,h2 {
font-family: 'Lato', sans-serif;
}
h1{
margin: 15px 0px;
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: 100;
padding: 15px 10px;
}
/************************
footer
***********************/
footer {
margin: 0px ;
font-size: 0.75em;
text-align:center;
clear:both; /* This is for the footer to not floww with the gallery list items*/
padding-top: 20px;
color: black;
}
.social-icon {
width: 20px;
height:20px;
margin: 0 5px;
}
/************************
Porfolio
***********************/
#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 {
display:block;
max-width:150px;
margin: 0 auto 30px;
border-radius: 100%;
}
/************************
colors
***********************/
/* Site body*/
body {
background-color: #fff;
color: #999;
}
/*Green header*/
header{
background-color: #001f3f;
border-color: #0074D9;
}
/*Navegation on mobile devices*/
nav {
background: #E0E0E0;
}
/*Logo Text*/
h1,h2 {
color:white;
}
/*pink links on header*/
a {
color: black;
}
/*This is not current on
a:visited {
color: #428bca;
}
*/
/*Selected nav link*/
nav a.selected {
color: white;
}
nav a:hover {
color: white;
}
4 Answers
angel angel
6,620 PointsThank you for your help I found my respond!
Jason Anello 65,894 almost 2 years ago Hi Tamsin,
In the video which covered :nth-child(4n) there should be a code correction in the Teacher's Notes section telling you to change it to :nth-child(3n + 1)
4n doesn't correctly select the first item in every row.
So changing the expression to 3n + 1 should get it working properly on 3 column layout.
You need to add another :nth-child expression for the 2 column layout for that to work properly.
main.css is where the 2 column layout is setup and each gallery item has a width of 45% This is where you want to add the other :nth-child expression.
main.css around line 118:
#gallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
#gallery li:nth-child(odd) {
clear: left;
}
So add the second rule there and that will clear the float on every odd item which is fine for a two column layout. You always want to clear the float on the first item of every row. So in a two column layout that would be the 1st, 3rd, 5th, ... or every odd item.
Because of this we have to do a little more in responsive.css. Once the media query takes effect and we go into 3 column layout we have a new :nth-child expression for that. 3n + 1 but the old :nth-child expression odd is still taking effect. We don't want the odd items to be clearing the floats anymore so we have to remove the clear: left first before using 3n + 1
Updated responsive.css:
#gallery li {
width: 28.3333%;
}
#gallery li:nth-child(odd) {
clear: none;
}
#gallery li:nth-child(3n + 1) {
clear: left;
}
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 Points
angel angel
6,620 Points<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> Angel | Web Designer</title> <link rel="stylesheet" href="normalize.css"> <link rel="stylesheet" href="style.css"> <link href='https://fonts.googleapis.com/css?family=Vollkorn|Lato:100' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Angel</h1> <h2> Web Designer</h2> </a> <nav> <ul> <li><a href="index.html" class="selected">Porfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="about.html">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<ul id=gallery>
<li>
<a href="images/002.jpg">
<img src="images/002.jpg" alt=""></a>
<p> This is just amazing </p>
</li>
<li>
<a href="images/2.jpg">
<img src="images/2.jpg" alt=""></a>
<p> This is just amazing </p>
</li>
<li>
<a href="images/3.jpg">
<img src="images/3.jpg" alt="">
</a>
<p> This is just amazing </p>
</li>
<li>
<a href="images/4.jpg">
<img src="images/4.jpg" alt="">
</a>
<p> This is just amazing </p>
</li>
<li>
<a href="images/5.jpg">
<img src="images/5.jpg" alt="">
</a>
<p> This is just amazing </p>
</li>
<li>
<a href="images/6.jpg.jpg">
<img src="images/6.jpg" alt="">
</a>
<p> This is just amazing </p>
</li>
</ul>
</section>
<footer>
<a href="https://www.twitter.com"><img src="images/twitter-wrap.png" alt="Twitter logo" class="social-icon"></a>
<a href="https://www.facebook.com/angel"><img src="images/facebook-wrap.png" alt="Facebook logo" class="social-icon"></a>
<p>© 2016 Angel Web Designer.</p>
</footer>
</div>
</body> </html>
angel angel
6,620 PointsI am still dont know what is doing this. what is happening help please lol
angel angel
6,620 PointsI did something and work!! I don't know if this is right, but works. I add class to 2 pictures and clear : both and that work. I just wandering if that is a good practices . this are the code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Angel | Web Designer</title>
<link rel="stylesheet" href="normalize.css">
<link href='https://fonts.googleapis.com/css?family=Vollkorn|Lato:100' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="responsive.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Angel</h1>
<h2> Web Designer</h2>
</a>
<nav>
<ul>
<li><a href="index.html" class="selected">Porfolio</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="images/002.jpg">
<img src="images/002.jpg" alt="">
<p> This is just amazing </p>
</a>
</li>
<li>
<a href="images/001.jpg">
<img src="images/001.jpg" alt="">
<p> This is just amazing </p>
</a>
</li>
<li class="pictures">
<a href="images/3.jpg">
<img src="images/3.jpg" alt="">
<p> This is just amazing </p>
</a>
</li>
<li>
<a href="images/4.jpg">
<img src="images/4.jpg" alt="">
<p> This is just amazing </p>
</a>
</li>
<li class="pictures">
<a href="images/5.jpg">
<img src="images/5.jpg" alt="">
<p> This is just amazing </p>
</a>
</li>
<li>
<a href="images/6.jpg">
<img src="images/6.jpg" alt="">
<p> This is just amazing </p>
</a>
</li>
</ul>
</section>
<footer>
<a href="https://www.twitter.com"><img src="images/twitter-wrap.png" alt="Twitter logo" class="social-icon"></a>
<a href="https://www.facebook.com/angel"><img src="images/facebook-wrap.png" alt="Facebook logo" class="social-icon"></a>
<p>© 2016 Angel Web Designer.</p>
</footer>
</div>
</body>
</html>
/************************
General
***********************/
body{
font-family: 'Vollkorn', serif;
}
#wrapper {
max-width: 940px; /* This is more for mobile device*/
margin: 0 auto; /* The auto value just will fill the space of left and right automatically */
padding: 0 25%;
}
a {
text-decoration: none; /* This is to take the anchor link out of the links*/
}
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,h2 {
font-family: 'Lato', sans-serif;
}
h1{
margin: 15px 0px;
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: 100;
padding: 15px 10px;
}
/************************
footer
***********************/
footer {
font-size: 0.75em;
text-align:center;
clear:both; /* This is for the footer to not floww with the gallery list items*/
padding-top: 50px;
color: black;
}
.social-icon {
width: 20px;
height:20px;
margin: 0 5px;
}
/************************
Porfolio
***********************/
#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;
}
.pictures {
clear: both;
}
/************************
Page about
***********************/
.profile {
display:block;
max-width:150px;
margin: 0 auto 30px;
border-radius: 100%;
}
/************************
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('./images/phone.png');
}
.contact-info li.mail a{
background-image: url('./images/mail.png');
}
.contact-info li.facebook a{
background-image: url('./images/facebook.png');
}
/************************
colors
***********************/
/* Site body*/
body {
background-color: #fff;
color: #999;
}
/*Green header*/
header{
background-color: #001f3f;
border-color: #0074D9;
}
/*Navegation on mobile devices*/
nav {
background: #E0E0E0;
}
/*Logo Text*/
h1,h2 {
color:white;
}
/*pink links on header*/
a {
color: black;
}
/*This is not current on
a:visited {
color: #428bca;
}
*/
/*Selected nav link*/
nav a.selected, nav a:hover {
color: white;
}
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 PointsJames Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 PointsSorry for the late reply. Glad you got it working :)