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
India Abraham
2,826 PointsCategory.php captions not wrapping
At the link here: http://trueternalbeauty.com/category/beauty-in-him/ you can see I have a category paged with thumbnails displayed and captions (post titles) however, some of the post titles are too long so there are different numbers of tumbnails on each row. I'd like to have 4 thumbnails per row with captions that are centered and wrap to the next line if needed. Any ideas on how to fix this?
4 Answers
Cody Michaels
Courses Plus Student 27,272 PointsYou need to a count for the loop that builds the article tags. and wrap the four inside of a div with a class displying inline-block and a set width of 100%.
then just change the article.entry-content width to 20% (or one fourth of max width minus margin).
Samples are below if you have other questions feel free to ask.
html sample
<div class="row"> <article class="entry-content"> <a href="#"><img height="150" width="150" alt="" class="archive-image wp-post-image" src="#"></a> <p class="category_selected">Short text</p> </article> <article class="entry-content"> <a href="#"><img height="150" width="150" alt="" class="archive-image wp-post-image" src="#"></a> <p class="category_selected">Really long text, I mean who would have this much text as a title to and artical?</p> </article> <article class="entry-content"> <a href="#"><img height="150" width="150" alt="" class="archive-image wp-post-image" src="#"></a> <p class="category_selected">Short text</p> </article> <article class="entry-content"> <a href="#"><img height="150" width="150" alt="" class="archive-image wp-post-image" src="#"></a> <p class="category_selected">Short text</p> </article> </div>
CSS
.row{ display: inline-block; width: 100%; }
article.entry-content { clear: none; float: left; margin: 25px; position: relative; width: 20%; }
Art Skupienski
7,080 PointsHi India,
Have you tried CSS course yet? This is about your CSS styling.
You can achieve this adding following CSS rules into your style.css file to class ' article.entry-content ' on line 173.
Add fixed with of your wrapper. In your case 200px is just fine. width: 200px;
And centre your descrption text. text-align: center;
So your article.entry-content should look like this:
article.entry-content {
width: 200px;
margin: 25px auto;
clear: none;
float: left;
position: relative;
text-align: center;
}
Best of luck with your website! Art
India Abraham
2,826 PointsArt, I initially used Cody's idea, but then all of a sudden I had a problem with the pictures stacking in a strange grid...so I added yours and it worked! Thanks
Cody Michaels
Courses Plus Student 27,272 PointsArt,
with that solution if the text of one article is 3 lines and the rest of are 2 they won't stake properly.
India Abraham
2,826 PointsCody, I've since changed the site around a bit and now I can't figure out how to get the images to stack properly once again...visit http://trueternalbeauty.com/category/pretty-devoted/ is there some sort of formula for figuring this out?
India Abraham
2,826 PointsI'm having some sort of unexplained problem if you take a look here you can see there are some stacks out of place: http://trueternalbeauty.com/category/beautifulbadugly/
India Abraham
2,826 PointsIndia Abraham
2,826 PointsCody,
Thank-you so much just added the code to my style.css and everything worked out perfectly!