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 Image Captions

Posted by Calvin Yung
Calvin Yung
701 Points

Panels of the gallery not the same as in the video

So in the videos "Style the Portfolio" and the one this is tagged with, Nick's gallery panels are formatted like so (when his browser is resized to its absolute shortest width to simulate the width on a mobile device):

alt text

However, mine looks like this:

alt text

When I expand the browser, however, the format changes to correct way that it should be (Nick's way). I'm not sure if this is a glitch due to my browser (Google Chrome) or what.

Here's the relevant code from the videos that I have on my workspace and am certain is the same to Nick's:

/**************************
 GENERAL
**************************/

img {
   max-width: 100%;
}

/**************************
 PORTFOLIO
**************************/

#gallery {
   margin: 0;
   padding: 0;
   list-style: none;         /* no bullet points */
}

#gallery li {
   float: left;             /* make items appear side by side */
   width: 45%;              /* width of images will take up 45% of width */
   margin: 2.5%;                 /* fill extra 10% of space */
   background-color: #f5f5f5;    /* background color of text changed to gray */
   color: #bdc3c7;
}

#gallery li a p {
   margin: 0;
   padding: 5%;
   font-size: 0.75em;
   color: #bdc3c7;
}

Does anybody have any idea on how to fix this, or has seen this kind of issue before? Thanks!

3 Answers

Calvin Yung
Calvin Yung
701 Points

My friend found the solution. He told me that "the text (from the caption in the first photo) was wrapping to the next line, which subsequently pushed the rest of the columns down" so shortening the caption fixed it.

tunis dehas
tunis dehas
4,863 Points
tunis dehas
tunis dehas
4,863 Points

Hi Calvin, i have the same issue, my captions are sometimes too long, I put my own photos. Because of that sometimes I have just one photo on a line How you re fixed that ,

thanks in advance

Jovanny Elias
Jovanny Elias
16,204 Points
Jovanny Elias
Jovanny Elias
16,204 Points

Take a look at this post it shows you how to post images as well as other useful tips.

https://teamtreehouse.com/forum/howto-guide-markdown-within-posts

Jovanny Elias
Jovanny Elias
16,204 Points

Later on you learn how to use media queries which will allow you to control how objects look at different size screens. I suggest you keep learning what they are teaching tou until they get to the media queries part of it. If you still have any issues you can ask us. We will be happy to help.

Calvin Yung
Calvin Yung
701 Points

Awesome thanks for the link! I fixed it.

jne
jne
12,613 Points
jne
jne
12,613 Points

Are you using normalize.css? That might change things. What browser are you using? Can't see any problems with what you are shwoing. Have you lookes over your html and made sure it's clean?

Calvin Yung
Calvin Yung
701 Points

Hi, thanks for the response. Sorry I'm new at this. When you say "using normalize.css," I presume that means having it in the same folder as my main.css (where the code displayed above is located). If so, then yes.

I'm using Google Chrome.

I do believe my html is as it should be. Everything was aligned prior to the videos, and the only thing I changed was adding id="gallery" to <ul>.