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

Emil Wallgren
Emil Wallgren
11,737 Points
Posted by Emil Wallgren
Emil Wallgren
11,737 Points

Responsive web-site

Hi!

I've really come up with a problem... I'm supposed to help a client with a web-site. The problem is that the current code is so messed up that I either have to re-make the entire web-site (all html-documents...and there are alot..)or somehow link to an entire new html document when the screen gets smaller.

Is this possible? That I could link to another html-document if the screen gets smaller...(media-queries somehow?)

Got any tips, or have you faced this problem yourselves sometime?

Have an awesome day!

/Emil

4 Answers

Nemanja Pribilovic
Nemanja Pribilovic
5,366 Points

You can load different css on the different screen size. This example will load different css when the screen is lower than 745px link rel="stylesheet" href="css/740-2.css" media="screen and (max-width: 745px)"

Emil Wallgren
Emil Wallgren
11,737 Points
Emil Wallgren
Emil Wallgren
11,737 Points

I've used media queries before...but what I wonder is if there's a possibility to load different html if browser is smaller...

Nemanja Pribilovic
Nemanja Pribilovic
5,366 Points

You can do that with javascript set an if statement and if it's true load to different url.

Emil Wallgren
Emil Wallgren
11,737 Points
Emil Wallgren
Emil Wallgren
11,737 Points

Could you give an example of such an if-statement? :-)

Nemanja Pribilovic
Nemanja Pribilovic
5,366 Points

I can make an example and send you on mail. Mail at me neno1204@gmail.com

George Cristian Manea
George Cristian Manea
30,787 Points
George Cristian Manea
George Cristian Manea
30,787 Points

You shoud use media queries like this: <link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/example.css' /> And create two css files one for smatphones and one for tablets. Try to work with it's code, if you try to redo it you might miss something and instead of improving the website you might mess it up.

Ben MacAdam
Ben MacAdam
14,982 Points
Ben MacAdam
Ben MacAdam
14,982 Points

This may also be a good chance to propose the option of rebuilding the site for the client :) If you can pitch to them the benefits of converting the site to a responsive design from a rebuild, that is likely the better route for both you and the client as you likely get more work and they get a better product. Depending on your situation, I often encourage clients to move towards Wordpress as it has many benefits and I find starting with a blank responsive theme can speed up your development a bunch. Good luck with your endeavor!

Emil Wallgren
Emil Wallgren
11,737 Points
Emil Wallgren
Emil Wallgren
11,737 Points

Thanks :-) I'll talk to him! Agree on WordPress, but I'm not that good at coding it yet. Will make my first WP-site this summer though :-)

Emil Wallgren
Emil Wallgren
11,737 Points
Emil Wallgren
Emil Wallgren
11,737 Points

To clarify...I'm supposed to help him make it responsive...