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

Posted by X X
X X
90 Points

Gallery

Hi,

I have a problem with CSS, while writing code for portfolio. My gallery elements are pushed away, when I am resizing web browser to smaller width.

CSS

#portrety, #rysunki {
    list-style: none;
    margin: 0;
    padding: 0;
}

#portrety li {
    float: left;
    width: 45%;
    margin: 2.5%;
    background-color: #fff;
    text-align: center;
}

#portrety li a img {
    display: block;
    width: 100%;
    margin: 0;
    border: 2px solid #000;
}

#portrety li a p {
    color: #88bb88;
}

#rysunki li {
    float: left;
    width: 45%;
    margin: 2.5%;
    background-color: #fff;
    text-align: center;
}

#rysunki li a img {
    display: block;
    width: 100%;
    margin: 0;
    border: 2px solid #000;
}

#rysunki li a p {
    color: #88bb88;
}

HTML

<section>
            <h2>Portrety</h2>
            <ul id="portrety">
                <li>
                    <a href="/Users/admin/Desktop/portfolio/img/portret1.jpg">
                        <img src="/Users/admin/Desktop/portfolio/img/portret1.jpg" alt="Tchórzofretka">
                        <p>Tchórzofretka</p>
                    </a>
                </li>
                <li>
                    <a href="/Users/admin/Desktop/portfolio/img/portret2.jpg">
                        <img src="/Users/admin/Desktop/portfolio/img/portret2.jpg" alt="Żaneta">
                        <p>Żaneta</p>
                    </a>
                </li>
                <li>
                    <a href="/Users/admin/Desktop/portfolio/img/portret3.jpg">
                        <img src="/Users/admin/Desktop/portfolio/img/portret3.jpg" alt="Artur">
                        <p>Artur</p>
                    </a>
                </li>
                <li>
                    <a href="/Users/admin/Desktop/portfolio/img/portret4.jpg">
                        <img src="/Users/admin/Desktop/portfolio/img/portret4.jpg" alt="Kasia &amp; Hubert">
                        <p>Kasia &amp; Hubert</p>
                    </a>
                </li>
            </ul>

            <h2>Rysunki</h2>
            <ul id="rysunki">
                <li>
                    <a href="/Users/admin/Desktop/portfolio/img/rysunek1.jpg">
                        <img src="/Users/admin/Desktop/portfolio/img/rysunek1.jpg" alt="Okładka tomiku, pt. 'Unieść rękę'">
                        <p>Okładka tomiku, pt. "Unieść rękę"</p>
                    </a>
                </li>
                <li>
                    <a href="/Users/admin/Desktop/portfolio/img/rysunek2.jpg">
                        <img src="/Users/admin/Desktop/portfolio/img/rysunek2.jpg" alt="Raj utracony">
                        <p>"Raj utracony"</p>
                    </a>
                </li>
                <li>
                    <a href="/Users/admin/Desktop/portfolio/img/rysunek3.jpg">
                        <img src="/Users/admin/Desktop/portfolio/img/rysunek3.jpg" alt="Danse de la vie">
                        <p>"Danse de la vie"</p>
                    </a>
                </li>
                <li>
                    <a href="/Users/admin/Desktop/portfolio/img/rysunek4.jpg">
                        <img src="/Users/admin/Desktop/portfolio/img/rysunek4.jpg" alt="Składając skrzydła">
                        <p>"Składając skrzydła"</p>
                    </a>
                </li>
            </ul>
        </section>
X X
X X
90 Points

http://i58.tinypic.com/sxds2v.jpg

screenshot

2 Answers

akak
akak
29,446 Points

Hi Pawel,

You can try to add these: 

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

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

It might fix the issue.

But either way at such small width I would use media query and switch to one column layout.

X X
X X
90 Points
X X
X X
90 Points

Thank you, my friend!