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

making a preexisting site responsive

I'm trying to update a preexisting site to make it responsive. The problem I'm running into is the fact that the website wasn't coded on any sort of grid; all of the styling was just done through css or html with out it. Does anyone have any suggestions for the best way to make it a responsive site?

3 Answers

James Barnett
James Barnett
39,199 Points

There's no magic solution for this.

Make up a grid then swap out each element for a grid class and remove it's positioning properties (float, margin, padding).

Matt Campbell
Matt Campbell
9,767 Points

I wouldn't worry about a grid. I don't use grids when building sites and my sites are responsive and adaptive.

You just need to go through the site, working your way down in resolution and everytime the site looks rubbish, examine and then add something, be it change in sizes in CSS or a media query, to make it look good again.

Start by converting all the container sizes to percentages, working on how you'll rearrange them as the viewport gets narrower.

It depends on what you want to achieve. Without a grid, it's hard to really put up a clean site and make it responsive.

I would say it's nearly impossible, to put a site that doesn't have a grid, into a grid without making slight changes to its appearance. Now it depends on how complex the site is, to make it responsive without putting it in a grid. I would stick to what Matthew told you. If you see the browser, or rather the resolution of your monitor as the parent element, you can just use a "responsive calculator" to change the "px"-values to "%"-values. And everytime you reach a point where your site doesn't look good anymore you just add a media query for that resolution. A grid makes that process easier but it's possible without it too.