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
Justin Bansal
1,228 PointsResponsive Design - One Column on Mobile 480px
I just finished the Responsive Design track so my site should now be completely response but I don't feel it is.
Can you check my code to see if it is? I'm expanding and reducing the size of the browser and one issue I see is when it's reduced to how it would look on a mobile, the portfolio page isn't a nice two-column layout. There's an image missing and moved on to the next line. It goes two images, then one on the right side, and then two at the bottom. I think that's the only issue, the rest is responsive? Can someone confirm pls?
Responsive CSS
'''css
@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; }
/******************************** 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; }
h2 { font-size: 0.825em; margin-bottom: 20px; }
header { border-bottom: 5px solid #599a68; margin-bottom: 60px; }
}'
''
Main CSS
'''css
/******************************** GENERAL *********************************/
body { font-family: 'Open Sans', sans-serif; }
wrapper {
max-width: 940px; margin: 0 auto; padding: 0 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: 'Changa One', sans-serif; margin: 15px 0; 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: 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%; 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 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'); } /******************************** COLOURS *********************************/
/* site body*/ body { background-color: #fff; color: #999; }
/* green header */ header { background: #6ab47b; border-color: #599a68; }
/* nav background on mobile */ 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; }
'''
INDEX ''' <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Justin Bansal | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,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-width, initial-scale=1.0"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Justin Bansal</h1> <h2>Designer</h2> </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="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 brushes</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Experimentation with color and texture.</p> </a> </li> </ul> </section> <footer> <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt-"Twitter Logo" class="social-icon"></a> <a href="#"><img src="img/facebook-wrap.png" alt-"Facebook Logo" class="social-icon"></a> <p>© 2015 Justin Bansal.</p> </footer> </div> </body> </html>
'''
ABOUT ''' <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Justin Bansal | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,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-width, initial-scale=1.0"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Justin Bansal</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html">Portfolio</a></li> <li><a href="about.html" class="selected">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <img src="img/nick.jpg" alt="Photograph of Nick Pettit" class="profile-photo"> <h3>About</h3> <p>Hi, I'm Justin Bansal! This is my design portfolio where I share all of my favourite work. When I'm not designing things, I enjoy exercising, playing video games, drinking good coffee, and more.</p> <p>If you'd like to follow me on Twitter, my username is <a href="http://twitter.com/justinbansal">@justinbansal</a>.</p> </section> <footer> <a href="http://twitter.com/justinbansal"><img src="img/twitter-wrap.png" alt-"Twitter Logo" class="social-icon"></a> <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt-"Facebook Logo" class="social-icon"></a> <p>© 2015 Justin Bansal.</p> </footer> </div> </body> </html> '''
''' <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Justin Bansal | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,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-width, initial-scale=1.0"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Justin Bansal</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html" class="selected">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section id="primary"> <h3>General Information</h3> <p>I am not currently looking for new design work, but I am available for speaking gigs and similar engagements. If you have any questions, please don't hesitate to contact me!</p> <p>Please only use phone contact for urgent inquiries. Otherwise, Twitter and email are the best way to reach me.</p> </section> <section id="secondary"> <h3>Contact Details</h3> <ul class="contact-info"> <li class="phone"><a href="tel:416-6425">416-6425</a></li> <li class="mail"><a href="mailto:justin@example.com">justin@example.com</a></li> <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=justinbansal">@justinbansal</a></li> </ul> </section> <footer> <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt-"Twitter Logo" class="social-icon"></a> <a href="#"><img src="img/facebook-wrap.png" alt-"Facebook Logo" class="social-icon"></a> <p>© 2015 Justin Bansal.</p> </footer> </div> </body> </html> '''
Justin Bansal
1,228 PointsExcuse me for the incorrect formatting of my code, HTML always goes in correctly but my css never goes into a code block.
Justin Bansal
1,228 PointsUnfortunately that didn't resolve it.
Nick had us write this into our responsive code:
'''css
/********************************
PAGE: PORTFOLIO *********************************/
#gallery li { width: 28.3333%; }
#gallery li:nth-child(4n) { clear: left; }
'''
I feel like I wrote someting wrong in my index.html file because the problem occurs when the browser is scaled down to as low as it can go.
4 Answers
Thas Eagans
Courses Plus Student 2,533 PointsDo you have captions underneath the images? If so, are the captions becoming too long when you shrink the browser to smartphone size?
</TREagans>
Justin Bansal
1,228 PointsYes there are captions and they are becoming longer.
So it's basically like 5 images in a two-column layout: 2 top, 2 middle, one bottom.
Then for some reason when it gets down to smartphone size, 2 stay at the top, and then one from the middle goes to bottom. And the one middle one that was there moves over to the right leaving a white space on the left side.
Here's my main CSS for this page:
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 }
Thas Eagans
Courses Plus Student 2,533 Pointsnth-childs can be a bit tricky..... try
#gallery li:nth-child(3n+2) {
clear: both;
}
</TREagans>
Justin Bansal
1,228 PointsSorry, that didn't work. I feel like the nth-child part is fine because this website is using a mobile-first approach going from mobile to desktop. So with this responsive css it's fine when we expand the site to fit tablets and desktops. The issue is from the mobile view - I think that means the index file has something wrong in its code for the gallery.
Not sure how to resolve it though.
Thas Eagans
Courses Plus Student 2,533 PointsIf the images are all displaying, just not aligning, then its not the HTML. It's the CSS or @media queries. If you're building from a mobile first approach, then the mobile view should be the first view you have working correctly.
</TREagans>
Justin Bansal
1,228 PointsYeah that's true, the mobile view should have been the first view I have working correctly..maybe it was and now isn't. I'm not sure. Yes, it's just an alignment issue. I've checked the code files from the lesson and nothing seems to be different.
Thas Eagans
Courses Plus Student 2,533 PointsComment out
<!-- image #5 -->
and then try
#gallery li:nth-child(4n) {
clear: both;
}
Gotta start debugging. Comment out the 4th image if you have to as well. Another thing is, ensure all the images are the same size. If not, they may not align as you want them too.
</TREagans>
Justin Bansal
1,228 PointsThanks for your suggestions my friend. I actually opened the project files from the assignment and his website did the same thing as mine is doing. I wonder if they know this --- it appeared differently in the video though.
Any way to speak to a staff member?
Thas Eagans
Courses Plus Student 2,533 PointsThas Eagans
Courses Plus Student 2,533 PointsSounds like your nth is incorrect. Try:
OR
I usually clear both regardless of which side float I originally used
</TREagans>