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
James McCall
555 PointsOn portfolio page, only 2 images across displays instaed of 3 on large screens
I have replicated the Main CSS and Responsive CSS from the tutorial but I cant get 3 images across on a large screen. I can modify it so I have 3 images across on all screen sizes, but I cant get it to have 2 across on phone size and 3 across on large screens. I have 9 images instead of 5
This is my code: Responsive CSS
@media screen and (min-width: 480px) {
/********************************
TWO COLUMN LAYOUT
**********************************/
#primary {
width: 50%;
float: left;
}
#secondary {
width: 40%;
float: right;
}
/********************************
PAGE: PORTFOLIO
********************************/
#gallery {
width: 28.3333;
}
#gallery li:nth-child(3n+1)
clear: left;
}
/********************************
PAGE: ABOUT
*********************************/
.profile-photo {
float: left;
margin: 0 5% 80px 0;
}
@media screen and (min-width: 660px) {
/********************************
HEADER
*********************************/
nav {
background: none;
float: right;
font-size: 1.125em;
margin-right: 5%
text-align: right;
width: 45%
}
#logo {
float: left;
margin-left: 5%;
text-align: left;
width: 45%;
}
h1 {
font-size: 2.5em;
}
}
Main CSS
/********************************
GENERAL
********************************/
body {
font-family:arial, sans-serif;
}
#wrapper{
max-width: 940PX;
margin: 0 auto;
padding: 5%;
}
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-align: center;
margin: 0;
}
h1 {
font-family: arial, 'lato', sans-serif;
margin: 15px 0;
font-size:1.75em;
font-weight:100;
line-height: 0.8em;
}
/********************************
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;
}
/********************************
FOOTER
********************************/
footer {
font-size: 0.75em;
text-align: center;
clear: both;
padding-top: 50px;
color: #ccc;
}
.social-icon {
width: 20px;
height: 20px;
margin: 0 5px;
}
/********************************
PAGE: PORTFOLIO
********************************/
#gallery {
margin: 0;
padding: 0;
list-style: none;
}
#gallery li {
float: left;
width: 45%;
margin: 2.5%;
padding:0%;
background-color: #f5f5f5;
color: #bdc3c7;
}
#gallery li a p {
margin: 0;
padding: 5%;
font-size: 0.75em;
color: #bdc3c7
}
/********************************
PAGE: ABOUT
********************************/
.profile-photo {
display: block;
max-width: 150px;
margin: 0 auto 30px;
border-radius: 100%;
}
/********************************
PAGE: CONTACT
********************************/
.contact-info {
list-style: none;
padding: 0;
margin: 0;
font-size: 0.9em;
}
.contact-info {
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')
}
/********************************
COLORS
********************************/
/* Site body */
body {
background-color: #fff;
color:#999;
}
/* Green Header */
header {
background: #6ab47b;
border-color: #599a68;
}
/* Nav background on mobile devices */
nav {
background: #599a68;
}
/* Logo text */
h1, h2 {
color:#fff
}
/* Links */
a {
color: #6ab47b;
}
/* Nav link */
nav a, nav a:visited {
color:#fff;
}
/* Selected Nav link */
nav a.selected, nav a:hover {
color:#32673f;
}
HTML INDEX
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Design Vision | Maui Architects</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='https://fonts.googleapis.com/css? family=Lato:400,700,400italic,900,700italic|Open+Sans:400,400italic,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<meta name="viewport" content="width=device-wifth, initial-scale=1.0">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>DESIGN VISION</h1>
</a>
<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>
</header>
<div id="wrapper">
<section>
<ul id="gallery">
<li>
<a href="images/numbers-01.jpg">
<img src="images/numbers-01.jpg" alt="">
</a>
</li>
<li>
<a href="images/numbers-02.jpg">
<img src="images/numbers-02.jpg" alt="">
</a>
</li>
<li>
<a href="images/numbers-06.jpg">
<img src="images/numbers-06.jpg" alt="">
</a>
</li>
<li>
<a href="images/numbers-09.jpg">
<img src="images/numbers-09.jpg" alt="">
</a>
</li>
<li>
<a href="images/numbers-12.jpg">
<img src="images/numbers-12.jpg" alt="">
</a>
</li>
<li>
<a href="images/numbers-01.jpg">
<img src="images/numbers-01.jpg" alt="">
</a>
</li>
<li>
<a href="images/numbers-02.jpg">
<img src="images/numbers-02.jpg" alt="">
</a>
</li>
<li>
<a href="images/numbers-06.jpg">
<img src="images/numbers-06.jpg" alt="">
</a>
</li>
<li>
<a href="images/numbers-09.jpg">
<img src="images/numbers-09.jpg" alt="">
</a>
</li>
</ul>
</section>
<footer>
<a href="http://twitter.com/nickrp"><img src="images/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="http://facebook.com/nickpettit"><img src="images/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<p>© 2016 McCall Architects Inc.</p>
</footer>
</div>
</body>
</html>
10 Answers
Gavin Mace
30,747 PointsI could have missed it, but i could only find a gallery Li with max-width of 45%. Other than this:
#gallery { width: 28.3333; }
Maybe use max-width: 28.3333% or similar and apply to gallery Li on devices >660 PX.
James McCall
555 PointsHi Max Thanks for your suggestions I checked all # hash and . dots and they all apperar to be there. Unfortunately I don't yet understand the box model etc. so Im still stuck not understanding why the code from the tutorial isn't working for me. Thanks Jim
Hi Gavin Thanks for your suggestions I believe I have the #gallery li values of 45% and 28.3333% the same as the tutorial code in both the main CSS and the resposnive CSS repectively, so I dont know what you mean
Im still wanting to find out how to have 2 columns of images in phone size and 3 in desktop size screens
Thanks Jim
James McCall
555 PointsThe Responsive CSS sheet at the top shows the following code but it doesn't do anything. If I delete it the page responds the same. I still don't understand how to get 2 columns of images when screen is under 480px
@media screen and (min-width: 480px) {
/******************************** TWO COLUMN LAYOUT ********************************/ #primary { width: 50%; float: left; }
#secondary { width: 40%; float: right; }
Jonathan Newman
5,219 PointsCheck your Index HTML file:
<meta name="viewport" content="width=device-wifth, initial-scale=1.0">
Try "wifth" to "width".
James McCall
555 PointsThanks Jonathan I already changed that misspelling, but it didn't help The mystery continues Aloha Jim
Gavin Mace
30,747 PointsHi James,
I'm suggesting that because you have the width set to 45% on desktop, that's why you're only getting 2 columns per row.
45 * 3 = 135% ... so it pushes it down to the next line
If you set it to 30% .... 30 * 3 = 90% .... so it'd all fit on the same row (I'd allow for some padding).
James McCall
555 PointsHi Gavin When I change it to 30% there are 3 images in a row at ALL screen sizes. It doesnt reduce to 2 across at 480 px. There is obviously something I am not understanding and I don't know what it is Thanks Jim
Jonathan Newman
5,219 PointsOkay I think I am having the same problem actually.
Whenever he looks at his site in small-resolution there are 3 columns. Whenever he looks at his site in large-resolution there are 3 columns.
He wants to see his site with 2 columns in small-resolution.
James McCall
555 PointsI think the problem is in the fact that the code at the top of the responsive CSS sheet which is supposed to create 2 images across at 480px doesn't do anything. If I delete the following code the page responds the same - 3 images across at all resolutions.
@media screen and (min-width: 480px) {
/******************************** TWO COLUMN LAYOUT ********************************/
primary {
width: 50%; float: left; }
secondary {
width: 40%; float: right; }
There is no reference to "primary" or "secondary" in the index.html. Maybe this is the problem?
Jonathan Newman
5,219 Pointsprimary and #secondary are referenced in the contact.html file.
James McCall
555 PointsYes, thanks, you are right, they are But these don't effect the portfolio images, so we have eliminated that as the source of the problem
Jonathan Newman
5,219 PointsOkay, I got it to work for myself.
In the responsive.css file inside of
@media screen and (min-width: 480px) {
you will see:
#gallery { width: 28.3333; }
#gallery li:nth-child(3n+1) clear: left; }
I changed that to:
#gallery li { width: 45%; }
#gallery li:nth-child(3n) { clear: left; }
Also, inside of
@media screen and (min-width: 660px) {
I wrote:
#gallery li { width: 28.3333%; }
#gallery li:nth-child(3n) { clear: right; }
This made it 3 columns when I made a large screen and 2 columns with relatively larger images on a small screen.
I'm pretty sure the #gallery li:nth-child(3n) { clear: right; } code is not ideal. Whenever I change it to (1n) I get the same result.
James McCall
555 PointsHi Jonathan Thank you for continuing to work on this When I use your code I get 3 new results: 1- The image portfolio now spans only about 80% of the screen width with about a 20% white area on the right. I would like the portfolio to span 100% of the screen width 2-The portfolio is now 3 images wide at over 660 and under 480, but it is 2 images wide between 480 and 660. So you did get it to reduce to 2, but only in the 480-660 range. 3-There is a space (gap) after the 5th image in the 480-660 range Thanks Jim
Jonathan Newman
5,219 PointsAlso, your closing bracket under #gallery li:nth-child(3+1) is misplaced. It should be after .profile-photo's closing bracket
Jonathan Newman
5,219 PointsIf you want it 2 images across at all sizes, then underneath
@media screen and (min-width: 660px) {
write
#gallery li { width: 45%; }
#gallery li:nth-child(3n) { clear: right; }
This should make each image 45% the width of the page at 660 pixels & above.
Tell me how this works.
James McCall
555 PointsHi Jonathan No, I don't "want it 2 images across at all sizes", I would like 3 across on medium and large screens. Two across on phone screen. I would like 9 seamless images, in a 3x3 grid, without paragraphs that span the full width of the larger screens. I have been using width: 100% to achieve the full screen width, but I cant get it to reduce to two images across when I do that Thanks Jim
Jonathan Newman
5,219 PointsThis at the top of my responsive.css gave me a 2-image phone size screen:
@media screen and (min-width: 280px) {
/***************************** TWO COLUMN LAYOUT ******************************/
#primary { width: 50%; float:left; }
#secondary { width: 40%; float: right; }
/***************************** PAGE: PORTFOLIO ******************************/
#gallery li { width: 45%; }
#gallery li:nth-child(3n) { clear: left; }
in the 660+ media screen part I use the code:
gallery li {
width: 28.3333%
}
gallery li:nth-child(3n) {
clear: right;
}
That gives me 3 on larger screens, 2 on smaller screens.
Max Kutner
7,595 PointsMax Kutner
7,595 PointsHi,
A few of your selectors are missing '#' if I'm reading this correctly. Also, I've found it easier just to calculate the exact resolutions that need adjusting and using media querries with those figures for adjusting rows. You'll need to figure how much blank space (margins, padding, etc.) is included in the container because the percentage values only refer to how much of the immediate parent the image will take up. This is where the box model comes in handy.
Hope this helps!
Best, Max