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

HTML

Posted by Tomasz Hermanowicz
Tomasz Hermanowicz
7,219 Points

problem with img i second row of galery?

hi I have problem with order of img's, after using gallery selector. I'm losing one img.

link http://noob-test.azurewebsites.net/

code 

<!DOCTYPE html>
<html>

    <head>
        <meta charest="utf-8">
        <title>Tomasz Hermanowicz | System Builder</title>
        <link rel="stylesheet" href="css/normalize.css">
        <link href='https://fonts.googleapis.com/css?family=Salsa' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/main.css">
    </head>

    <body>
        <header>
            <a href="index.html" id="logo">
                <h1>Tomasz Hermanowicz</h1>
                <h2>System Builder</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="galeria">
                    <li>
                        <a href="img/numbers-01.jpg">
                            <img src="img/numbers-01.jpg" alt="">
                            <p>Experyment z kolorem i kształtem</p>
                        </a>
                    </li>
                    <li>
                        <a href="img/numbers-02.jpg">
                            <img src="img/numbers-02.jpg" alt="">
                            <p>Experyment z rozmyciem.</p>
                        </a>
                    </li>
                    <li>
                        <a href="img/numbers-06.jpg">
                            <img src="img/numbers-06.jpg" alt="">
                            <p>W stylu lat 80.</p>
                        </a>
                    </li>
                    <li>
                        <a href="img/numbers-09.jpg">
                            <img src="img/numbers-09.jpg" alt="">
                            <p>szczotka, szczotka i jeszcze raz szczotka.</p>
                        </a>
                    </li>
                    <li>
                        <a href="img/numbers-12.jpg">
                            <img src="img/numbers-12.jpg" alt="">
                            <p>Powtorka elemetu wielokrotnie w tle.</p>
                        </a>
                    </li>
                </ul>
            </section>

            <footer>
                <a href="https://www.facebook.com/thermanowicz"><img src="img/facebook-wrap.png" alt="Facebook logo"></a>
                <a href="https://www.twitter.com/"><img src="img/twitter-wrap.png" alt="Twitter logo"></a>
                <p>&copy; 2016 Tomasz Hermanowicz.</p>
            </footer>
            </div>
     </body>
</html>

CSS

/************************************************************************
General: Główny CSS strony system builder
************************************************************************/

body {
    font-family: 'Salsa', cursive;
}


a {
    text-decoration: none;
}

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

#logo {
    text-align: center;
    margin: 0;
}

a {
    color: #6ab47b;
}

img {
    max-width: 100%;
}

/*zielony kolor nagłówka*/


header {
    background: #6ab47b;
    border-color: #599a68;
}

/******************************************************************************
Colors: koloryzaja strony 
******************************************************************************/


/*parametry logo*/

h1 {
    color: #fff;
    font-family: 'Salsa', cursive;
    font-size: 1.75em;
    font-weight: normal;
    line-height: 0.8em;
}

h2 {
    color: #fff;
    font-size: 0.75em;
    margin: -5px 0 0;
    font-weight: normal;
}

/*kolor nawigacji*/

nav {
    background: #599a68;
    text-align: center;
    padding: 10px 0;
    margin: 20px 0 0;
}

nav a, nav a:visited {
    color: #fff;
}

/* zmaiana koloru linku po najechaniu i wybraniu*/


nav a.selected, nav a:hover {
    color: #32673f;
}

/* ciało strony */


body {
    background-color: #fff;
    color: #888;
}

footer {
    font-size: 0.75em;
    text-align: center;
    clear: both;
    padding-top: 50px;
    color: #ccc;
}

/* Stylizacja galeri */

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

#galeria li {
    float: left;
    width: 45%;
    margin: 2.5%;
    background-color: #f5f5f5;
    color: #bdc3c7;
}

#galeria li a p {
    margin: 0;
    padding: 5%;
    font-size: 0.75em;
    color: #bdc3c7;
}

(Edited by BothXP to add the markdown)

Austin Whipple
Austin Whipple
29,847 Points

Hi Tomasz,

It would help folks here troubleshoot the issue if you provided your code along with the question--either by copy/pasting or linking to a live example.

Tomasz Hermanowicz
Tomasz Hermanowicz
7,219 Points

Sorry, I'm first time using help.

2 Answers

bothxp
bothxp
16,510 Points

Hi Tomasz,

I'm not quite sure what issue you are seeing. I've taken a look at your web page and all 5 images are appearing fine.

Do you mean this?: Screenshot

When you resize the window, sometimes the 1st image on the second row appears on the right. The text under the 1st image is wrapping and is then pushing the below image out of the way to the right.

How to deal with this issue is covered in a later video: build-a-three-column-layout

Tomasz Hermanowicz
Tomasz Hermanowicz
7,219 Points

Yes I'm talking about that. Thanks for information about solution.

And is there any solutiion for right now? ---FIXED---

Anthony Mejia
Anthony Mejia
8,840 Points
Anthony Mejia
Anthony Mejia
8,840 Points

Hey Tomasz,

I can't find anything too alarming that would cause this issue. I've visited your website and found all of your images there.

Could you please elaborate further on when this error occurs?

I don't know if this would work, but try removing your section element inside your wrapper.

P.S: This is a screenshot of your website on my mobile phone.

Tomasz Hermanowicz
Tomasz Hermanowicz
7,219 Points

THX on you're phone all apear fine. So it's my chrome