Trying to make my webpage (desktop mode view able for mobile) with media queries?

Question

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 .

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. http://www.fx-sabers.com/forum/

See when you zoom in on your phone, it just like viewing on your desktop, but instead you have to pan/zoom.

PS: I posted my website up there, so my code should be available, but if not i'll post it here.

Here is my code

    <!doctype html>
<html>
<head>
<title> DV Custom Sabers</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"> 

<meta http-equiv="pragma" content="no-cache" />
<style type="text/css">
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 > 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%;
}
}




</style>
</head>

<div class="header"><a href="index.html">Darthvix Custom Sabers</a></div>
<div class="header1">DV Custom Sabers is the place to go for your saber needs!</div>
<div class="logo"><a href="index.html"><img src="images/logo.png" alt="schedule" height="200" width="350"></a></div>


<ul id="nav">
    <li><a href="index.html">Home</a></li>
    <li><a href="aboutme.html">About Me</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="Gallery.html">Gallery</a></li>
    <li><a href="#">For Sale</a></li>
    <li><a href="buildlog.html">Build Log</a></li>
</ul>

<div class="leftcol"> 
<span class="services"> Services </span> </div>
<div class="right">
<span class="estimate"> Estimated Cost of Custom Lightsaber</span>
<p> </p>

<ul class="cost"> 
<li class="fourth">A Stunt Custom saber with no shrouds or Powdercoating: $150-$350</li>
<li class="fourth">A Nano Biscotte™ powered custom saber with minimal shrouds and no Powdercoating: $400-$550</li>
<li class="fourth">A Petit Crouton™  powered custom saber with shrouds and Powdercoating: $600-$850</li>
<li class="fourth">A Crystal Focus™ powered custom saber with all the available features: $1200</li>
</ul> 

<span class="conversions"> Lightsaber Conversions </span>
<p> </p>
<span class="onereplica"> One Replica Conversions </span>
<ul id="cost" >
<li class="misc1">Cost to install a Nano Biscotte™ Soundboard is $210 Plus cost of parts needed to convert the saber.</li>
<li class="misc1">Cost to install a Petit Crouton™ is $315 plus cost of parts needed to convert the saber.</li>
<li class="misc1">Cost to install a CFV5/6 is $300 plus cost of parts needed to convert the saber.</li>
</ul>
<span class="korbanth"> Korbanth/Parks Conversions </span>
<ul id="parks" >
<li class="parks">Please contact me directly if you would like a Parks or Korbanth Saber converted.</li>
</ul>
<span class="MR"> MR/Hasbro Conversions </span>
<ul id="MR" >
<li class="parks">To convert either a Master Replica or Hasbro FX Conversion with a Rebel/P4 LED $150.</li>
<li class="parks"> For Sound Upgrade and LED $250(not including parts cost).</li?
</ul>

</div>

<div class="leftcol">
<p class="servicelist"> 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.</p>
<span class="misc"> Misc Component Install Cost </span>

<ul class="misccomps">
<li class="misc">Add Color Extender to Crystal Focus ™  V6 $60 Install Fee</li>
<li class="misc">Add Flash on Clash™  to Crystal Focus ™ or Petit Crouton™ $25 Install Fee</li>
<li class="misc">Add R.I.C.E. to Crystal Focus ™ or Petit Crouton™  $20 Install Fee</li>
<li class="misc">Calibration of Crystal Focus ™ or Petit Crouton™ $20 Install Fee</li>
<li class="misc">In-Hilt Recharge Port $20 Install Fee</li>
<li class="misc">Accent LED Install $10 Install Fee</li>
<li class="misc">Crystal Chamber/Pommel (only if possible on desired hilt) $55-75 Install Fee</li>
</ul>
<span class="blades"> Blade Services </span>

<ul class="misccomps">
<li class="misc">1Inch Transwhite Blade 32-36Inches$40+SH</li>
<li class="misc">7/8 Inch Blades 32-36Inches $45+SH</li>
</ul>
</div>


</div>
</html>

You should include the relevant code in your question rather than linking to a site. Welcome to SO ;) — Paddyd, Sep 30 '13 at 14:20

The Humble Rat · Answer 1 · 2013-09-30T14:49:26.167

0

The website http://www.fx-sabers.com/forum/ is using some sort of responsive theme for their site and in order to do the same thing, you will also need to use responsive styling.

There are a few ways to achieve this and media queries is certainly one of them, an alternative is to size all you divs etc using percentages and using em for text. I would recommend however, using media queries as it gives you control to specify widths etc for each particular screen size and therefore the layout becomes much more controlled.

In order to implement media queries it will not be a walk in the park but will certainly be well worth it in the long run. There is a lot of info out there on this and I'm sure finding resources will be the easy part. Many people think responsive is the way web design is going, so I would say go for it. You may want to look at free responsive themes to either modify or even for reference on how it can be achieved.

Good luck and may the force be with you.

Standard Media Queries (used by twitter bootstrap)

/* Landscape phones and down */
@media (max-width: 480px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Large desktop */
@media (min-width: 1200px) { ... }

Possibly may want to add

  /* iPhone Portrait */
@media (max-width: 320px) { ... }

Telling the site to scale down to 50% etc would not help here. The scaling needs to be applied to each div/section rather than the whole page. I would do maybe

div.leftcol {width:50%;} 
div.right {width:50%;}

as a quick fix. Alternatively do

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {

div.leftcol{width:50%;} 
div.right{width:50%;} 
}

 /* iPhone Portrait */
@media (max-width: 320px) {
 div.leftcol{width:100%;}
 div.right{width:100%;} 
}

So they're equal on large screen and full on mobiles

edited Sep 30 '13 at 14:49

answered Sep 30 '13 at 14:11

The Humble Rat

4,586
6
39
73

So, I have used % for all my font sizes in my divs and spans, is that what you mean? or for right now i might pass on media queries and do them later, but for now, what is the easiest way? How would I do percents other than font size? – Terry Sep 30 '13 at 14:13
i dont think your message came through? – Terry Sep 30 '13 at 14:21
Say you have
– The Humble Rat Sep 30 '13 at 14:26
See I used media query of max width 480px last night, however on my phone, my brothers, and on iphonetester, the website looked different on all three. Is that a good query to use? Or what query do you recommend? I was kinda looking for something just to tell the website, based on your screen size, scale down 50% or 70% or something (or this isnt a good idea?) – Terry Sep 30 '13 at 14:29
if i upload my new code, could you check it out? just by viewing the source? Here is the link, im trying to get this page mobile friendly. http://darthvixcustomsabers.com/services.html If you check the code, I kinda divided the right and left columns into div.right and div.leftcol so will that help me adjust it quickly for mobile? – Terry Sep 30 '13 at 14:32
It actually seems when i do like, /* iPhone Portrait */ @media (max-width: 320px) {insert code here} The code has no effect, like I did font-size:20%; for one of the spans and it didnt change it on the iphone tester. IDK im really lost here. – Terry Sep 30 '13 at 14:43
Responsive design is definitely a learning curve. Not to confuse you further but you may be best using a framework or something. I am building something at the moment using Zurb Foundation. http://foundation.zurb.com/download.php Although you may have to mess with this for a few hours, once you understand it, you may find you are able to knock these pages out at a much quicker rate. Another thing is to get an existing template and then simply include a custom css file to change specifics ie font colour and background image etc http://html5up.net/ – The Humble Rat Sep 30 '13 at 14:59
At a glance i believe it is to do with the absolute positioning of the nav element, maybe try with position:relative, though this may have a knock on effect on larger screens so just double check, but looking good. – The Humble Rat Sep 30 '13 at 15:28
How do I specifiy that I want say, Iphones, Ipads, Androids to use this CSS, and then just laptops (1024res) to use this CSS? For some reason, as it is now, the Iphone is using the Laptop CSS, even though I have it like this media only screen and (max-width: 1025px) {Laptop CSS} media only screen and (max-width: 1023px) {Iphone, Ipad, android css} It should not apply to laptop since the res is 1024 right? Not sure why it is. – Terry Sep 30 '13 at 15:38
The media screen query is what specifies which device will use the css indicated. The screen size will not always match the resolution of the screen. I us this To show the screen size, this will be a good indicator. It seems to be working correctly for me on my phone, but looks like the issue is when the size drops below 900px, it uses any rules for say max-width:900, so will need to maybe test a few more rules for the lower media queries, ie changing background colour is good. Also just try resizing the browser – The Humble Rat Sep 30 '13 at 15:48
Also if you use chrome, right click and left click on inspect element, then when you resize the browser window it will show you the screen width – The Humble Rat Sep 30 '13 at 15:48
so what would I add to the media query to tell it to use this CSS for phones, and for the other media query, tell it to use this CSS for laptops ? Should I add for each media query "and (min-width: 200px)" for the phones and laptops do "and (min-width: 1024?px)" – Terry Sep 30 '13 at 15:51
A max width media query of 320px should do for portrait phones, 480px max width for phone landscape so add those two queries, this will instruct the browser to use these rules for those devices when in the particular state ie portrait, landscape. Here is a great explanation http://www.emailonacid.com/blog/details/C13/emailology_media_queries_demystified_min-width_and_max-width Maybe use 330 for iphone portrait and 490 for landscape – The Humble Rat Sep 30 '13 at 15:56
oh ok cool thank you, BTW what phone do you own? COuld you test my "Services" page, if its an iphone, it should kinda be all 1 column. – Terry Sep 30 '13 at 16:04
OK, so something weird is happening, for some reason, on the iphone my website looks like this, [URL=http://s1111.photobucket.com/user/Terry_Horgan/media/iphone_zps3a20e644.jpg.html][IMG]http://i1111.photobucket.com/albums/h461/Terry_Horgan/iphone_zps3a20e644.jpg[/IMG][/URL] and on my note 2 it looks a zoomed out version of that, even though my media queries are correct(according to website) – Terry Sep 30 '13 at 16:25
well i went ahead and added and it seems to be equal on iphone/note 2 now, so I guess I am good, I just wish there was a way to specifiy, max width 480 for android, or max width 800 for ipad, seems it would make it world of easier lol. – Terry Sep 30 '13 at 16:40
Hey glad you got there, keep playing around and you'll be an expert in no time. Give me a tick if this helped. – The Humble Rat Oct 01 '13 at 16:02

Trying to make my webpage (desktop mode view able for mobile) with media queries?

1 Answers1