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 Shilpa K
Shilpa K
12,722 Points

Web responsive code for resizing browser (From big to smaller screen sizes)

I've already created my website but didn't make code it with a mobile first perspective in mind. Is there a way to input responsive CSS with my code as it already exists, so that elements to collapse or hide when the browser is resized smaller? If so, would someone be able to provide me with example of how I would do this?

Andres Altuve
Andres Altuve
16,274 Points

Hi Shilpa,

Check out the following training

CSS Foundations

Go to the bottom and take a look at Media Queries.

2 Answers

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

It's (way) easier said than done.

But there are 3 ingredients ...

  • First add in a grid
  • Then sprinkle in media queries
  • Finally add in a dash of flexible images

Check out CSS Foundations, CSS Layouts and Framework Foundations for videos on grids and media queries

Gemma Weirs
Gemma Weirs
15,054 Points
Gemma Weirs
Gemma Weirs
15,054 Points

You'd do that with media queries for the smaller breakpoints. I don't know if that was a helpful answer but perhaps it would help if you post the code you're working with.