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 Pablo S
Pablo S
966 Points

@media Desktop to mobile Help!

So I have been trying to transfer my website to a mobile version. I already made the desktop version... & I tried doing this to my css:

/*** COMPUTER SCREEN CSS ***/ @media screen and (min-width:600px) { Style here (which is the desktop version I had already made)
}

Then

/*** PHONE CSS ***/ @media screen and (min-width:1px) { STYLE HERE }

I found out that its quite hard working backwards from desktop to mobile because I have to completely rewrite css for the different break points.

If I had made the mobile one first I could of easily just done this for the desktop

/to desktop version/ @media screen and (min-width:600px) { STYLE HERE }

I would of just had to over ride several things I wanted to move from the mobile version... instead of rewriting everything.

All I want to know is: Is there a easier way to go from desktop to mobile because I don't feel comfortable doing the mobile version first & don't like the fact that I have to rewrite everything again for the mobile.

Thank you! Pablo

3 Answers

Adam Sommer
Adam Sommer
62,470 Points
Adam Sommer
Adam Sommer
62,470 Points

You probably don't have to redo everything, but you may have to make some adjustment if your elements don't resize in a way that looks good on mobile.

Another approach is to use a framework that handles responsiveness for you. Some popular options are Bootstrap, Foundation, and Bourbon.

Also, be sure to check out the Treehouse courses on Foundation, Bootstrap, and Responsive Design.

Sorry, don't know if there's a 100% right answer for your question.

Yulia Markina
Yulia Markina
12,616 Points
Yulia Markina
Yulia Markina
12,616 Points

Hi Pablo, It's really depends how complex your website is and how mobile and desktop versions are differ.

1. You have your main CSS for desktop and you only add media queries for those elements that need to be adjusted for mobile version. You don't need to rewrite everything completely. In this case it will look like this: 

@media only screen and (max-width: 479px) {
       your code
}

( Mobile Landscape Screen Sizes )
@media only screen and (min-width: 480px) and (max-width: 767px)  {
       your code 
}

2. If you have mobile layout in your main CSS, you add some media queries for desktop:

@media (min-width: 768px) and (max-width: 2048px) {
     your code 
}

3. If it looks like you need to rewrite everything, maybe it's a good idea to make all your dimensions in percentages. In this case you can go without media queries at all.

Hope it helps.

Satnam Singh
Satnam Singh
7,194 Points
Satnam Singh
Satnam Singh
7,194 Points

Hello,

If you're using this media query for Desktop version :

@media screen and (min-width:600px) {
    // Desktop CSS here
}

Then you can use this media query for your Mobile version :

@media screen and (max-width:599px) {
    // Mobile CSS here
}

Cheers !