I added all the coding in the video but to make it adapt to the browser size, but nothing is actually working? I'm lost!

Question

Below is the coding I have added to my responsive.css

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

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

}

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

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

I have used to added the coding necessary to add responsive.css to all my html documents. and I have made sure I have put it below my main.css

and when I go to my contact page it separates into two columns, but when you make the browser window smaller it doesn't adjust at the breaking point to make the contact detail list below the first column.

I don't know! Please help if you even have a slightest clue as to whats wrong!

Answer 1 · 2015-02-17T10:27:23Z

February 17, 2015 10:27am

Hi Susanna!

Take a look at the Markdown Cheatsheet at the bottom of this page and paste in both your html and css so we can take a look!

Thanks!

Answer 2 · 2015-02-17T11:12:14Z

February 17, 2015 11:12am

Do you have responsive.css saved in the css folder? Seems silly, but it'd be an easy thing to overlook.

Cheers!

Answer 3 · 2015-02-17T16:16:05Z

February 17, 2015 4:16pm

Hey Susanne do you have an opening head tag in your index.html, about.html, or contact.html file?

Answer 4 · 2015-02-17T10:51:16Z

February 17, 2015 10:51am

Hi Shawn!

Okay here we are I have copied over all the pages except for normalise.css hope I have done it right, I have never done this before.

Thank you so much for your help!!!

Index.html

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Susanna Ward | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:700,400|Amatic+SC' 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>Susanna Ward</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html"class="selected">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul id="gallery"> <li> <a href="img/optimised1.jpg"> <img src="img/optimised1.jpg"alt=""> <p>This very bright colourful poster is part of a fictional project, were I redesigned Ryanair.</p> </a> </li> <li> <a href="img/optimised2.jpg"> <img src="img/optimised2.jpg"alt=""> <p>I love this crazy experimentation of the sea with a combination of drawings and photographs, full of character and experimentation.</p> </a> </li> <li> <a href="img/optimised3.jpg"> <img src="img/optimised3.jpg"alt=""> <p>Hand made, digitally composed and edited. Some cloud repetition and a real splash of colour sums up this design.</p> </a> </li> <li> <a href="img/optimised4.jpg"> <img src="img/optimised4.jpg"alt=""> <p>This this poster is part of my fictional Ryanair project. Hidden in the poster are endless amount of hot air balloons and aeroplane.</p> </a> </li> <li> <a href="img/optimised5.jpg"> <img src="img/optimised5.jpg"alt=""> <p>More trees filling up the scenery. Makes a change to real ones.</p> </a> </li> <li> <a href="img/optimised6.jpg"> <img src="img/optimised6.jpg"alt=""> <p>Hand drawn tree, photographed scenery and, a few layering effect. And here we have it, a hand drawn tree in real scenery.</p> </a> </li> <li> <a href="img/optimised7.jpg"> <img src="img/optimised7.jpg"alt=""> <p>This is a candid street photograph I took at a local festival in the town of Great Yarmout. The compostion is strong and the beauty of the image is that it is entirely natural.</p> </a> </li> <li> <a href="img/optimised8.jpg"> <img src="img/optimised8.jpg"alt=""> <p>This is one of my favourite experiments for this project, Most of its hand made and some features are digital... This is all digitally enhanced to give that something extra!</p> </a> </li> </ul> </section> <footer> <a href="https://www.flickr.com/photos/89096625@N06/"><img src="img/flikr logo.png"alt="Flikr Logo" class="social-icon"></a> <a href="https://www.facebook.com/pages/Susanna-Wards-Creative-Studio/568338966568050?fref=ts"><img src="img/facebook-wrap.png"alt="flikr Logo"class="social-icon" ></a> <p>© 2015 Susanna Ward. </footer> </div> </body> </html>

Contact.html

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Susanna Ward | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:700,400|Amatic+SC' 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>Susanna Ward</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html" class="selected">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section id="primary"> <h3>General Information</h3> <p>I am avalible as a freelance designer. If you have any you would like to to create for you as part of my freelance service please do not hesitate to contact me! Please note I am not set up as a professional business as I'm curently studying.</p> <p>The best way to reach me is through messaging my facebook page, or by my email.</p> </section> <section id="secondary"> <h3>Contact Details</h3> <ul class="contact-info"> <li class="phone"><a href="tel:07541786231">07541786231</a></li> <li class="mail"><a href="mailto:susanna_ward@yahoo.co.uk">susanna_ward@yahoo.co.uk</a></li> <li class="facebook"><a href="https://www.facebook.com/pages/Susanna-Wards-Creative-Studio/568338966568050?fref=ts">Susanna Ward's Creative Studio</a></li>

            </ul>
            </section>
            <footer>
                <a href="https://www.flickr.com/photos/89096625@N06/"><img src="img/flikr logo.png"alt="Flikr Logo"
                                                                                                class="social-icon"></a>
                <a href="https://www.facebook.com/pages/Susanna-Wards-Creative-Studio/568338966568050?fref=ts"><img src="img/facebook-wrap.png"alt="flikr Logo"class="social-icon" ></a>
                <p>&copy; 2015 Susanna Ward.
            </footer>
        </div>

</body> </html>

about.html

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Susanna Ward | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:700,400|Amatic+SC' 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>Susanna Ward</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html">Portfolio</a></li> <li><a href="about.html"class="selected">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <img src="img/profile picture.jpg" alt="Photograph of Susanna Ward" class="profile-photo"> <h3>About</h3> <p>Hi, I'm Susanna Ward! This is my deisgn portfolio. My area of expertise is graphic design, and little bit of illustration. I love being challenged with creating new styles of design. I studied graphic design, photography, and communications at the East Norfolk Sixth Form College. I have previously studied graphic design: visual communications at the University of Creative Arts in Canterbury, but this year I'm transfering to Norwich University of Arts where I will be studying design for publishing, which is close to my home town Great Yarmouth.</p> <p> If your a fan of my work why not like my facebook page: <a href="https://www.facebook.com/pages/Susanna-Wards-Creative-Studio/568338966568050?fref=ts">Susanna Ward's Creative Studio</a>.</p> </section> <footer> <a href="https://www.flickr.com/photos/89096625@N06/"><img src="img/flikr logo.png"alt="Flikr Logo" class="social-icon"></a> <a href="https://www.facebook.com/pages/Susanna-Wards-Creative-Studio/568338966568050?fref=ts"><img src="img/facebook-wrap.png"alt="flikr Logo"class="social-icon" ></a> <p>© 2015 Susanna Ward. </footer> </div> </body> </html>

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:'Amatic SC',sans-serif; margin: 15px 0; font-size: 1.75em; font-weight:normal; line-height: 0.8em;

}

h2 { font-size: 0.75 em; margin: -5px 0 0; font-weight: normal; }

/***************************** Navigation *****************************/

nav {text-align:center; padding: 10px; 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;}

/***************************** 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: #bdc3c7}

/***************************** Page about *****************************/

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

/***************************** Page contact *****************************/

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

.contact-info li.facebook a {background-image: url('../img/facebook.png'); }

/***************************** COLOURS *****************************/

/site body/ body {background-color:#fff; color:#999;}

/green header/ header { background: #6ab47b; border-color: #599a68;}

/nav background on mobile/ 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;}

responsive.css

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

/***************************** Two column layout *****************************/

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

}

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

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

}

Answer 5 · 2015-02-17T15:44:25Z

February 17, 2015 3:44pm

It wasn't working for me either. Checked twice everything and seemed correct. But then tried to save all separate html files separately and it started to work. You can try the same. It seems that saving one file doesn't save the other ones ;)

Answer 6 · 2015-02-17T16:20:38Z

February 17, 2015 4:20pm

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

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

try putting space here after ':'

also it didn't work for me as in video so I changed secondary to 50% and left

also you forgot the '#' before primary and secondary ;)

Answer 7 · 2015-02-22T10:00:46Z

February 22, 2015 10:00am

Did you ever end up finding the bug? I'm interested to know what the issue was.

Answer 8 · 2015-09-03T20:35:51Z

September 3, 2015 8:35pm

If you are using Chrome or Safari, make sure your cache is disabled or else the page won't update. I had this problem earlier.

Welcome to the Treehouse Community

Looking to learn something new?

Susanna Ward

Susanna Ward

I added all the coding in the video but to make it adapt to the browser size, but nothing is actually working? I'm lost!

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

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

8 Answers

Shawn Denham

Shawn Denham

Susanna Ward

Susanna Ward

Bryan Borgeson

Bryan Borgeson

Susanna Ward

Susanna Ward

Rashii Henry

Rashii Henry

Susanna Ward

Susanna Ward

wrapper {

logo {

gallery {margin: 0;

gallery li {float:left;

gallery li a p { margin: 0;

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

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

Rytis Mitkus

Rytis Mitkus

Susanna Ward

Susanna Ward

Rytis Mitkus

Rytis Mitkus

Bryan Borgeson

Bryan Borgeson

Francis Manning

Francis Manning