1 Replies - 583 Views - Last Post: 20 April 2012 - 02:12 PM

#1 hugoriffic  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 185
  • Joined: 16-September 09

Help with @media

Posted 18 April 2012 - 06:30 PM

First off here is my website: http://itweb.fvtc.ed...66821/home.html

Now my question is if I want to make the website maintain it's current look on a tablet pc all the way up to a large screen could I simply enclose my current stylesheet within this:

@media screen and(min-width: 600) {
*all current styling within here*
}

Also, I need to make my website accessible for phones. I'm having a hard time with how to do that. I know I'll need to change the entire look of my website but can anyone offer any advice on how to do so with the least amount of work? I know I'll need another stylesheet and have to work on all my CSS to fit the smaller screen but I don't even know where or how to begin.

Is This A Good Question/Topic? 0
  • +

Replies To: Help with @media

#2 hugoriffic  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 185
  • Joined: 16-September 09

Re: Help with @media

Posted 20 April 2012 - 02:12 PM

This is what my instructor gave me to work off of:

<!-- Tag to satisfy mobile WebKits -->
<meta name="viewport" content="initial-scale=1.0">

<!-- Print -->
<link rel="stylesheet" type="text/css" href="_css/print.css" media="print" />

<!-- Tablet pc -->
<link rel="stylesheet" type="text/css" href="_css/tablet.css" media="screen and (min-device-width: 481px) and (max-device-width: 799px)" />

<!-- Mobile -->
<link rel="stylesheet" type="text/css" href="_css/handheld.css" media="only screen and (max-device-width: 480px)" />

That's it. I've emailed him and dropped by his office for help and all he will give me is to do a google search on how to do these things. I have googled and most of it doesn't make sense.

I realize that this does not work because everything needs to be adjusted somehow.:

@media screen and(min-width: 600) {
*all current styling within here*
}

I can give all my code if that is what is needed. I'm not looking for anyone to do my homework for me, just to help point me in the right direction on how to get started. Any help would be appreciated. And if you need my code I'll post that as well.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1