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

HTML How to Make a Website Styling Web Pages and Navigation Style the Portfolio

Posted by Chris Bird
Chris Bird
499 Points

My images aren't decreasing in size and my footer is floating into the images...

I feel I've followed along correctly and can't spot the problem. Can someone please spot what this issue is. The images aren't decreasing in size and my footer in floating into the images...

Chris Bird
Chris Bird
499 Points 
/******************
GENERAL
******************/

body  {
  font-family: 'Basic', sans-serif;
}

#wrapper  {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}

a  {
  text-decoration: none;
}

image {
  max-width: 100%
}

/******************
HEADING
******************/

#logo  {
  text-align: center;
  margin: 0;
}

h1 { 
  font-family: 'Pacifico', cursive;
  margin: 15px 0 -15px;
  font-size: 2.25em;
  font-weight: normal;
  line-height: 1.4em;
}

h2 {
  font-family: 'Lato', sans-serif;align-content:
  margin: -30px 0 0;
  font-weight: normal;
}

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

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

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

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

/******************
PAGE: Portfolio
******************/

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

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

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

/* Site Body */
body  {
  background: #fff;
  color: #999;
}

/* Blue Header*/
header  {
  background: #0071BC;
  border-color: #00334F;
}

/* Logo Text */
h1, h2   {
  color: #ffffff;
}

/* Links */
a {
  color: #A3DD44;
}

/* Nav Background on Mobile*/
nav {
  background: #00334F;
}

/* Nav Link*/
nav a, nav a:visited {
  color: #fff;
}

/* Slected Nav link*/
nav a.selected, nav a:hover {
  color: #457FA0;
}
Steven Parker
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

It can be hard to see the issue without the complete project, particularly when images are involved. You can share everything at once if you make a snapshot of your workspace and provide the link to it.

Chris Bird
Chris Bird
499 Points

Success! It was the image tab - abdulrahman. Thanks for taking the time! was driving me insane haha.

2 Answers

abdulrahman
abdulrahman
2,515 Points

Check your image tag or should i say img tag? Use clear:both; css for Footer element (I think this topic will come up withinin the next few lessons ).

David Sheridan
David Sheridan
8,579 Points
David Sheridan
David Sheridan
8,579 Points

I think it's because of #gallery being floated left. When things are floated they are taken out of the normal document flow and their height is no longer respected