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

Posted by Ayush Bahuguna
Ayush Bahuguna
2,092 Points

My responsive code is not working.

Here is the HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Get Ahead P.O</title>
        <link rel="stylesheet" href="home.css">
        <link rel="stylesheet" media="(min-width: 640px)" href="responsive.css">

    </head>```

```HTML

        <section id="content">```

```HTML
 <div class="footer">
            <p id="left">&copy; Get Ahead P.O 2015-2016</p>
            <br>
            <p id="right"><br>179/34 Dream Lane<br>Dream City<br>112908<br>Dream Country</p>

        </div>```



and here is the responsive CSS

@media screen and (min-width: 640px) {
    #content {
        max-width: 60%;
    }

    .footer #right {
        clear: right;
    }
}

2 Answers

Jonathan Etienne
Jonathan Etienne
24,572 Points
Jonathan Etienne
Jonathan Etienne
24,572 Points

Hi,

I think it would be good in the future if you could provide us with a bit more context.

I have three suggestions:

1) In your header

<link rel="stylesheet" media="(min-width: 640px)" href="responsive.css">

to

<link rel="stylesheet" type="text/css" href="responsive.css">

You might want to add a viewport, as it will tell mobile device how to scale their width size:

<meta name="viewport" content="width=device-width, initial-scale=1">

http://webdesign.tutsplus.com/articles/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972

2) In the body: It seems you have an open section

<section id="content">

but I don't see any closing.

3) In your css:

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

when using media screen, it's always a good idea to set conditions for both desktop and mobile display. In your case, min-width will only apply to not devices display. If you want this to apply to your phones/tablet, you need to use min-device-width at as well, hence:

`@media screen and(min-width: 640px) and (min-device-width: 640px)

Since you have minimum conditions, you might want to also include maximum conditions.

Sean T. Unwin
Sean T. Unwin
28,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 Points

The way your CSS is currently by using min-width: 640px will set the #content width to 60% when screens are 640px or greater. Is that what you want?

Try changing the media attribute for the link tag to , "screen and (min-width: 640px)".

<link rel="stylesheet" media="screen and (min-width: 640px)" href="responsive.css">