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
Chris Rosato
3,385 PointsSocial media links seem to still be following the rules for the gallery.
Not sure if it's possibly due to the size of the images? I get 2 images per row in the gallery, but should be seeing the social media links below. Any advice would be much appreciated!
/************************************** GENERAL ***************************************/ body { font-family: 'Open Sans', sans-seriff; }
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: 'Oswald', 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; }
gallery li a p {
margin: 0; padding: 5%; font-size: 0.75em; color: #bdc3c7; }
/************************************** COLORS ***************************************/
/* site body*/
body { background-color: #fff; color: #999; } /* green header */
header { background: #6ab47b; border-color: #599a68; }
/* nav background on mobile */ nav { background: #599a68; }
/* logo text*/
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: #32673f; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Chris Rosato | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Oswald:700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Chris Rosato</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html" class="selected">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul id="gallery"> <li> <a href="img/beach.jpg"> <img src="img/beach.jpg" alt=""> <p> Experimentation with color and texture.</p> </a> </li> <li> <a href="img/water.jpg"> <img src="img/water.jpg" alt=""> <p> Creating shapes using repitition. </p> </a> </li> <li> <a href="img/beach.jpg"> <img src="img/beach.jpg" alt=""> <p> Landscapes. </p> </a> </li> <li> <a href="img/water.jpg"> <img src="img/water.jpg" alt=""> <p> Post modern hyper realism. </p> </a> </li> <li> <a href="img/bunny.jpg"> <img src="img/bunny.jpg" alt=""> <p> Cute bunnies.</p> </a> </li> </ul> </section> <footer> <a href="http://twitter.com"><img src="img/twitter-wrap.png" alt="Twitter logo"></a> <a href="http://facebook.com"><img src="img/facebook.png" alt="Facebook logo"></a> <p>© 2015 Chris Rosato.</p> </footer> </div> </body>
</html>
Marcus Parsons
15,719 PointsChris,
I'm not exactly certain what your question is, but I'm seeing the two social media icons below your gallery. Are you not seeing them and wondering why that is?
Chris Rosato
3,385 PointsThanks for taking a look!
The first part of this lesson set the gallery to float left, and that worked. All the gallery images are 2 per row, with the proper spacing.
The second part of the lesson set a different rule for the social media logos. they are not supposed to follow the rules for the rest of the image gallery.
The example in the video shows the logos underneath the image gallery. Mine show up as a part of the rest of the gallery. Next to the last image, rather than below.
Chris Rosato
3,385 PointsDoh! I just realized you said they are showing below for you. Maybe it's an issue with my browser.
2 Answers
Marcus Parsons
15,719 PointsAlrighty Chris,
First, just make sure you have the page saved before you preview or refresh the window. I've done it myself on many an occasion haha Second, if that wasn't the case, try deleting your internet history. The browser might be trying to use a cached version of the site. Let me know if that helped. I'm seeing the two logos below the gallery content from your code, so I'm thinking it's more than likely the second option that the browser is using a cached version of the site.
Chris Rosato
3,385 PointsSuccess! Thank you!!!
I cleared the browser and now it looks like l was expecting. I'll definitely keep that in mind going forward :-)
Marcus Parsons
15,719 PointsThat is definitely something to keep in mind. When I first started developing, I would sit until I pulled my hair out wondering what I did wrong in my code, just to find out that the browser was using a cached version of the site. There are rules to caching but they vary per browser. So, instead of trying to memorize every rule, keep deleting the internet history :P Happy Coding! :)
Marcus Parsons
15,719 PointsAnd you're welcome of course! haha
Marcus Parsons
15,719 PointsIf you want to go ahead and mark my answer as best answer, we can mark this as resolved. :P
Justin Black
24,793 PointsThis becomes even more of a headache when doing more than just html... such as making a minor html change on a php based app that has caching functionalities, which sits behind a cloudflare account which also does caching... 3 levels of basic cache to contend with there...
Chris Rosato
3,385 PointsChris Rosato
3,385 PointsSorry, this should work better if anyone can take a look?
https://w.trhou.se/b2qa54j3r6