title: Trying to make my webpage (desktop mode view able for mobile) with media queries?
body: <p>I had a quick question, my website is darthvixcustomsabers.com and I am trying to make each of my web pages viewable on my mobile device. Not necessarily look different, but just be view able on my phone .</p>
  
  <p>I was thinking of using aspect ratio media queries, but am not really sure. I want it to be like this website if easy enough and possible. <a href="http://www.fx-sabers.com/forum/" rel="nofollow">http://www.fx-sabers.com/forum/</a></p>
  
  <p>See when you zoom in on your phone, it just like viewing on your desktop, but instead you have to pan/zoom.</p>
  
  <p>PS: I posted my website up there, so my code should be available, but if not i'll post it here.</p>
  
  <p>Here is my code </p>
  
  <pre><code>    &lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt; DV Custom Sabers&lt;/title&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"&gt; 
  
  &lt;meta http-equiv="pragma" content="no-cache" /&gt;
  &lt;style type="text/css"&gt;
  body {background-image:url('images/space1.jpg');
  background-repeat: no-repeat center center;
      background-position: center;
      background-size: cover;
      width: 100%;
      min-height: 100%;
      }
  
  
  body 
  {color:white;}
  a, a:visited { 
      color:#3399FF ; text-decoration:none; 
      }
  
  div.saber {
  column-count:2; 
  column-gap: 20px;
  }
  
  div.header{
  text-align:right;
  font-size:200%;
  }
  div.header1 {
  text-align:right;
  font-size:150%;
  }
  div.logo {
  margin-top:-50px;
  }
  #nav{
  width:85%;
  height:3%;
  font-size: 26px;
  font-weight: bold;
  background-color: ;
  border-radius: 8px;
  text-align: center;
  margin: 0 auto;
  position:absolute;
  top:100px;
  left:120px;
  }
  
  #nav ul {
  height: auto;
  padding: 0px 0px;
  margin: 0px;
  background-color: #f2f2f2;
  border-bottom: 1px solid #ccc; 
  display: inline-block;
      }
  
  #nav li { 
  display: inline-block;
  padding: 20px; 
  margin-left: auto;
  margin-right: auto;
  }
  
  #nav a {
  text-decoration: none;
  color: :#3399FF;
  padding: 8px 8px 8px 8px;
  }
  
  #nav a:hover {
  color: #000000;
  background-color: #FFF;
  li:hover ul { display: block; }
  }
  
  nav ul ul {
      display: none;
  }
  
  nav ul li:hover &gt; ul {
          display: block;
  }
  span.services {
  font-size:250%;
  text-decoration:underline;
  margin-left:6%;
  }
  p.servicelist {
  font-size:150%;
  width:20em;
  margin-left:3%;
  padding:60px;
  line-height:1.6em;
  overflow: auto;
  }
  span.misc {
  font-size:250%;
  text-decoration:underline;
  margin-left:6%;
  }
  ul.misccomps {
  font-size:150%;
  margin-left:8%;
  }
  span.blades {
  font-size:250%;
  text-decoration:underline;
  margin-left:6%;
  }
  
  div.right {
  float:right;
  }
  
  span.estimate {
  font-size:250%;
  text-decoration:underline;
  margin-right:6%;
  }
  
  ul.cost {
  font-size:150%;
  margin-right:6;
  text-align:left;
  line-height:1.6em;
  width:28em;
  }
  #cost {
  font-size:150%;
  margin-right:4%;
  text-align:left;
  line-height:1.6em;
  width:28em;
  }
  span.conversions {
  font-size:250%;
  text-decoration:underline;
  margin-right:6%;
  }
  span.onereplica {
  font-size:200%;
  text-decoration:underline;
  margin-right:6%;
  }
  
  #parks {
  font-size:150%;
  margin-right:4%;
  text-align:left;
  line-height:1.6em;
  width:28em;
  }
  span.korbanth {
  font-size:200%;
  text-decoration:underline;
  margin-right:6%;
  }
  #MR {
  font-size:150%;
  margin-right:4%;
  text-align:left;
  line-height:1.6em;
  width:28em;
  }
  span.MR {
  font-size:200%;
  text-decoration:underline;
  margin-right:6%;
  }
  
  @media only screen 
  and (max-device-width : 480px) {
  
  div.leftcol {
  width:100%;
  }
  div.right {
  width:100%;
  }
  }
  
  
  
  
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;div class="header"&gt;&lt;a href="index.html"&gt;Darthvix Custom Sabers&lt;/a&gt;&lt;/div&gt;
  &lt;div class="header1"&gt;DV Custom Sabers is the place to go for your saber needs!&lt;/div&gt;
  &lt;div class="logo"&gt;&lt;a href="index.html"&gt;&lt;img src="images/logo.png" alt="schedule" height="200" width="350"&gt;&lt;/a&gt;&lt;/div&gt;
  
  
  &lt;ul id="nav"&gt;
      &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="aboutme.html"&gt;About Me&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="services.html"&gt;Services&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="Gallery.html"&gt;Gallery&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;For Sale&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="buildlog.html"&gt;Build Log&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div class="leftcol"&gt; 
  &lt;span class="services"&gt; Services &lt;/span&gt; &lt;/div&gt;
  &lt;div class="right"&gt;
  &lt;span class="estimate"&gt; Estimated Cost of Custom Lightsaber&lt;/span&gt;
  &lt;p&gt; &lt;/p&gt;
  
  &lt;ul class="cost"&gt; 
  &lt;li class="fourth"&gt;A Stunt Custom saber with no shrouds or Powdercoating: $150-$350&lt;/li&gt;
  &lt;li class="fourth"&gt;A Nano Biscotte™ powered custom saber with minimal shrouds and no Powdercoating: $400-$550&lt;/li&gt;
  &lt;li class="fourth"&gt;A Petit Crouton™  powered custom saber with shrouds and Powdercoating: $600-$850&lt;/li&gt;
  &lt;li class="fourth"&gt;A Crystal Focus™ powered custom saber with all the available features: $1200&lt;/li&gt;
  &lt;/ul&gt; 
  
  &lt;span class="conversions"&gt; Lightsaber Conversions &lt;/span&gt;
  &lt;p&gt; &lt;/p&gt;
  &lt;span class="onereplica"&gt; One Replica Conversions &lt;/span&gt;
  &lt;ul id="cost" &gt;
  &lt;li class="misc1"&gt;Cost to install a Nano Biscotte™ Soundboard is $210 Plus cost of parts needed to convert the saber.&lt;/li&gt;
  &lt;li class="misc1"&gt;Cost to install a Petit Crouton™ is $315 plus cost of parts needed to convert the saber.&lt;/li&gt;
  &lt;li class="misc1"&gt;Cost to install a CFV5/6 is $300 plus cost of parts needed to convert the saber.&lt;/li&gt;
  &lt;/ul&gt;
  &lt;span class="korbanth"&gt; Korbanth/Parks Conversions &lt;/span&gt;
  &lt;ul id="parks" &gt;
  &lt;li class="parks"&gt;Please contact me directly if you would like a Parks or Korbanth Saber converted.&lt;/li&gt;
  &lt;/ul&gt;
  &lt;span class="MR"&gt; MR/Hasbro Conversions &lt;/span&gt;
  &lt;ul id="MR" &gt;
  &lt;li class="parks"&gt;To convert either a Master Replica or Hasbro FX Conversion with a Rebel/P4 LED $150.&lt;/li&gt;
  &lt;li class="parks"&gt; For Sound Upgrade and LED $250(not including parts cost).&lt;/li?
  &lt;/ul&gt;
  
  &lt;/div&gt;
  
  &lt;div class="leftcol"&gt;
  &lt;p class="servicelist"&gt; All the sabers created are either designed by the customer or by Darthvix Custom Sabers. 
  The following prices listed for custom sabers are in no way meant to represent the actual final cost of your custom saber, 
  but to be an estimate.
  Every saber I make has a unique design, the time it takes to complete the saber is based on the sabers complexity. 
  I will complete the saber as soon as possible, usually most sabers take 4-8 weeks, however sabers that require much 
  machining will take longer. Over half of the sabers I have sold are MHS, which are sabers made from pre-machined parts 
  from The Custom Saber Shop, and I modify the pieces to fit the customers design.  
  If you are looking for a accurate quote on your custom saber you are looking to have Darthvix Custom Sabers Create, 
  please email me a render of the saber you have in mind. This can include a 3-D renger, a hand drawn photo, 
  or a photoshopped image as well.
  Please keep in mind, it may take a few days for me to figure the costs out based on your render because 
  I need to add up all the costs involved in creating your dream saber.&lt;/p&gt;
  &lt;span class="misc"&gt; Misc Component Install Cost &lt;/span&gt;
  
  &lt;ul class="misccomps"&gt;
  &lt;li class="misc"&gt;Add Color Extender to Crystal Focus ™  V6 $60 Install Fee&lt;/li&gt;
  &lt;li class="misc"&gt;Add Flash on Clash™  to Crystal Focus ™ or Petit Crouton™ $25 Install Fee&lt;/li&gt;
  &lt;li class="misc"&gt;Add R.I.C.E. to Crystal Focus ™ or Petit Crouton™  $20 Install Fee&lt;/li&gt;
  &lt;li class="misc"&gt;Calibration of Crystal Focus ™ or Petit Crouton™ $20 Install Fee&lt;/li&gt;
  &lt;li class="misc"&gt;In-Hilt Recharge Port $20 Install Fee&lt;/li&gt;
  &lt;li class="misc"&gt;Accent LED Install $10 Install Fee&lt;/li&gt;
  &lt;li class="misc"&gt;Crystal Chamber/Pommel (only if possible on desired hilt) $55-75 Install Fee&lt;/li&gt;
  &lt;/ul&gt;
  &lt;span class="blades"&gt; Blade Services &lt;/span&gt;
  
  &lt;ul class="misccomps"&gt;
  &lt;li class="misc"&gt;1Inch Transwhite Blade 32-36Inches$40+SH&lt;/li&gt;
  &lt;li class="misc"&gt;7/8 Inch Blades 32-36Inches $45+SH&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  
  
  &lt;/div&gt;
  &lt;/html&gt;
  </code></pre>