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 trialCalvin Yung
701 PointsPanels 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):
However, mine looks like this:
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
701 PointsMy 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.
Jovanny Elias
16,204 PointsTake 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
16,204 PointsLater 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
701 PointsAwesome thanks for the link! I fixed it.
jne
12,613 PointsAre 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
701 PointsHi, 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>.
tunis dehas
4,863 Pointstunis dehas
4,863 PointsHi 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