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
Fung How Lim
2,402 PointsHelp needed; images are not aligned appropriately in mobile web view?
Hi there,
I followed all instructions word for word from the video, yet when i minimized my screen the images are not aligned, shown here: http://imgur.com/G8oaMf7
These are the code from my workspace;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>steve lim | Try Out</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,700,700italic,400italic,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>steve lim</h1>
<h2>Entrepreneur</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="images/numbers-01.jpg">
<img src="images/numbers-01.jpg" alt="">
<p>Experimentation with texture and colours.</p>
</a>
</li>
<li>
<a href="images/numbers-02.jpg">
<img src="images/numbers-02.jpg" alt="">
<p>Image A</p>
</a>
</li>
<li>
<a href="images/numbers-06.jpg">
<img src="images/numbers-06.jpg" alt="">
<p>Image B</p>
</a>
</li>
<li>
<a href="images/numbers-09.jpg">
<img src="images/numbers-09.jpg" alt="">
<p>Image C</p>
</a>
</li>
<li>
<a href="images/numbers-12.jpg">
<img src="images/numbers-12.jpg" alt="">
<p>Image D</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="http://twitter.com/funghow"><img src="images/twitter-wrap.png" alt="Twitter Logo"></a>
<a href="http://facebook.com/fhlow"><img src="images/facebook-wrap.png" alt="Facebook Logo"></a>
<p>© 2016 Steve Lim.</p>
</footer>
</div>
</body>
</html>
Would really appreciate if someone could help me out with this. Could you point out where i got it wrongly?
Thank you so much for this.
Best, Steve.
11 Answers
Bryce Santos
11,157 PointsFound the problem: The amount of text you put for image A B C and D didn't push your boxes correctly together. So if you added more text to your boxes, you should fix the problem. Try just adding "Experimentation with texture and stuff" for every single one.
Bryce Santos
11,157 PointsDid you happen to do the "nth child" step in CSS? That's one of the steps that needs to be taken to fix that if I recall correctly.
Fung How Lim
2,402 PointsHi B.Santos,
Appreciate the speedy response!
No, unfortunately "nth child" was not covered in the video. When i refreshed the page and input every code explained by Nick, the images were aligned on his screen but not mine.
Since "nth child" was not elaborated on the video, yet he still could achieve the desired outcome, I assume something must be amiss in my codes?
Please advise. Thank you B.Santos.
Best, Steve.
Bryce Santos
11,157 PointsCould you post your CSS up?
Fung How Lim
2,402 PointsHi there,
/******************* 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 ********************/
header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }
logo {
text-align: center; margin: 0; }
h1 { font-family: 'Changa One', sans-serif; margin: 15px 0; font-size: 1.75em; 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; }
nav ul { list-style: none; margin: 0 10px; padding: 0; }
nav li { display: inline-block; }
nav a { font-weight: 800; padding: 15px 10px; }
/******************* FOOTER ********************/
footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }
.social-icon { width: 20px; height: 20px; margin: 0 5px; }
/******************* 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 devices */ 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; }
Thank you!
Bryce Santos
11,157 Pointsgallery li a p {
margin: 0; padding: 5%; font-size: 0.75em; color: #bdc3c7; }
You were missing a semi colon, see if that fixes it.
Fung How Lim
2,402 PointsHi there,
No.. unfortunately. haha. I secretly wish it was that honestly... then it'd be resolved immediately.
I think the missing semi-colon would affect the color of the font, instead of the alignment.
But thanks for pointing this out. :)
Best, Steve.
Bryce Santos
11,157 PointsYour gallery ID selectors also don't include #s
#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;
}
Edit: Nevermind, realized all your selectors didn't linclude #s
Fung How Lim
2,402 PointsHi B.Santos,
thanks for the reply again. I checked on my code; yes the ID selectors do have #. Stated below;
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; }
For some reason, it is not shown in the answer... Please advise.
Thanks B.Santos.
Best, Steve.
Fung How Lim
2,402 PointsHi there!
Yes you were right!! :D
I did everything you said and the boxes are aligned now. While i am very happy that this issue is finally fixed - all thanks to your kindness and experience - I can't help but to wonder why it occurred?
Shouldn't these boxes be locked down in its spaces? Why does the text length pose an effect to it?
Could you advise me on this? =/
Thanks B.Santos. Thank you so much.
Best, Steve.
Bryce Santos
11,157 PointsSo currently, it was because of text length, but remember the "nth child" thing I was talking about? You'll learn that in a later class in the same course and it SHOULD fix the problem permanently.
Fung How Lim
2,402 PointsHi B.Santos,
Sorry for the late reply. Needed to do other tasks yesterday after the lesson.
Thank you so much for your help throughout this thread. I really appreciate your kindness and persistence to assist me with this coding conundrum.
Hoping there would not be any issue that's too difficult to solve by myself later on.. and yes, im really looking forward to that "nth child" lesson.
Thanks!
Best, Steve.
Bryce Santos
11,157 PointsNo problem. It helps test my knowledge as well! Best of luck to you in the future!