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

Siddek Ali
Siddek Ali
2,407 Points

the images have come side by side. there is no margin between them. the images have resized by only width and not height

CSS CODE

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

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

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

}

HTML CODE

    <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 80's style of glow</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 repetition</p>
            </a>
          </li>
        </ul>
Jeff Jacobson-Swartfager
Jeff Jacobson-Swartfager
15,419 Points

I've formatted your post with Markdown to make it a bit more readable.

5 Answers

Jeff Jacobson-Swartfager
Jeff Jacobson-Swartfager
15,419 Points

No worries! The issue was your rule for treating img width (lines 22-24). You have:

img { 
  max-width: 100; 
}

It should be:

img { 
  max-width: 100%; 
}

When declaring measurements like height and width, you need to provide a unit. In this case, the unit you want to use is %.

Siddek Ali
Siddek Ali
2,407 Points

: ) thanks jeff. I can't believe i missed that. one error can make a big difference.

Jeff Jacobson-Swartfager
Jeff Jacobson-Swartfager
15,419 Points

No worries! We all do it!

Could you mark this as the Best Answer? That way other folks on the forum will be able to quickly find the answer if they have a similar issue.

Jeff Jacobson-Swartfager
Jeff Jacobson-Swartfager
15,419 Points

Hi Mohammed, I'm not able to reproduce the issue you are having. I've put your code into codepen so you can see what I'm working with.

It is possible that some other styles in your stylesheet could be causing the issue. Do you have any other CSS in your stylesheet?

Siddek Ali
Siddek Ali
2,407 Points

my CCS Code

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

body { font-family: 'Halant', serif; }

wrapper {

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

a { text-decoration: none; }

#links { list-style: none; }

img { max-width: 100; }

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

logo {

text-align:center; margin: 0; }

h1 { font-family: 'Hind', sans-serif; margin: 15px 0; font-size: 1.75em;
font-weight: normal; line-height: 1.8em; }

h2 { font-family: 'Hind', serif; margin: -20px 0 0; font-size: 0.75em;
font-weight: normal; }

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

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

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

footer { font-size: 0.75em; text-align: center; padding-top: 50px 0; 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;

}

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

/* site body */ body { background-color: white; }

/* body text */ section p { color: #999; }

/* black header*/ header { background-color: black; border-color: black; }

/* navigation background on mobile*/ nav { background: #c2c2a3; }

/* logo text */ h1, h2 { color: white; }

/* links */ a { color: white; }

/* navigation link*/ nav a, nav a: visited { color: black; }

/* selected navigation link*/ nav a.selected, nav a:hover { color: black; }

Jeff Jacobson-Swartfager
Jeff Jacobson-Swartfager
15,419 Points

I'm still not getting the behavior you're experiencing. Here's a codepen that uses normalize.css as a base plus your html and css.

If you could share a snapshot of your workspace, I can give it another look.

Siddek Ali
Siddek Ali
2,407 Points

i have been through the code many times. I cant seem to figure it myself.

see link for screenshots of the page. http://we.tl/EjB0JRCGIK

Jeff Jacobson-Swartfager
Jeff Jacobson-Swartfager
15,419 Points

If you follow the directions in the link from my previous response about treehouse snapshots, I can get direct access to the code you are working with. Would you mind doing that instead?

Siddek Ali
Siddek Ali
2,407 Points

my HTML code

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Siddek|Web Developer</title> <link rel="stylesheet" href="normalize.css"> <link href='https://fonts.googleapis.com/css?family=Laila:400,600|Hind:400,600,700|Halant:400,600' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Siddek Ali</h1> <h2>Web Developer</h2> </a> <nav> <ul id="links"> <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/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 80's style of glow</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 repetition</p> </a> </li> </ul> </section> <footer> <a href=""><img src="img/twitter-wrap.png" alt="Twitter Logo"></a> <a href=""><img src="img/facebook-wrap.png" alt="Facebook Logo"></a> <p>Ā© 2015 Siddek Ali</p> </footer> </div> </body> </html>

Siddek Ali
Siddek Ali
2,407 Points

hi Jeff

I appreciate your effort. I have pasted the html and css code. I am also using the normalize.css.

thank you

Siddek Ali
Siddek Ali
2,407 Points

Hi Jeff

Thanks again for your time. I know it is valuable!