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
melissa brown
4,670 Pointsthree columns do not look correct when i make the screen smaller and larger.
Hi, my portfolio pictures do not look correct when the screen is smaller for example the third picture floats to the right with a empty space on the left.
responsive.css
@media screen and (min-width: 480px) {
/* ************************************ TWO COLUMN LAYOUT ***************************************/
#primary { width: 50%; float: left; }
#secondary{ width:40%; float:right; }
/* ************************************ 3*5=15 because of margins each 2.5 one side 100-15%= 85 85/3= 28.3 ***************************************/
/* ************************************ PAGE: PORFOLIO ***************************************/
#gallery li{ width: 28.3333%; }
#gallery li:nth-child (4n){ 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
/* ************************************ 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: 'Special Elite', 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: 14px 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 5%; }
/* ************************************ PAGE PORFIOLIO ***************************************/
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%; }
/* ************************************ 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 20px; } .contact-info li.phone a { background-image: url('../img/phone.png'); }
.contact-info li.mail a { background-image: url('../img/mail.png'); }
/* ************************************ COLOURS ***************************************/
/* 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; }
index.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: 'Special Elite', 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: 14px 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 5%; }
/* ************************************ PAGE PORFIOLIO ***************************************/
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%; }
/* ************************************ 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 20px; } .contact-info li.phone a { background-image: url('../img/phone.png'); }
.contact-info li.mail a { background-image: url('../img/mail.png'); }
/* ************************************ COLOURS ***************************************/
/* 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; }
2 Answers
Tom Checkley
25,165 PointsIf you mean you would like to centralize the bottom 2 images you would need to give the 4th image a margin left. As the image is 28.3333% wide and there are 2, both with an inherited 2.5% margin from main css the total width is 66.6666%
2.5% | 28.3333% | 2.5% | 2.5% | 28.3333% | 2.5%
take that from 100% and you are left with 33.3334%, divide that by 2 and your margin-left should be 16.6666%. You will need to target the 4th child in the 660px media query. The code should look like this
@media screen and (min-width: 660px){
/**********
Center bottom images
***********/
#gallery li:nth-child(4n){
margin-left: 16.6666%;
}
Hope this helps, and that was what you were trying to achieve.
Tom Checkley
25,165 PointsSorry I misread your question, the same principal would work on any of the screen media queries. Though you would have to play with the %'s and which child you were targeting.
eg. on main.css you would need to target #gallery li:nth-child(5n) with a 25% margin left, this would work until the 480px break. You would then need to reset it in the responsive.css file to move it back into the correct position for both of the media queries.