Databases
StackOverflow2013
Postsdbo
POTrying to make my webpage (desktop mode view able for mobile) with media queries?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POTrying to make my webpage (desktop mode view able for mobile) with media queries?
    primarykey
    data
    text
    <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>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USTshepang
    1. USTerry
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COYou should include the relevant code in your question rather than linking to a site. Welcome to SO ;)
      singulars
      1. POTrying to make my webpage (desktop mode view able for mobile) with media queries?
      1. USPaddyd
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload