Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

Little issue with my navigation after the Responsive CSS modifications

Hi guys,

I don't know why, although most of the responsive changes that Nick taught are working well, I have a few issues:

When I modify the navigation and make it float to the right, it works, however the navigation does not remain as a line when I reduce the size of the window (towards mobile size). In fact, it stays on the right but it becomes a block, when the window gets reduced

Moreover, Nick manages to get the logo go on top of the Navigation when he reduces the size of the window, but it does not seem to work either for me…

Similarly, when Nick reduces the size of his window on the contact page, the profile picture goes above the text, but mine stays on the left.

Here is the code I've typed on the Responsive CSS page, maybe someone can help me on this:

@media screen and (min-width: 480px) { /*************************** Two Column Layout ****************************/

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

#secondary { width: 40%; float: right; }

/*************************** Pqge: Portfolio Page ****************************/

#gallery li { width: 28.3333%; }

#gallery li:nth-child(4n) { clear: left; }

/*************************** Pqge: About ****************************/

.profile-photo { float: left; margin: 5% 10% 100px 0; }

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

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

}

The code I've typed on my main CSS is the following: (in case it can help solve the issue)

/*************************** 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: 0px 10px; padding: 0px; text-align:center; }

nav li { display: inline-block; }

nav a { font-weight: 800; padding: 15px 10px; }

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

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

Many thanks for any help provided! Cheers!

2 Answers

Shawn Flanigan
PLUS
Shawn Flanigan
Courses Plus Student 15,803 Points

Paul: It looks like you're misplacing your closing curly brackets for your media queries (or forgetting to close them). For example...

@media screen and (min-width: 480px) {
    header { 
        font-size: 1.25em;
        text-align: center;
    }
    #logo {
        text-align: center;
        margin: 0;
    }
} <!--Closes the first media query before starting a new one-->

@media screen and (min-width: 690px) {
    header {
        font-size: 2.5em;
        text-align: left;
    }
    #logo {
        text-align: left;
    }
} <!--Closes the next media query-->

Hope this helps.

Yeah, I noticed that afterwards when I was making the quiz… but you responded so quick that I couldn't close the query before you answered... Thanks for the help though! I appreciate