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

CSS How to Make a Website Responsive Web Design and Testing Adjust the Profile Page and Header

Jacqueline Grubb
Jacqueline Grubb
2,343 Points
Posted by Jacqueline Grubb
Jacqueline Grubb
2,343 Points

My photo on my About page doesn't center when the screen size is made smaller... what did I miss?

When I test the responsiveness of the About Page by reducing the screen size, my photo move from center to left-- it stays aligned left the whole time - from 2 column to single column. What did I miss?? Where should I have added centering of the image through this process?

Chyno Deluxe
Chyno Deluxe
16,936 Points

Can you please post code.

How to post Code

2 Answers

Jacqueline Grubb
Jacqueline Grubb
2,343 Points
Jacqueline Grubb
Jacqueline Grubb
2,343 Points

```css responsive code

@media screen and (min-width: 480px) {

/*********************** PAGE: CONTACT (TWO COLUMN LAYOUT) ************************/

#primary { width:50%; float:left; }

#secondary { width: 40%; float:right; } } /*********************** 3 X 5 = 15% 100%-15%=85% 85% / 3 = 28.333333333333% *********************/ /******************** PAGE: PORTFOLIO ************************/ #gallery li { width: 28.3333% } #gallery li:nth-child(4n) { clear: left; }

/*********************** PAGE: ABOUT (TWO COLUMN LAYOUT) ************************/ .profile-photo { float:left; margin:0 5% 80px 0; }

@media screen and (min-width: 660px) {

}

Adam Creasey
Adam Creasey
5,756 Points

Hey Jacqueline, I'm new to this also, but I can see some of your declarations need a space between the properties and values. ie. Yours looks like this, #primary { width:50%; } When it should look like this, #primary { width: 50%; }

Jacqueline Grubb
Jacqueline Grubb
2,343 Points
Jacqueline Grubb
Jacqueline Grubb
2,343 Points

```css main /*********************** GENERAL ************************/

body { font-family: 'Roboto', sans-serif;font-size: .75em; }

wrapper {

max-width: 940px; margin: 0 auto; padding: 0 5%; } a { text-decoration:none; }

img { max-width: 100%; }

/*********************** HEADING ************************/ header { float:left; margin: 0 0 30px 0; padding: 5px 0 0 0; width:100%;

}

/* logo text*/

logo {

text-align: center; margin: 0; }

h1 { font-family: 'Pacifico', cursive; font-size: 2.0em; font-weight: normal; line-height: 1.8em; }

h2 { font-family: 'Roboto', sans-serif; font-size: 1.0em; font-weight: normal; }

h3 { margin:0 0 1em 0; }

/*********************** 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; }

/*********************** 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: #bbc3c7; text-align:center; }

/*********************** 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; }

/*********************** 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; }

/* color for Nav link color*/

nav a, nav a:visited { color:#fff; }

/* Nav link selected color*/

nav a.selected, nav a:hover { color: #32673f; }

/*********************** PAGE: ABOUT ************************/

.profile-photo { clear:both; display: block; max-width: 150px; margin: 0 auto 30px; border-radius:100%; }

/*********************** PAGE: Contact ************************/

.contact-info { List-style: none; margin:0px; padding:0px; 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'); }

.contact-info li.linkedin a { background-image:url('../img/In-2C-14px.png'); }