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 trialelsie bogaert
4,335 Pointsimages don't stack up for smaller screen versions when I make my browser window smaller
When I look at my gallery in a desktop browser I have 3 columns for my pictures, which is what I want, but then as the browser gets smaller, such as for mobiles, it's supposed to stack the pictures down, instead they just get really small so they stay inline with each other. I'm not sure what went wrong but here's my code....
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>My Life Journey</title> <link rel="stylesheet" href="css/normalize.css"> <link href="https://fonts.googleapis.com/css?family=Dancing+Script|Yantramanav" rel="stylesheet"> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>My Journey to Self Growth</h1> </a> <nav> <ul> <li><a href="index.html" class="selected">Home</a></li> <li><a href="contact.html">contact</a></li> <li><a href="about.html">About</a></li> </ul> </nav>
</header>
<div id="wrapper">
<section>
<!-- gallery pictures -->
<ul id="gallery">
<li>
<a href="image/ying yang.jpg">
<img src="image/ying yang.jpg" alt="ying yang sign in fire and ice.">
<p>Experimenting with captions... ying yang picture</p>
</a>
</li>
<li>
<a href="image/fire_and_ice_by_jojoesart-da28aqe.jpg">
<img src="image/fire_and_ice_by_jojoesart-da28aqe.jpg" alt="">
<p>Experimenting with captions... wolf picture</p>
</a>
</li>
<li>
<a href="image/pichu.jpg">
<img src="image/pichu.jpg" alt="">
<p>Experimenting with captions... young pichu</p>
</a>
</li>
</ul>
</section>
</div>
<footer>
responsive css file:
@media screen and (min-width: 480px) {
/************************** TWO COLUMN LAYOUT **************************/
#primary {
width: 50%;
float: left;
}
#secondary { width: 40%; float: right; } }
/************************* PAGE: PORTFOLIO **************************/
gallery li {
width: 28.3333%;
}
gallery li:nth-child(3n + 1) {
clear:left; }
@media screen and (min-width: 660px) {
}
Advice would be appreciated...
1 Answer
ywang04
6,762 Points@media screen and (min-width: 480px){
/************************
TWO COLUMN LAYOUT
************************/
#primary {
width: 50%;
float: left;
}
#secondary {
width: 40%;
float: right;
}
/*******************
PAGE: PORTFOLIO
********************/
#gallery li {
width: 28.3333%;
}
#gallery li:nth-child(4n) {
clear: left;
}
}
- Please noticed the last curly brace, which is missing in your code.
- The last curly brace in below line is redundant.
#secondary { width: 40%; float: right; } }
If you still cannot figure it out, please copy my code directly and you will find the differences. :)