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

Posted by Moises Miguel
Moises Miguel
5,028 Points

img gallery is not being display properly.

Hello teamtreehouse! I was wondering why my img does not line up properly. I tried clear:both and left and right already but it still does not seem to work.

Here is the link to my HTML/CSS : http://jsfiddle.net/4Labxmm2/

as you can see "Creating a logo for Electric Valley" jumps down instead of staying to the right.

Moises Miguel
Moises Miguel
5,028 Points

Also, this only happens when its in mobil version. Desktop version works just fine.

6 Answers

Johnathan Shoff
Johnathan Shoff
6,877 Points
Johnathan Shoff
Johnathan Shoff
6,877 Points

The only thing that I am seeing an issue with is that the images are not linked correctly. Please go further into explanation, and possibly show precisely where the issue you are explaining is.

Moises Miguel
Moises Miguel
5,028 Points
Moises Miguel
Moises Miguel
5,028 Points

Well the images show up fine. The reason they are not showing up is because I did not include the img folder in the code, but the img is skipping down to the next line when its supposed to continue on from the two column row.

Johnathan Shoff
Johnathan Shoff
6,877 Points
Johnathan Shoff
Johnathan Shoff
6,877 Points

It sounds to me like the image is displaying as a block element, and perhaps what you are looking for is to have the element display as an inline. Alternatively I would say that you could float the elements but that would not be advised most likely. Trying setting the display property to inline. Please let me know if that helps, I would be happy to help you further if that does not do the trick.

Moises Miguel
Moises Miguel
5,028 Points
Moises Miguel
Moises Miguel
5,028 Points

It didn't work. http://jsfiddle.net/4Labxmm2/2/ but that is the link with the responsive css in it. maybe I did something wrong while writing that code?

Johnathan Shoff
Johnathan Shoff
6,877 Points
Johnathan Shoff
Johnathan Shoff
6,877 Points

In the link that you share they do not look like they are stacking, they looking like they are in a really nice grid form.

Ellen Manuszak
Ellen Manuszak
10,304 Points
Ellen Manuszak
Ellen Manuszak
10,304 Points

Check your gallery CSS. Your nth child is what is shifting your 4th photo to the next row.

Delete

Gallery li:nth-child(4n) {

clear:left;

}

Gallery li:nth-child(3n) {

clear:top;

}

to return your gallery to two images evenly across.