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


Alex Krawiec
Alex Krawiec
9,032 Points

CSS Transformations Messing Up Formatting, Need a Fix

This is my site: saltpoint2014.com a pretty basic photo portfolio using lightbox. I have added a transformation to expand and add a border to images when they are hovered over, but whenever one is hovered over in the left column, the formatting gets messed up and it leaves a white space underneath the selected image. Does anyone have any ideas on what's causing this and what steps can be taking to resolve? Many thanks!

Here is my CSS:

'''/********************** 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%; }

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', 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: right; 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; display: inline-block;


gallery li a p {

margin: 0; padding: 5%; font-size: 0.75em; color: #bdc3c7 }

gallery img:hover {

-webkit-transform: scale(1.15,1.15); border-style: solid; border-width: 10px; border-color: #238ca6; }

.portrait { height: 200px; width: 683px; display: block; overflow: hidden; }

.crop { width: 4%; }

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

.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }

/********************** 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: #65bacf; border-color: #599a68; }

/* nav backgroudn on mobile */ nav { background: #238ca6; }

/* logo text */ h1, h2 { color: #fff; }

/* links */ a { color: #6ab47b; }

/* nav links */ nav a, nav a:visited { color: #fff; }

/* selected nav link */ nav a.selected, nav a:hover { color: #116f86; }


3 Answers

Hi Alex,

Another way you could solve this is by clearing the floats using nth-child similar to how it's done in the "How to make a website" course.

The problem you're having is that when you hover over the 1st image for example, it increases in height and extends down lower than the 2nd image. This blocks the 3rd image from floating all the way to the left and it stays under the 2nd image. The 4th image then drops down to begin the 3rd row.

If you have the 1st item in every row clear the floats then it should fix that problem. For a 2 column grid that would be the 1st, 3rd, 5th, etc...

The following nth-child expression will select those:

#gallery li:nth-child(2n+1) {
    clear: left;

This only works for a 2 column layout. If you have media queries that change the number of columns then you'll need different nth-child expressions at those breakpoints.

Felix Yakubov
Felix Yakubov
17,475 Points

Jason this is excellent. Ive tried clear on Alex's code while checking this but it didnt work well. It didnt occur to me to use nth-child for this one!

Alex Krawiec
Alex Krawiec
9,032 Points

Thanks! This worked great.

Felix Yakubov
Felix Yakubov
17,475 Points

It has something to do with the width percentage you used. Because you add 10px to the border but not leaving that extra percentage before hovering up. This creates an over 100% width, resulting in line break.

#gallery img:hover {
    border-style: solid;
    border-width: 10px;
    border-color: #238CA6;

Try using pixels instead of percentages, check that every border, margin and padding is taken care of and then turn it into percents.

**** When I disable padding-top and left from the li item the problem is fixed. So like Ive said, calculate again

Felix Yakubov
Felix Yakubov
17,475 Points

I thought about some better solution: Use box-sizing to make sure that the width of the gallery item doesnt exceed the width you wanted.