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 trialSimon sydendal
405 PointsImages doesn't align in two'es like in the video.
My images does not react the same way as yours shown in the video. How could that be, have i done something wrong along the way?
6 Answers
lovell
7,882 PointsTheres a : missing after your width selector. Try that :-)
Ricardo Hill-Henry
38,442 PointsPost some example code.
Simon sydendal
405 PointsThank you for the quick reply.
Was taught that using the float: left; code would make the images appear side by side. In this specific case 2 images on mobile and 3 on desktop.
/*******************************************************
GENERAL
********************************************************/
body {
font-family: 'Open Sans', sans-serif;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
a {
text-decoration: none;
}
img {
max-width: 100%
}
/*******************************************************
HEADING
********************************************************/
#logo {
text-align: center;
margin: 0;
}
h1{
font-family: 'Roboto', sans-serif;
margin: 15px 0;
font-size: 1.75em;
font-weight: normal;
line-height: 0.8em;
}
h2 {
font-size: 0.75em;
margin: -5px 0 0
font-weight: normal;}
/*******************************************************
navigation
********************************************************/
nav {
text-align: center;
padding: 10px 0;
margin: 20px 0 0;
}
/*******************************************************
footer
********************************************************/
footer {
font-size: 0.75em;
text-align: center;
padding-top: 50px;
color: #ccc;
margin:
text-align: center;
}
/*******************************************************
page portfolio
********************************************************/
#gallery {
margin: 0;
padding: 0;
list-style: none;
}
#gallery li, #gallery li:visited {
float:left;
width 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7
}
/*******************************************************
COLORS
********************************************************/
/*over nav link*/
nav a.selected, nav a:hover {
color: #43563f}
/*site body*/
body {
background-color: #f5f5f5;
color: #f5f5f5;
}
header {
background: #eba133;
border-color: #500a68
}
nav {
background: #888888;
}
/*logo text*/
h1, h2 {
color: #f5f5f5; }
/*link color*/
a {
color: #EBA133;
}
/*nav link*/
nav a, nav a:visited {
color: #eba133;
font-family: 'Roboto', sans-serif
font-weight: normal;
line-height: 0.8em;
}
lovell
7,882 PointsAre your images set to a reasonable size? ie you don't want them at 100% where they wont fit side by side because they'll take up whole screen.
Simon sydendal
405 PointsI've tried putting them to 30% and they still won't align.
lovell
7,882 PointsNo probs, glad to help. Good luck.
PS: Put http://codepen.io/ in your favourites. It's great for using to post issues on here.
Ryan Scott
989 PointsHI, I am having the exact same problem. I can't figure out how to make my pictures format into two columns. Can someone please look at my code and give some suggestions. Thank you so much!
Ryan Scott
989 Points/*************************************** GENERAL ****************************************/
body { font-family: 'Open Sans', sans-serif; }
#wrapper { max-width: 940px; margin: 0 auto; padding: 0 5%; }
a { text-decoration: none; }
img { max-width: 100%; }
/*************************************** HEADING ****************************************/
#logo { text-align: center; margin: 0; }
h1 { font-family: 'Changa One', sans-serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }
h2 { font-size: 0.75em; margin: -5px 0 0; font-weight: normal; }
/*************************************** NAVIGATION ****************************************/
nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }
/*************************************** FOOTER ****************************************/
footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }
/*************************************** PAGE: PORTFOLIO ****************************************/
gallery {
margin: 0; padding: 0; list-style: none; }
gallery li {
float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; }
/*************************************** COLORS ****************************************/
/* site body */ body { background-color: #fff; color: #999; }
/* green header */ header { background: #a95a1d; border-color: #2b7b6b; }
/* nav background on mobile */ nav{ background: #2b7b6b; }
/* logo text*/ h1, h2 { color: #fff; }
/* Links */ a { color: #a95a1d; }
/* color for nav link*/ nav a, nav a:visited { color: #fff; }
/* selected nav link */ nav a.selected, nav a:hover { color: #3267f3; }
Simon sydendal
405 PointsSimon sydendal
405 PointsHa ha, nice one. I definitely managed to miss that one even after several hours. Thank you so much!