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
Carlos Serrano
3,351 PointsExercise question / mobile version of the page
Hello everyone,
Can anyone tell me how to turn the mobile version of the index for the portfolio exercise into just one column? I think that work better for small devices than two columns. Thank you
3 Answers
Jason Anello
Courses Plus Student 94,610 PointsHi Carlos,
In main.css you have the following css:
#gallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
This is what sets up the 2 column mobile layout. Each item is 45% with a 2.5% margin all around. This means each one takes up 50% of the width. You can simply change the width to 100% and zero out the left and right margins to make it 1 column.
#gallery li {
float: left;
width: 100%;
margin: 2.5% 0; /* This keeps the 2.5% top and bottom margin but zeros out the left and right */
background-color: #f5f5f5;
color: #bdc3c7;
}
In responsive.css where it changes to 3 column at 480px you need to bring back the 2.5% left/right margin so that you'll have spacing between the items.
In responsive.css 480px media query:
#gallery li {
width: 28.3333%;
margin: 2.5%;
}
Let me know if this wasn't what you were trying to do.
Aurelian Spodarec
7,369 PointsYou need to change in css the width of the image that takes all space in % . And you should do it in @media screen and(min-width:480) and there , in bottom where you wrote the code you should have it. Try to experiment with the code and see what each things do. I did html but here im learning HTML5 witch is a bit different and in my case the best way to learn it is to go on a text editor like submile text2 or notepad++ and rewrite the code so you master each aspect. I did that 7 times and then i started to experiment and after 14pages i could layout my own page witch is awesome .
Carlos Serrano
3,351 PointsThank you Aurelian. I'll follow your advice on experimenting and will post the results here.
Carlos Serrano
3,351 PointsThank you Jason. I'm going to try this and will let you know how it goes.