Problems at the Responsive Web Design Point in How to Make a Website Series - CSS and HTML

Question

Hi everyone, I apologize if these questions don't make sense. I am just learning, and still not sure how to speak about these things properly, let alone do them properly. Here goes...

My sections are not stacking even though I have media query breaks set up at 480px and 660px. Also, my screen does not seem to be able to go as small as on the video. I have a macbook pro 13". (?) Also, on my portfolio page all the images/captions are huddled to the left of the screen and small and when I take out the #gallery li width 28.333.. code in my Responsive.css to see what if that's that problem, the images then stack in only one big column down the page and one image fills the width, rather than two, which is how I think it was supposed to be.

I have several other problems, that I have just noticed at the same time as these, but I think must have been there before. But maybe I can get some help with these two main issues first. Thanks in advance for any guidance.

-Jennifer

Answer 1 · 2016-01-09T03:53:19Z

January 9, 2016 3:53am

http://treehouse-code-samples.s3.amazonaws.com/HowToMakeAWebsite/HowToMakeAWebsite-Stage8-Video4.zip

Here is the completed version download link.

Just modify it there.

That's too much code for me to debug. Just use nicks completed css.

Answer 2 · 2016-01-06T05:20:45Z

January 6, 2016 5:20am

Could you please post your code here?

If not slowly go over the video again and follow along. It's probably most likely a typo. Typos in programming we call debugging. Debugging is big part of programming. Please post your code so we can help you.

Answer 3 · 2016-01-09T03:48:24Z

January 9, 2016 3:48am

Since I have numerous issues with my website, I guess I will post basically all my code. Here are all of my problems specifically:

Things aren't stacking.
Icons next to my contact info are not appearing.
The size of my Twitter and Facebook logo look too large.
The images on my portfolio page are scrunched over to the left.

All of this should be in place according to where I am in the How to Build a Website track. I have reviewed the videos and gone through my notes as well as pasted everything into the markup validation services and supposedly things are looking pretty good. I would really appreciate anyone going through this and seeing if they can find my errors.

Here is my index.html:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jenn | POP!</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Jenn POP!</h1> <h2>Writer</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 id="primary"> <ul id="gallery"> <li> <a href="img/numbers-01.jpg"> <img src="img/numbers-01.jpg" alt=""> <p> Experimentation with color and texture.</p> </a>
</li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>Playing with blending modes in Photoshop.</p> </a>
</li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Trying to create an 80s style of glows.</p> </a>
</li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Drips created using Photoshop brushes.</p> </a>
</li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Creating shapes using repitition.</p> </a>
</li> </ul> </section> <footer> <a href="https://twitter.com/jennknauss"><img src="img/twitter-wrap.png" alt="Twitter logo"></a> <a href="https://www.facebook.com/jennifer.l.knauss"><img src=img/facebook-wrap.png alt="Facebook logo"></a> <p>© 2015 jenn knauss</p> </footer> </div> </body> </html>

Answer 4 · 2016-01-09T03:49:02Z

January 9, 2016 3:49am

Here is my about.html:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jenn | POP!</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Jenn POP!</h1> <h2>Writer</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 id="primary"> <img src="img/jenn-summer.jpg" alt="Photo of Jenn Knauss in Summer" class="twitter-photo"> </section> <section id="secondary"> <h3>ABOUT</h3> <p>This is a picture of me. I did not design this page, however. I am just learning the ropes!</p> <p>If you'd like to follow me on Twitter, though I never do anything on there so I don't recommend it, my username is <a href="https://twitter.com/jennknauss">@jennknauss</a>.</p> </section> <footer> <a href="https://twitter.com/jennknauss"><img src="img/twitter-wrap.png" alt"Twitter Logo"></a> <a href="https://www.facebook.com/jennifer.l.knauss"><img src="img/facebook-wrap.png" alt"Facebook Logo"></a> <p>© 2015 jenn knauss</p> </footer> </div> </body> </html>

Answer 5 · 2016-01-09T03:49:54Z

January 9, 2016 3:49am

Here is my Main.css:

/********************************************
GENERAL
********************************************/

body {
  font-family:'Poiret One', 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:'Poiret One', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}

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





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


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


/********************************************
NAVIGATION
********************************************/

nav {
  text-align: center;
  padding: 10px;
  margin: 20px 0 0;
}

nav ul {
  margin: 0 10px;
  list-style: none; 
  padding: 0;
}

nav li {
  display: inline-block; /*nav menu in line rather than stacked */
}

nav a {
  padding: 15px 10px;  /* curser has more clicking room */
}

/********************************************
FOOTER
********************************************/

footer {
  font-size: 0.75em;
  text-align: center;
  clear: both;
  padding-top: 50px;
  color: #111;
}


/********************************************
COLORS
********************************************/

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

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

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



/********************************************
PORTFOLIO
********************************************/


#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li a {
  float: left;
  width: 45%;
  margin: 2.5%;
  color: #fff;
  background-color: #ccc;
}



/********************************************
CONTACT
********************************************/

.contact-info {
  list-style: none;
  font-size: 0.9em;
  margin: 0;
  padding: 0;
}

.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 0;
}

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

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

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

Answer 6 · 2016-01-09T03:51:04Z

January 9, 2016 3:51am

It has to with your css. Your html is fine. Please post your css.

Answer 7 · 2016-01-09T03:51:06Z

January 9, 2016 3:51am

Here is my responsive.css:

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

/******************************************** TWO COLUMN LAYOUT ********************************************/

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

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

/******************************************** PAGE: PORTFOLIO ********************************************/

#gallery li { width: 28.333%; }

#gallery li:nth-child(3n + 1) { clear:left; }

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

}

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

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

Welcome to the Treehouse Community

Looking to learn something new?

Jennifer Knauss

Jennifer Knauss

Problems at the Responsive Web Design Point in How to Make a Website Series - CSS and HTML

Jennifer Knauss

Jennifer Knauss

7 Answers

jason chan

jason chan

Jennifer Knauss

Jennifer Knauss

jason chan

jason chan

Jennifer Knauss

Jennifer Knauss

Jennifer Knauss

Jennifer Knauss

Jennifer Knauss

Jennifer Knauss

jason chan

jason chan

Jennifer Knauss

Jennifer Knauss