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 Mikaela Schaefer
Mikaela Schaefer
817 Points

Using responsive queries to switch from 2 column layout to one?

I'm trying to use the skeleton of my Web Design project to create a website for a school project. I want the site to be responsive to screen size, and I already have some responsive CSS written. I have tried searching for solutions online but none seem to work for me. Here's the HTML for the content I have the two column layout on:

'''html <div id="content-container"> <div id="content"> <section> <h3> Visual Learning</h3> <p> So, you've figured out that you're a visual learner. Great! Below are some tips and strategies you can use if you find yourself struggling. They have been broken down into different categories for your viewing ease. For a more in-depth list of strategies, you can enroll in our <a href="jk.html">School-Saavy Newsletter</a> for the small fee of $19.99 a month! </p> <br><br>
<h4>Study Tips</h4> <ul> <li>content</li> <li>content</li> </ul> </section> </div> <div id="aside"> <h4> Key Tips For Visual Learners</h4> <ul> <li>Highlight, Highlight, Highlight!</li> <li>Add Pictures to Your Notes!</li> <li>Instead of Memorizing Definitions, Memorize Pictures That You Associate with The Definition!</li> </ul> </div> </div>'''

And here's my responsive CSS for the page:

'''css

@media screen and (min-width: 660px) {

/**************** PAGE: HEADER ****************/

nav { background: none; font-size: 1em; text-align: right; width: 100%; }

#logo { float: left; margin-left: 5%; text-align: left; width: 25%; }

h1 { font-size: 2.5em; }

#aside {

}

h2 { font-size: 0.825em; margin-bottom: 20px; }

header { border-bottom: 3px solid #000; margin-bottom: 60px; }

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

}'''

Mikaela Schaefer
Mikaela Schaefer
817 Points

I just realized I didn't say what I wanted to do. I want it to move into single column layout with a screen width less than 660px.

Joseph Turnquist
Joseph Turnquist
14,516 Points

Can you post the non-media query CSS that you have written for the content and aside sections?

Mikaela Schaefer
Mikaela Schaefer
817 Points

'''css

aside

{ float: right; width: 26%; padding: 20px 0; margin: 0 3% 0 0; display: inline; background-color: #FFF; list-style: none; }

aside h3 { margin: 0; }

content-container

{ float: left; width: 100%; }

content

{ clear: left; float: left; width: 60%; padding: 20px 0; margin: 0 0 0 4%; display: inline; } '''

2 Answers

Joseph Turnquist
Joseph Turnquist
14,516 Points

Try adding:

aside,
content {
  float: initial;
}

to your media query. You'll have to add some other rules as well to make everything look correct, but this should reset the float values so that the content and aside sections are displayed in one column.

Mikaela Schaefer
Mikaela Schaefer
817 Points
Mikaela Schaefer
Mikaela Schaefer
817 Points

Thanks for the input Joseph! I actually ended up moving all my CSS creating the two column layout to my media query... and it seems to have worked just fine. Thank you for the new information, though.

Joseph Turnquist
Joseph Turnquist
14,516 Points

Mikaela,

Sure thing.

That's actually a better approach to designing websites. If you didn't already know, writing websites to first function and look good on mobile devices (called the mobile-first approach) and then adding media queries to fit to larger screen sizes allows for much cleaner code and guarantees a responsive design.