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 How to Make a Website Styling Web Pages and Navigation Style the Portfolio

Posted by Aris Gysel
.a{fill-rule:evenodd;}techdegree
Aris Gysel
Python Web Development Techdegree Student 2,707 Points

When I shrink the browser there is a blank space in row 2 column 1 of gallery. It did not do that at first

When I shrink my browser the first image in row two pops on the right side and leaves a blank space. It did not do that at first. Only when I played around with the code.

Here is my 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;

}

4 Answers

Nick Janes
Nick Janes
5,487 Points
Nick Janes
Nick Janes
5,487 Points

We're targeting the id gallery not the element gallery, so don't forget your pound symbols!(:

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

#gallery li {
   float: left;
   width: 45%;
   margin: 2.5%;
   background-color: #f5f5f5;
   color: #bdc3c7;
}
Aris Gysel
seal-mask
.a{fill-rule:evenodd;}techdegree
Aris Gysel
Python Web Development Techdegree Student 2,707 Points
Aris Gysel
.a{fill-rule:evenodd;}techdegree
Aris Gysel
Python Web Development Techdegree Student 2,707 Points

thank you for the fast answer. somehow it did not show the pound sign on my last post. but in fact there i put it there. here again my code.. I dont see any difference to yours.

gallery {

margin: 0; padding: 0; list-style: none; }

gallery li {

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

}

Aris Gysel
.a{fill-rule:evenodd;}techdegree
Aris Gysel
Python Web Development Techdegree Student 2,707 Points

hmm it cut of the pound signs again.. but in the original code they are there..

Nick Janes
Nick Janes
5,487 Points

Make sure you're saving the file before you preview too!

Aris Gysel
seal-mask
.a{fill-rule:evenodd;}techdegree
Aris Gysel
Python Web Development Techdegree Student 2,707 Points
Aris Gysel
.a{fill-rule:evenodd;}techdegree
Aris Gysel
Python Web Development Techdegree Student 2,707 Points

i just realized when i make the text below the image shorter it does not happen. it seems as soon the text has to go into two lines it increases the "box" and this "box" pushes the image away. if i shorten the text and the text stays on one line it does not happen... any idea why this happens?

Nick Janes
Nick Janes
5,487 Points

Can you take a screenshot of it or something?

Aris Gysel
.a{fill-rule:evenodd;}techdegree
Aris Gysel
Python Web Development Techdegree Student 2,707 Points

yeah if i knew how to upload an image.. :D :@

Nick Janes
Nick Janes
5,487 Points

I'm sorry, I'm out of ideas.

Dian Zhang
Dian Zhang
508 Points
Dian Zhang
Dian Zhang
508 Points

same problem here...

Have you figured out why not two pics in one line?

Aris Gysel
.a{fill-rule:evenodd;}techdegree
Aris Gysel
Python Web Development Techdegree Student 2,707 Points

I found out that if the text goes on for two lines it pushes down the image. With a shorter text or smaller font the problem does not appear. I would still like to know why this happens though