Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML How to Make a Website Styling Web Pages and Navigation Style the Portfolio

Fung How Lim
Fung How Lim
2,402 Points

Help 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
Bryce Santos
11,144 Points

Found 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
Bryce Santos
11,144 Points

Did 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
Fung How Lim
2,402 Points

Hi 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
Bryce Santos
11,144 Points

Could you post your CSS up?

Fung How Lim
Fung How Lim
2,402 Points

Hi 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
Bryce Santos
11,144 Points
gallery 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
Fung How Lim
2,402 Points

Hi 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
Bryce Santos
11,144 Points

Your 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
Fung How Lim
2,402 Points

Hi 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
Fung How Lim
2,402 Points

Hi 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
Bryce Santos
11,144 Points

So 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
Fung How Lim
2,402 Points

Hi 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
Bryce Santos
11,144 Points

No problem. It helps test my knowledge as well! Best of luck to you in the future!