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

General Discussion

Posted by troy beckett
troy beckett
12,035 Points

Help making a responsive website... problems trying to make it fluid..I've uploaded my code on code pen pls take a look.

I'm currently trying to take a simple website and make it responsive. I'm going through a treehouse project but I've hit a few problems. I'm currently trying to make the text,margins, and padding more fluid by changing px to em and %. However when I scale my browser down in size it just stays the same size and doesn't move with it.

A little bit of background to my website. I'm using notepad ++ as a text editor to write my code in and google chrome as my browser. I've gone onto codepen and tried to upload my code to make it easier for you guys to check. The code I've upload are three different sheets. I have an index.html, grid.css and a style.css.

The project I'm currently going through is 'Build a responsive website' and what I'm trying to achieve is the same website fluidity as the one shown at the start of the scalable images video in the 'creating a fluid foundation' section of the project(I haven't made touched the images yet).

So if you have time please take a look at my code and tell me if you see any problems( apologies if they are obvious). Basically I want the text, margins and padding to be fluid on the page.

My website on codepen: http://codepen.io/tbeckett24/pen/Eizue

2 Answers

Dean Hollstrom
Dean Hollstrom
9,445 Points
Dean Hollstrom
Dean Hollstrom
9,445 Points

As you are using a grid layout, your design is responsive, but the code doesnt know how to display its responsiveness. As Kennard said, try setting up media queries within your css file. Something like this;

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

/* Put all your code in here for element sizing */

}

The above will then look at the size of your viewport (browser window) and if the minimum width of the window is 960px or more, it will use the code within the curled braces.

I hope this will help