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

Watch Video

Posted July 23, 2015 2:42pm by

Upon maxium browser reduction, my fifth image float right when it should be floated left.

Why is my fifth image not aligning to the left when i make the browser small to the max? Instead, its floating to the right. The problem I think is the third image is longer. How can I fix this? Thank you. Patiently waiting on a reply!

7 Answers

July 23, 2015 3:08pm

Add clear:left to that fifth image. Can be done with nth-child:

img:nth-child(5) {
  clear:left;
}

July 23, 2015 3:09pm

You might need to adjust the selector, I'm not sure how your html is structured.

July 23, 2015 3:45pm

Hi Jeff, I tried that but it makes no difference. I'm also trying to share my snap shot of codes for further help. Not finding a way to do so? Thanks !

July 23, 2015 4:23pm

Can you copy and paste your HTML and CSS? I'd have to see it and be able to play with it to help ya out. :)

July 23, 2015 5:25pm

INDEX.HTML FILE:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Shaleenee Jadoopat| Designer</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/main.css"> <link rel="stylesheet" href="css/responsive.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Shaleenee Jadoopat</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/bird_01.jpg"> <img src="img/bird_01.jpg" alt="Displayed Bird at Virginia Living Museum"> <p>Virginia Living Museum Displayed Bird.</p> </a> </li> <li> <a href="img/shark_globe01.jpg"> <img src="img/shark_globe02.jpg" alt="Shark and Globe display at Virginia Living Museum"> <p>Virginia Living Museum Displayed Shark and Globe.</p> </a> </li> <li> <a href="img/frog_01.JPG"> <img src="img/frog_01.JPG" alt="Frog at Virginia Living Museum"> <p>Virginia Living Museum Displayed Frog.</p> </a> </li> <li> <a href="img/eagle_01.JPG"> <img src="img/eagle_01.JPG" alt="Eagle at Virginia Living Museum"> <p>Virginia Living Museum Displayed Eagle.</p> </a> </li> <li> <a href="img/turtle.jpg"> <img src="img/turtle.jpg" alt="Turtle at Virginia Living Museum"> <p>Virginia Living Museum Displayed Turtle.</p> </a> </li> </ul> </section> <footer > <a href="http://twitter.com/Shaleenee.J"><img src="img/twitter.png" alt="Twitter Logo" class="social"></a> <p>© 2014 Shaleenee Jadoopat.</p> </footer> </div> </body> </html>

MAIN.CSS FILE:

/***************** GENERAL ******************/ body { font-family: 'Open Sans', cursive;

} }

wrapper {

max-width: 940px; margin: 0 auto; padding: 0 5%; }

a { text-decoration: none; }

img { max-width: 100%; }

h3 { margin: 0 0 1em 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:'Changa One', cursive; 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; }

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 { 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; }

/***************** PAGE: ABOUT ******************/

.profile-photo { clear: both; display: block; max-width: 150px; 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-color: #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; }

RESPONSIVE.CSS FILE:

@media screen and (min-width: 480px) {

/*********************************** TWO COLUMN LAYOUT ************************************/

#primary { width: 50%; float: left; }

#secondary { width: 40%; float: right; }

/********************************************************************* 3 column and margin 2.5 each sides=5 : 3*5=15 100% space - 15% margin = 85% 85 space/ 3 column = 28.333333333333

PAGE: PORTFOLIO **********************************************************************/

#gallery li { width: 28.3333%; }

#gallery li:nth-child(4n) { clear: left; }

/*********************************** PAGE: ABOUT ************************************/

.profile-photo { float: left; margin: 0 5% 80px 0; }

@media screen and (min-width: 660px) {

/*********************************** HEADER ************************************/

nav {
   background: none;
  float: right;
  font-size: 1.125em;
  margin-right: 5%;
  text-align: right;
  width: 45%;
}

#logo {
  float: left;
  margin-left: 5%;
  text-align: left;
  width: 45%;
}

h1 {
  font-size:2.5em;
}

h2 {
  font-size: 0.825em;
  margin-bottom: 20px;
}

header {
   border-bottom: 5px solid #599a68;
  margin-bottom: 60px;
}

}

Here they are. Thanks :)

July 23, 2015 5:32pm

#gallery li:nth-child(5) {
  clear:left;
}

July 23, 2015 5:51pm

Not working. My image instead of having 3 columns when browser at maximum width, the second row shows one image follow by third row with another image instead of lining up 2 rows and 3 columns with your code" #gallery li:nth-child(5) {clear:left}". Then, the minimum browser width still not resolve as my fifth image is floating on right side when there's space on the left for it to be ?

July 23, 2015 6:57pm

I'm not able to replicate your issue. This is making me think it possibly has to do with the properties of the particular image itself. Perhaps it has strange dimensions that are causing it to wig out.

Try temporarily moving all your image files to a new folder so that your webpage can't find them, and reload the page (all the images will automatically be replaced with with placeholder text). Then shrink the page and see if the placeholder for the image still has the problem of zipping over to the right. If it doesn't, the problem is with the image itself. If it does, we have some other issue.

Also, what browser are you using for the project?

July 23, 2015 7:47pm

I tested it in Chrome. So, the problem is with the image dimensions. Which, I knew and thought pseudo class might be able to render that... Woops, I didn't specify my question properly. You been a great help Mr.Jeff. Thank you :)

July 23, 2015 7:08pm

May have found at least a partial answer here.

Noticed when going through your CSS that you just have "gallery." Instead you should have "#gallery" to point to the id gallery.

July 23, 2015 7:11pm

This is also true for wrapper and logo. In your CSS they should be #wrapper and #logo

July 23, 2015 7:59pm

My "id selector" is all present in the CSS document, somehow the copying and pasting didn't pick it up when the codes was presented to you.

July 23, 2015 7:54pm

You're welcome! So a couple things:

Firstly: does that mean you've resolved the issue and everything's working?

Secondly: please mark my answer as the "best answer" and upvote any responses from me (Jeff Lange) or Jeff Lemay you found helpful.

Thirdly: if you haven't already, you will want to go back and fix your CSS for gallery, logo, and wrapper, to add the '#' sign in front of them. :)

September 25, 2015 9:04pm

Hi! I hope you've already solved the problem with the fifth float but I answer this post if someone has the same problem. I had the same problem so i solved this by creating another media query at the top of my responsive.css file with the following code:

@media screen and (max-width: 479px) {

#gallery li:nth-child(5) {
    clear: left;
}

}

This code applies the left clear property only when browser at maximum width 479px and runs properly :)

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

Welcome to the Treehouse Community

Looking to learn something new?

shaleeneejadoopat

shaleeneejadoopat

Upon maxium browser reduction, my fifth image float right when it should be floated left.

7 Answers

Jeff Lemay

Jeff Lemay

Jeff Lemay

Jeff Lemay

shaleeneejadoopat

shaleeneejadoopat

Jeff Lange

Jeff Lange

shaleeneejadoopat

shaleeneejadoopat

wrapper {

logo {

gallery {

gallery li {

gallery li a p {

Jeff Lemay

Jeff Lemay

shaleeneejadoopat

shaleeneejadoopat

Jeff Lange

Jeff Lange

shaleeneejadoopat

shaleeneejadoopat

Jeff Lange

Jeff Lange

Jeff Lange

Jeff Lange

shaleeneejadoopat

shaleeneejadoopat

Jeff Lange

Jeff Lange

Vanesa Molina

Vanesa Molina