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

CSS

Andre Horton
Andre Horton
2,572 Points
Posted by Andre Horton
Andre Horton
2,572 Points

Gap appears in my responsive gallery on Firefox browser

When I resize my screen to a smaller size in the Firefox browser a gap appears next to the third image in my two-column gallery layout which pushes it to the right. This does not happen when testing it on Chrome or Safari so I am wondering is there a way to resolve this problem?

Here is the website - http://adre29.github.io/testing/

Here is my code

 <div id="wrapper">

          <div class="page-divider"></div>

        <section>
            <ul id="gallery">

            <li class="roll"><a href="page1.html">
              <img src="Images/House&Home/H&H1.jpg" >
                </a> </li>

                <li class="roll"><a href="page2.html">
              <img src="Images/ninja-mascot.jpg" alt="">
                </a> </li>

                <li class="roll"><a href="page3.html">
              <img src="Images/Dyna-MicAH/DynA-MicAH1.jpg" alt="">
                </a> </li>

                <li class="roll"><a href="page1.html">
              <img src="Images/rich_minds2.jpg" alt="">
                </a> </li>

                <li class="roll"><a href="page1.html">
              <img src="Images/Star_Wars/bobaf.jpg" alt="">
                </a> </li>


                <li class="roll"><a href="page1.html">
              <img src="Images/holony-media.jpg" alt="">
                </a> </li>


                <li class="roll"><a href="page1.html">
              <img src="Images/practical_golf/Practical-golf1.jpg" alt="">
                </a> </li>

                 <li class="roll"><a href="page1.html">
              <img src="Images/experiments/exp_8.jpg" alt="">
                </a> </li>

                 <li class="roll"><a href="page1.html">
              <img src="Images/experiments/exp_9.jpg" alt="">
                </a> </li>

            </ul>
        </section>
        <div class="page-divider2"></div>

    </div>

        </div>

Here is CSS

/***********
GALLERY
**********/


#gallery{
    margin: 0;
    padding: 0;
    list-style: none;
}

#gallery li{
    float: left;
    width: 32.33%;
    margin: 0.25% 0.5%;
    padding: 0;
     }

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


#gallery li:nth-child(8n) { 
    clear:right;}

#gallery img {
    background: black;
}

Here is the Responsive code

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

    #gallery li{
    float: left;
    width: 47.2%;
    margin: 0.60% 1.3%;
}

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

    #text_space{
        display: none;
}

    #image_space{
        width: 100%;
    }


    #about_image{
        width: 100%;
    }

    #about_text{
        width: 100%;
    }


    #wrapper{
    padding: 1% 1%;
    max-width: 90%;
    margin: 0 auto;
    box-sizing: border-box;
    }

    #text_space_mobile{
        display: block;
        padding: 2% 2% 4% 2%;
        }

}

[MOD: edited code blocks]

Steve Hunter
Steve Hunter
57,712 Points

HI Andre,

Just to let you know, it does the same in Edge browser too.

Have you tried clearing 3n too? It's the third element that's causing this issue. Sorry, but my CSS knowledge isn't very good.

Let me know how you get on.

Steve.

Andre Horton
Andre Horton
2,572 Points
Andre Horton
Andre Horton
2,572 Points

Thanks for letting me know that the same problem occurs in the Edge browser Steve

I've tried clearing 3n but then gaps reappear in other areas of the gallery :(

Thanks for your help anyway!

1 Answer

Kai Nightmode
Kai Nightmode
37,045 Points

Issue happens in Chrome at certain sizes too. For example, see this screenshot which the first item is 147px tall and the second is 146px tall. That means there is an extra pixel on the left side that the third item pushes up against when trying to float left. If the second item were to be the same exact height as the first, the third item would float all the way to the left.

This issue is happening because of math rounding in the browser. If the images being used were all the same exact dimensions it wouldn't be an issue but then again... that is no fun. Images should be able to be different dimensions.

Recommend fixing the float issue by using the following CSS in your media query that has the images display in two columns.

@media screen and (max-width: 768px) {
    #gallery li:nth-child(odd) {
        clear: left;
    }
}

Hope the above makes sense and helps. ^_^

Andre Horton
Andre Horton
2,572 Points
Andre Horton
Andre Horton
2,572 Points

Ahhh I see, I shall bare that in mind in the future but for now your solution has fixed the problem so thank you so much for all your help Daniel - I really appreciate it :)