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 Susanna Ward
Susanna Ward
855 Points

My website has all breaking points in place, but when I open I open it on my mobile it doesn't seem to work?

Here's my 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:#fff;}

.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:#fff;}

#gallery li a p { margin: 0;
    padding: 5%;
    font-size:0.75em;
    color: #000066}



/*****************************
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;}
body {background-image:url('../img/waved.jpg');background-size:100%;}

/*green header*/
header {
    background: #000066;
    border-color: #ff9900;}

/*nav background on mobile*/
nav {background:#003366;}

/*logo text*/
h1,h2 {color: #fff} 

/*links*/
a{color: #ff9900;}

/*nav link*/
nav a, nav a:visited {color:#00cccc;} 

/*selected nav link*/
nav a.selected, nav a:hover {
    color:#fff;}

Here's my 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>&copy; 2015 Susanna Ward.
                </footer>
            </div>
  </body>
</html>

1 Answer

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Susanna,

What stage of the course are you at right now?

What I see missing from your html is your meta viewport tag which is needed for responsive layouts.

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

This would go in your head section. It stops mobile devices from trying to scale the desktop layout to fit on a small screen.

This is introduced in the course but I don't remember when. Perhaps you're not quite that far yet?

Susanna Ward
Susanna Ward
855 Points

Ah okay! well if I'm honest I was almost finnised but I skipped to upload because I need the website up by Thursday, but I am going to go back to what I missed anyway! but thats great thank you so much I have added that piece of coding and it works now!!! thank you so much!