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
André Alves
1,231 PointsMy first break point is not working the color of background doesnt work
When i change the size of the window nothing happens and when it get a certain size the images actually change place
André Alves
1,231 Points/****************************************************** GENERAL ******************************************************/
body { font-family: 'OpenSans', 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; } /****************************************************** HEADER ******************************************************/
header { float: left; margin: 0 0 35px 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; }
/****************************************************** GALERY ******************************************************/
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.85em; color: #bdc3c7; }
/****************************************************** ABOUT ******************************************************/
.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }
/****************************************************** Contact ******************************************************/
.contact-info { list-style: none; margin: 0; padding: 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'); }
/****************************************************** COLORS ******************************************************/
/* site body */ body { background-color: white; color: #999; }
/* green header */ header { background: #6ab47b; border-color: #599a68; }
/* nav background on mobile */ nav { background: #599a68; }
/* logo text color */ h1, h2 { color: #fff; }
/* nav link / nav a, nav a:visited { color: #fff; } / links / a { color: #6ab47b; } / selected nav link */ nav a.selected, nav a:hover { color: #32673f; }
3 Answers
Iagor Moraes
18,678 PointsTry using media query :
@media (max-width: 480) { galery { float: none; } }
André Alves
1,231 PointsThe color issue is resolved but when the window get smaller the images get out of the place
Allison Davis
12,698 PointsCan you post your updated CSS including the media query?
André Alves
1,231 PointsSorry for the late reply but the problem is already solved
André Alves
1,231 PointsAndré Alves
1,231 Points<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>André Alves - Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>André Alves</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html" class="selected">Galeria</a></li> <li><a href="about.html">Sobre mim</a></li> <li><a href="contact.html">Contacte-me</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>Retrospetiva com photoshop</p> </a> </li>
<li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>Cores e texturas</p> </a> </li>
<li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Imagem com estilo 60's</p> </a> </li>
<li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>"Paint Brushes" com photoshop</p> </a> </li>
<li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Repetição de formas</p> </a> </li>
</ul> </section> <footer> <a href="https://www.twitter.com"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="https://www.facebook.com"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>© 2015 André Alves</p> </footer> </div> </body> </html>
this is my index.html