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

Kevin Tucker
Kevin Tucker
4,987 Points
Posted by Kevin Tucker
Kevin Tucker
4,987 Points

Responsive Webpage Switch

Hello,

I've been looking at websites for inspiration for projects to cement the languages that I am learning in my brain. Whilst looking I noticed that on template websites they have a toolbar at the top of the page that allows you to switch between the desktop, tablet and mobile views. I have searched the internet but I can't find a good source on how they do this but I haven't been able to find anything. The search terms just search for responsive web design which TeamTreehouse covers wonderfully.

My question is how do they do it? I am completely drawing a blank. I would love to know how.

1 Answer

Curtis Alcorn
Curtis Alcorn
10,389 Points
Curtis Alcorn
Curtis Alcorn
10,389 Points

I'm not 100% sure, as I haven't had to do one of these before, but I'll take a crack at how I would approach it.

When you normally code CSS, you have it in the separate file and use the <link> tag in your HTML to attach it.

I would have three separate style sheets made, one for each type of device I want to target (desktop, tablet, mobile). I would then use Javascript to update the 'href' part of the link tag to update what stylesheet I want the program to use. So if they click the tablet button for example, it would render the page according to a whole different set of rules than the desktop one.

Idk if that answers your question, but hope it helps point you in the right direction!

Curtis Alcorn
Curtis Alcorn
10,389 Points

Edit: I had a chance to create a dummy test for this and it was successful. I made two css files outside of this, one called desktop.css (red background), the other called tablet.css (blue background).

<html> <head> <link rel="stylesheet" href="desktop.css"> </head> <body> <h1> Desktop CSS would be red. Tablet CSS would be blue.</h1> <script> document.querySelector("link").setAttribute("href", "tablet.css"); </script> </body> </html>

Kevin Tucker
Kevin Tucker
4,987 Points
Kevin Tucker
Kevin Tucker
4,987 Points

Thanks Curtis, your code did give me some ideas.

I ended up using iframes and then used javascript to change the display setting