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 trialElena Paraschiv
9,938 Points(1)fix code to remove the bullet points (2)cannot fit the images two on the same line in two columns
Can someone help me fix my code to get the same results as Nick?
8 Answers
Ditri Ahmetaj
3,060 PointsAlright,
Now that I remember you can use the height tag lol, select all the images in the css and manually change their size. Notice though that not all images are fit to be resized in the same way or pixels.
img { height: 200px; /*** you can play around with all the images with the px **/ width: ; /or you can use max-width */ max-width: ; }
Let me know what you think : )
Ditri Ahmetaj
3,060 Points2.Problem :
gallery li {
float:left; max-width:45%; /** on your code property : "width" set the property as "max-width". **/ margin:2.5%; background-color: #f5f5f5; color:#bdc3c7;
}
Hope it helps.
Elena Paraschiv
9,938 PointsNot really, but thanks for the input. I guess I need to resize the images before uploading them.
Regards from Sweden, Jönköping btw. Good luck with your programing dream. We are pursuing similar paths! Cheers!
Ditri Ahmetaj
3,060 PointsI thought it was a problem of aligning them in two columns, did you fix that ?
For the resize matter not sure if CSS can help with that...probably in a more advanced framework which so far I don't know.
Good luck too, cheers.
Elena Paraschiv
9,938 PointsYes. I think so too. Looking forward to learn more. If I discover in the next classes will upload it here :)
Ditri Ahmetaj
3,060 PointsI was thinking of a way but you can give it a try,
add the same class or id to the images you have on html and then on css resize them using em or px with a image-resolution tag.
Let me know if it works.
Ditri Ahmetaj
3,060 Pointscheck for the width and padding, margin properties too, they can be valuable.
Elena Paraschiv
9,938 PointsTried it, but doesn't work. If you like the challenge here is the html code <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Elena Paraschiv | Designer in action </title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/beautify.css">
</head> <body> <header> <a href="index.html" id="logo"> <h1>Elena Paraschiv</h1> <h2>Designer</h2> </a> <nav> <ul><li><a href="index.html">Portofolio</a></li> <li><a href="contact.html">Contact</a></li> <li><a href="about.html">About</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul id="gallery"> <li><a href="http://icdn2.digitaltrends.com/image/lara-croft-tomb-raider-movie-screenshot4-1500x991.jpg?ver=1"> <img src="http://icdn2.digitaltrends.com/image/lara-croft-tomb-raider-movie-screenshot4-1500x991.jpg?ver=1" alt="Lara Croft"><p>Badassness provenit din antrenament continuu</p></a></li> <li> <a href="http://findbliss.com/los-angeles/wp-content/uploads/sites/2/2008/09/devapremalgilded400.jpg"><img src="http://findbliss.com/los-angeles/wp-content/uploads/sites/2/2008/09/devapremalgilded400.jpg" alt="Deva"><p>Lumina din dragoste</p></a></li> <li> <a href="http://cdn29.us1.fansshare.com/images/hedylamarr/hedy-lamarr-the-most-beautiful-inventor-in-the-world-kottkeorg-catwoman-122804347.jpg"><img src="http://cdn29.us1.fansshare.com/images/hedylamarr/hedy-lamarr-the-most-beautiful-inventor-in-the-world-kottkeorg-catwoman-122804347.jpg" alt="Hedy Lamarr"> <p>Calmitatea provenita din Inteligenta</p> </a></li> <li> <a href="http://www.perizona.it/wp-content/uploads/2015/02/Kim-Anami-Foto-Instagram-8.jpg?b88496"><img src="http://www.perizona.it/wp-content/uploads/2015/02/Kim-Anami-Foto-Instagram-8.jpg?b88496" alt="Kim Anami"><p>Ceva interesant</p></a></li> <li> <a href="http://fractal.fractalenlighten.netdna-cdn.com/wp-content/uploads/2013/02/Ana-Suromai-amanda-sage-art3-e1361966127344.jpg"><img src="http://fractal.fractalenlighten.netdna-cdn.com/wp-content/uploads/2013/02/Ana-Suromai-amanda-sage-art3-e1361966127344.jpg" alt="Amanda Sage wiild"><p>Nu-ti fi frica sa-ti arati puterea</p></a></li> <li> <a href="http://cdn1.relevantmediagroup.com/sites/default/files/field/thumbnail/main-maya-angelou_t479.jpg"><img src="http://cdn1.relevantmediagroup.com/sites/default/files/field/thumbnail/main-maya-angelou_t479.jpg" alt="Maya Angelou"><p>Va multumesc de atentie!</p> </a></li>
</ul>
</section>
<footer> <ul> <li><a href="https://twitter.com/"><img src="img/twitter-wrap.png" alt="Twitter" class="social-icon"></a></li> <li><a href="https://www.facebook.com/"><img src="img/facebook-wrap.png" alt="Facebook" class="social-icon" > </a></li>
</ul>
<p>© 2015 Elena Paraschiv</p>
</footer> </div> </body> </html>
Elena Paraschiv
9,938 PointsYeah. That makes it perfect! Tack så jätte mycket!
Ditri Ahmetaj
3,060 PointsYou are welcomed.
Elena Paraschiv
9,938 PointsElena Paraschiv
9,938 PointsI solved (1) , but not able to solve 2. The images are of different sizes. Can I make them with CSS the same size so it looks like Nick's page? Here is my code
/********* General *********/ body{ font-family:'Open Sans', sans-serif; }
wrapper {
max-width: 940px; margin:30 auto; padding:0 8%; }
a { text-decoration:none;
}
img{ max-width:100%; }
/********* HEADING *********/
logo {
text-align:center; margin: 15px; }
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; padding-top: 50px; color: #ccc; } /********* Page: Portfolio *********/
gallery {
margin:0; padding:0 list-style:none; }
gallery li{
}
/********* COLORS *********/
/* site body */ body { background-color: #fff; color:#999; }
/*green header */ header { background-color: #9ad70b; border-color: #599a68; }
/*nav background mobile devices */ nav { background: #599a68; }
/* logo texts */ h1,h2 { color:#fff; }
/* links */ a { color:#6ab47b; }
/*nav link */ nav a, nav a:visited{ color:#fff; }
/* selected nav link */ nav a.selected, nav a:hover{ color: #991112; }