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
Mikey Neilson
Front End Web Development Techdegree Student 12,642 Pointsnth:child?()
I'm trying to use nth:child() to clear 3rd img in gallery li , works fine in media queries at max width 768px. But then I want to clear 4th img li in my next media queries, float of gallery li not working, so iv set nth:child(3n+1) to max width 768px now i can float gallery li and clear in 1024px media queries but sill not clearing in 768px media queries .......... any help please thanks
1 Answer
Mikey Neilson
Front End Web Development Techdegree Student 12,642 PointsHi Jason many thanks for reply yes i was using it as :nth-child in my code,my brain must of stopped working when asked the question. below 768px I have two columns and between 769-1024px three columns.
<div class="container gallery clearfix"><!-- Gallery Start -->
<h2>Portfolio</h2>
<section>
<ul>
<li>
<a href="img/portfolio-1.png">
<img src="img/portfolio-1.png" alt="portfolio-1">
<h3>Marketing Page</h3>
<p>This project shows the frontpage of a marketing website meant for a specific business i'm intrested in.</p>
</a>
</li>
<li>
<a href="img/portfolio-2.png">
<img src="img/portfolio-2.png" alt="portfolio-2">
<h3>Search Page</h3>
<p>This project searches through a specific database to find information that the user is trying to look up.</p>
</a>
</li>
<li>
<a href="img/portfolio-3.png">
<img src="img/portfolio-3.png" alt="portfolio-3">
<h3>Travel App</h3>
<p>This project compares travel times based on different transportation methods and tells you the best one.</p>
</a>
</li>
<li>
<a href="img/portfolio-4.png">
<img src="img/portfolio-4.png" alt="portfolio-4">
<h3>Map of Favorite Spots</h3>
<p>This project uses mapping apis to plot pionts for my favorite spots in the city for a do-it-yourself walking tour</p>
</a>
</li>
<li>
<a href="img/portfolio-5.png">
<img src="img/portfolio-5.png" alt="portfolio-5">
<h3>Photo Gallery</h3>
<p>This project shows pictures from a recent trip to the viewer and allows them to easily navigate through photos</p>
</a>
</li>
<li>
<a href="img/portfolio-6.png">
<img src="img/portfolio-6.png" alt="portfolio-6">
<h3>Calculator</h3>
<p>Someone can enter in the numbers they want, and press the big blue button and get the result.</p>
</a>
</li>
</ul>
</section><!--Gallery end -->
</div>
@media (max-width: 768px) {
.sub-nav {
display: none;
}
.gallery li:nth-child(3n+1) {
clear: both;
}
}
@media ( min-width:768px ) {
.name {
font-size: 2em;
margin-bottom: 5px;
}
.main-nav {
text-align: center;
}
.main-nav li {
font-size: .8em;
background: #000;
display: inline-block;
margin: 0 auto;
}
.main-nav li a {
font-weight: bold;
}
.sub-header {
width: 90%;
margin: 0 auto;
background: #2BA4CC;
}
.col {
float: right;
}
.set,
.blurb {
width: 50%;
}
.gallery {
max-width: 90%;
background: #000;
margin: 40px auto;
}
.gallery li {
width: 45%;
margin: 2.5%;
padding-top: 4px;
float:left;
}
.sub-nav {
margin-right: 15px;
}
.sub-nav li {
float: right;
display: inline-block;
padding: 20px 15px;
}
.top {
display: none;
}
.clearfix {
content: " ";
display: table;
clear: both;
}
}
@media (min-width: 1024px) {
.name {
font-size: 1.8em;
float: left;
padding: 10px 0 0 20px;
margin-left: 20px;
}
.main-nav ul {
margin: 0;
padding: 0;
overflow: hidden;
float: right;
}
.main-nav li {
display: inline-block;
}
.main-nav li a {
font-size: 1.25em;
text-align: center;
padding: 10px 15px;
text-decoration: none;
}
.contanier {
background: #2BA4CC;
}
.blurb {
font-size: 1.4em;
font-weight: bold;
}
.gallery li {
width: 28.333%;
padding-top: 20px;
float:left;
}
.gallery li:nth-child(3n+1) {
clear: left;
}
.clearfix {
content: " ";
display: table;
clear: both;
}
}
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsHi Mikey,
Can you post your css for the media queries and the nth-child related styles? You don't have to post all the css just what is related to the gallery list items.
How many columns is it supposed to be below 769px and how many columns between 768 and 1024?
Also, make sure you're using
:nth-child(). In your question you have nth:child()