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!

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 Alexey Tseitlin
Alexey Tseitlin
5,866 Points

float problem...

Making responsive design. But why on small screens "Click Me" doesnt move under ".message"? =(

<body>
    <div class="wrapper">
        <div class="wrapper2">
            <div class="message">Easy & Highly Customizable theme</div>
            <a href="#" class="button">Click Me Click Me</a>
        </div>
    </div>
</body>

.wrapper {
    width: 100%;
    text-align: center;
}

/*Middle BOX*/
.wrapper2 {
    width: 600px;
    margin: 0 auto;
}

.button {
    float: left;
    color: white;
    border: 1px solid black;
    width: 120px;
    background: black;
}

.message {
    float: left;
    font-size: 4em;
    width: 450px;
    background: grey;
}

2 Answers

Jeremy Germenis
Jeremy Germenis
29,854 Points
Jeremy Germenis
Jeremy Germenis
29,854 Points

Sorry, I didn't see the width 600px. When you specify a width the div will remain at 600px even if the window becomes smaller than 600px. You need to set the width of wrapper2 to 100% with your media query.

Alexey Tseitlin
Alexey Tseitlin
5,866 Points

Changed to max-width =) Thanx

Jeremy Germenis
Jeremy Germenis
29,854 Points
Jeremy Germenis
Jeremy Germenis
29,854 Points

You need to clear the floats with a media query. Your elements are still wrapping to the left.

Alexey Tseitlin
Alexey Tseitlin
5,866 Points

But why without 

.wrapper2 {
    width: 600px;
    margin: 0 auto;
}

the "click me" elements moves under on small screens?

Alexey Tseitlin
Alexey Tseitlin
5,866 Points

Should the Float elements move by themself when the screen is small?