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 trialKerin Escobar
591 PointsI can't add 10 pictures, once I do that the page gets a distorted look. images float around, not side by side.
guys I want to add a top 10 photos, I added <h2></h2> on top of the page as a tittle, I don't know if this is the problem once I added the 10 photos they float around distorting the ( side by side semblance } of the pictures. Any help with this please. I would appreciate so much.
4 Answers
Russell Sawyer
Front End Web Development Techdegree Student 15,705 PointsIf you post your code we can better assist with a solution. Checkout the Markdown Cheatsheet at the bottom of this page on how to format and post your code to the forum.
Kerin Escobar
591 Points /***************************************************
GENERAL
****************************************************/
a {
text-decoration: none;
}
#wrapper{
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
img {
max-width: 100%;
}
h3 {
margin: 0;
}
/***************************************************
HEADING
****************************************************/
header {
float: left;
margin: 0 0 30px 0;
padding: 5px 0 0 0;
width: 100%;
}
#logo {
text-align: center;
margin: 0;
}
h1 {
font-family: 'Denk One';
margin: 15px 0;
font-size: 1.75em;
font-weight: normal;
line-height: 0.8em;
}
h2 {
font-family: 'Denk One';
font-size: 0.75em;
margin: -5px 0 0;
font-weight: normal;
}
/***************************************************
NAVIGATION
****************************************************/
nav {
text-align: center;
padding: 10px 0;
margin: 20px 0 0;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
font-weight: 800;
padding: 15px 10px;
}
.social-ico {
width: 20px;
height: 20px;
margin: 0 5px;
}
/***************************************************
FOOTER
****************************************************/
footer {
font-size: 0.75em;
text-align: center;
clear: both;
padding-top: 50px;
color: #ccc;
}
/***************************************************
PORTFOLIO
****************************************************/
#loco {
font-family: 'Roboto Slab';
font-weight: 800;
font-size: 1.50em;
margin: 0 0 30px 0;
padding: 15px 0 0 0;
color: #6ab47b;
text-align: center;
}
#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: 1.0em;
color: #67ba76;
}
/***************************************************
PAGE: ABOUT
****************************************************/
.profile-photo {
display: block;
max-width: 90px;
margin: 0 auto 30px;
border-radius: 100%;
}
/***************************************************
PAGE: CONTACT
****************************************************/
.contact-info {
list-style: none;
padding: 0;
margin: 0;
font-size: 0.9em;
}
.contact-info a {
display: block;
min-height: 20px;
background-repeat: no-repeat;
background-size: 20px 20px;
padding: 0 0 0 30px;
margin: 0 0 10px;
}
.contact-info li.phone a {
background-image: url('../img/phone.png');
}
.contact-info li.mail a {
background-image: url('../img/mail.png');
}
.contact-info li.twitter a {
background-image: url('../img/twitter.png');
}
/***************************************************
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;
}
nav a.selected, nav a:hover {
color: #32673f;
}```
Kerin Escobar
591 Points<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>LITTLEHUGGIES</title>
<link rel="stylesheet" href="css/normalize.css">
<link href="https://fonts.googleapis.com/css?family=Denk+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Littlehuggies</h1>
<h2>Photography</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>
<p id="loco">Top6 photos every parent must get of their baby</p>
<ul id="gallery">
<li>
<a href="img/kid1.jpg">
<img src="img/kid1.jpg" alt="">
<p>Sporting a funny onesie</p>
</a>
</li>
<li>
<a href="img/kid2.jpg">
<img src="img/kid2.jpg" alt="">
<P>Hand holding your finger</P>
</a>
</li>
<li>
<a href="img/kid3.jpg">
<img src="img/kid3.jpg" alt="">
<p id="jaja">Ear, something you'll always remember</p>
</a>
</li>
<li>
<a href="img/kid4.jpg">
<img src="img/kid4.jpg" alt="">
<p>Your kid’s hair will never be the same as it is when they’re a baby. Capture it!</p>
</a>
</li>
<li>
<a href="img/kid5.jpg">
<img src="img/kid5.jpg" alt="">
<p>Waving is one of the very first ways your baby will communicate with the world.</p>
</a>
</li>
<li>
<a href="img/baby3.jpg">
<img src="img/baby3.jpg" alt="">
<p>There are lots of photo ops when your baby is awake, but don’t forget to snap some photos when they’re dozing, too.</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="https://www.twitter.com/e_corpp">
<img src="img/twitter-wrap.png" alt="twitter logo" class="social-ico"></a>
<a href="https://www.facebook.com/Littlehuggies-369412063183206/">
<img src="img/facebook.jpg" alt="facebook logo"class="social-ico"></a>
<p>© 2016 Littlehuggies</p>
</footer>
</div>
</body>
</html>```
Kerin Escobar
591 Pointsguys the pictures are a size of 1024x768 as nick says in the tutorial. it only works well with 5 or 6 pictures but I can't add more than that. thank ya'll so much!
Harrison Court
4,232 PointsHarrison Court
4,232 PointsDon't forget to use ``` (Above Spacebar)
It layers your code like this!