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

Jack Fitzgibbon
Jack Fitzgibbon
7,607 Points
Posted by Jack Fitzgibbon
Jack Fitzgibbon
7,607 Points

Media Queries, need help

How can I use Media queries or anything else to colapse the two columns into one when on a mobile device, Like and iPhone.

Below is the CodePen:

http://cdpn.io/azGbt

Thank you

3 Answers

Kevin Korte
Kevin Korte
28,147 Points
Kevin Korte
Kevin Korte
28,147 Points

A basic media query like so would work

@media screen and (max-width: 800px) {
  .column {
    width: 100%;
  }
}
Kevin Lozandier
PLUS
Kevin Lozandier
Courses Plus Student 53,747 Points
Kevin Lozandier
Kevin Lozandier
Courses Plus Student 53,747 Points

Hii, Jack:

Mr. Korte's has in fact provided you a basic media query for you to be able to accomplish what you wanted for that particular pen.

However, your overall approach to have two columns for text is questionable. You should use CSS3 columns to achieve such an effect that's far more scalable.

Jack Fitzgibbon
Jack Fitzgibbon
7,607 Points
Jack Fitzgibbon
Jack Fitzgibbon
7,607 Points

Thank you, I will take that in mind in future projects