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
Stephanie Walker
4,158 PointsParagraph sizing in my gallery
Hi everyone!
Have been following Nick by building the portfolio website, and I am a bit stuck! I have six pictures on my gallery, and the paragraph under each one with the description are all on two lines, apart from one - so this then pushes the picture below it out of the way so its not in the grid format intended.... am i explaining this ok? lol, been sat for ages trying to word this haha. i took a screen shot but not sure how to upload it on here for you guys to see. anyway, the only way i could solve the problem was to move the pesky picture to last so it didn't affect any alignment of pictures after it.
so my pictures look like this... the capital O being the problem pic.
o o o
O o o
o o
o
how do i get it so all the pictures and paragraph boxes underneath them are the same size so they all fit like so
o o o
o o o
o o o
thanks for any help :) and sorry if i didn't explain it properly lol
Wayne Priestley
19,579 PointsHi Stephanie,
Here's how you insert a image (using Dropbox)
If you select a image to share from your Dropbox account and copy the link it will look something like this
https://www.dropbox.com/s/fyj0uxcz1ykrnic/Treehouse-image.png?dl=0
There is a little editing to do to make this work.
First, replace the www with dl
Second, remove ?dl=0 from the end so your left with
https://dl.dropbox.com/s/fyj0uxcz1ykrnic/Treehouse-image.png
Now copy that and paste it to replace IMAGE-LINK-GOES HERE
You will now have
That will look like this:
Hope this helps.
7 Answers
Wayne Priestley
19,579 PointsHi Stephanie,
Here is what I've come up with:
I had to make some changes to get it to work with the images in CodePen, I'll list them below and you can compare them with your code.
Changes I made just to get CodePen to work.
. I replaced the img links in your html, i also removed the (a tag)
. I had to remove the a from a line in your css #gallery li p { as i had removed the (a tag) from your html.
Changes I made to get the results you were looking for.
. Changed max-width:100% to width:100% in #gallery img {
. Made the changes you see below to #gallery li p { which is actually #gallery li a p { in your code.
#gallery li p {
width: 95%;
min-height: 30px;
margin: 0;
padding: 2.5%;
font-size: 0.75em;
text-align: center;
white-space: pre-line;
color: rgb(116,183,75);
}
I hope the changes work when you add this code, i didn't know the size of the images you used so i just guessed :)
If its not quite right, start making changes to min-height: 30px; and see how it goes.
Let me know how it works out.
:)
Stephanie Walker
4,158 Pointssorry, not sure what the grey background is doing there in the post?!
Stephanie Walker
4,158 Pointshey Zach, my gallery code is;
#gallery {
list-style: none;
margin:0;
padding: 0;
}
#gallery img {
max-width: 100%;
}
#gallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
#gallery li a p {
margin: 0;
padding: 2.5%;
font-size: 0.75em;
text-align: center;
color: rgb(116,183,75);
}
Wayne Priestley
19,579 PointsHi Stephanie,
I've edited your code so it appears correct in your post.
Here is a link to explain how to use Markdown to post your code How to post code
If you look at the bottom of the box when your typing a reply you will see Markdown Cheatsheet that will also explain how to post your code.
Hope this helps.
Stephanie Walker
4,158 PointsWayne, thanks very much - sorry i made such a hash of this post!
Wayne Priestley
19,579 PointsNo problem Stephanie, your post was perfectly understandable.
I'm thinking that a fixed background height and width maybe a solution, if you can post your html i can use Codepen to try a few things out.
:)
Stephanie Walker
4,158 Points<section>
<ul id="gallery">
<li>
<a href="img/operahousebw.jpg">
<img src="img/operahousebw.jpg" alt="">
<p>Sydney Icon - The Opera House, world famous architecture along the
city skyline.</p>
</li>
<li>
<a href="img/bridgebw.jpg">
<img src="img/bridgebw.jpg" alt="">
<p>Sydney Icon - The stunning Harbour Bridge, over looking the
Sydneys' precious harbour.</p>
</li>
<li>
<a href="img/bondigraffiti.JPG">
<img src="img/bondigraffiti.JPG" alt="">
<p>Black and white graffiti along the Bondi Beach graffiti wall.</p>
</li>
<li>
<a href="img/ajharveybaker.jpg">
<img src="img/ajharveybaker.jpg" alt="">
<p>A ghost of the past. The AJ Harvey name still on the wall of
the old bakery.</p>
</li>
<li>
<a href="img/graffiticat.jpg">
<img src="img/graffiticat.jpg" alt="">
<p>Inspired by Banksy?</p>
</li>
<li>
<a href="img/anzacbw.jpg">
<img src="img/anzacbw.jpg" alt="">
<p>Sydney Icon - Anzac Bridge, lest we forget. Not as famous as
the Harbour Bridge, but no less impressive.</p>
</li>
</ul>
</section>
Stephanie Walker
4,158 Pointsis this what you wanted to see Wayne? would it be anything to do with nth-child?
Wayne Priestley
19,579 PointsHi Stephanie,
Sorry for the delay, I'm going to take a look now.
:)
Stephanie Walker
4,158 PointsHi Wayne thanks very much for this! It works just fine now, happy days :)
Zach Elkins
9,602 PointsZach Elkins
9,602 PointsYou don't have to worry about taking a screenshot of the code, just go ahead and copy/paste some of it into your post. Mainly the code regarding sizing and alignment of the photos in your CSS.