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

Alexandre Ferreira
Alexandre Ferreira
15,358 Points
Posted by Alexandre Ferreira
Alexandre Ferreira
15,358 Points

Window resize is not working for some parts of the page.

What makes a section of the page adapt when we bring the browser window to a smaller size?

How does the code work in this matter?

In my case the nav part is working fine, but the contents of the page inside the html <div id="wrapper"> do not adapt to window resize.

<div id="wrapper">
        <section>
            <ul class="thumbnail-list">
                <li>
                    <a href="articles/article8.html">
                        <img src="img/elefantassustaseis.png" alt="elefant" class="thumbnail-image">
                    </a>
                    <h3>A title</h3>
                    <p class="thumbnail-text">....blablabla....some text    here................<a href="articles/article8.html" class="read-more">Read more >></a></p>
                </li>
            </ul>
        </section>

I do not understand how does the HTML code works with this feature.

Is the problem in the HTML part or CSS part?

Christian Frick
Christian Frick
14,586 Points
Christian Frick
Christian Frick
14,586 Points

You'll get there soon, how to make the Website responsive.

And it's a CSS Problem in most cases.

1 Answer

Isaac Asante
Isaac Asante
4,752 Points
Isaac Asante
Isaac Asante
4,752 Points

FYI, the div wrapper will not auto-resize if you set it's normal width to 940px inside your main.css file. You should use max-width, like this css max-width: 940px; to tell browsers that the maximum width should not exceed 940px, but that the wrapper can get smaller if the window is reduced, or the device screen is smaller.

Alexandre Ferreira
Alexandre Ferreira
15,358 Points
Alexandre Ferreira
Alexandre Ferreira
15,358 Points

Thank you for your answer.

I have changed the CSS code accordingly and it is working now! Works in Chrome and Safari. In Firefox and Opera it adapts the sections to smaller sizes but not the text parts, doesn't seam to do the text wrap.