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
Siddek Ali
2,407 Pointsthe 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>
5 Answers
Jeff Jacobson-Swartfager
15,419 PointsNo 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
2,407 Points: ) thanks jeff. I can't believe i missed that. one error can make a big difference.
Jeff Jacobson-Swartfager
15,419 PointsNo 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
15,419 PointsHi 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
2,407 Pointsmy 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
15,419 PointsI'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
2,407 Pointsi 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
15,419 PointsIf 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
2,407 Pointsmy 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
2,407 Pointshi Jeff
I appreciate your effort. I have pasted the html and css code. I am also using the normalize.css.
thank you
Siddek Ali
2,407 Pointssorry jeff
Siddek Ali
2,407 PointsHi Jeff
Thanks again for your time. I know it is valuable!
Jeff Jacobson-Swartfager
15,419 PointsNo problem! I'm glad I could help!
Jeff Jacobson-Swartfager
15,419 PointsJeff Jacobson-Swartfager
15,419 PointsI've formatted your post with Markdown to make it a bit more readable.