Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,150,729 members, 7,809,781 topics. Date: Friday, 26 April 2024 at 02:47 PM

How Do I Make A Site Fits Any Screen Size Including Mobile. - Webmasters - Nairaland

Nairaland Forum / Science/Technology / Webmasters / How Do I Make A Site Fits Any Screen Size Including Mobile. (3595 Views)

5 Lies You Need To STOP Telling Yourself As A Site Owner / I Need A Site Where I Can Sell My Goods / I Show You How I Make $1,000 Per Day With Facebook Viral Script On My Blog (2) (3) (4)

(1) (2) (Reply) (Go Down)

How Do I Make A Site Fits Any Screen Size Including Mobile. by Raylight2(m): 9:13am On Dec 23, 2012
I've built a site(yet to publish) dat looks correct on IE and firefox but scattered on mobile. Plz, nairalanders i've learnt to build a site from scratch all by myself but I've got problem with making it autoresize including the texts on the page. Plz, tell me the codes to use. Thanks.
Re: How Do I Make A Site Fits Any Screen Size Including Mobile. by xterra2(m): 12:25pm On Dec 23, 2012
use media queries something like this 

@media only screen and (max-device-width: 480px) {
}


you can read about it, basically you create 3 style sheets, mobile tablet and desktop or 2 if you only want 2 of them

1 Like

Re: How Do I Make A Site Fits Any Screen Size Including Mobile. by yawatide(f): 11:44am On Dec 24, 2012
Use either percentages for your width (fluid design) or conditional media queries (responsive design).

All the same, if your code is semantic, your site should display consistently across the board as many mobile devices can optimize regular sites. What exactly do you mean by "scattered"? Is there a URL we can look at?

1 Like

Re: How Do I Make A Site Fits Any Screen Size Including Mobile. by Raylight2(m): 10:57pm On Dec 24, 2012
No URL. I viewed it through Dreamweaver Central Device. The texts do not reduce in size. So the extend beyond the content div I created. If only I can just get these texts auto-resizing as screen size decreases, I'll be ok.
Re: How Do I Make A Site Fits Any Screen Size Including Mobile. by Raylight2(m): 11:42pm On Dec 25, 2012
Still unable to make the stylesheet work on my site. Can any1 pls, write the codes for me and tell me how to make it work. Its view on different system browsers is ok but it doesn't show well on mobile. Pls, help me out of this little obstacle. Thanks to you all.
Re: How Do I Make A Site Fits Any Screen Size Including Mobile. by yawatide(f): 12:15pm On Dec 26, 2012
How can we write code for something we haven't seen? I think u shd first send us ur url and we go from there, no?
Re: How Do I Make A Site Fits Any Screen Size Including Mobile. by winexviv: 3:33pm On Dec 26, 2012
The solution is simple. Try to use divs rather than cells or tables. It will solve the cross-brwoser or mobile issue.
Re: How Do I Make A Site Fits Any Screen Size Including Mobile. by guru01(m): 3:43pm On Dec 26, 2012
Use "em" for font-size rather than "px"
Re: How Do I Make A Site Fits Any Screen Size Including Mobile. by Raylight2(m): 10:06pm On Dec 26, 2012
See attached to download the index page. Can be opened with phone. Just 5kb. Waiting for your response. Thanks.

Re: How Do I Make A Site Fits Any Screen Size Including Mobile. by Raylight2(m): 10:49am On Dec 27, 2012
[size=20pt]these are the source codes[/size]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Blessed International College</title>
</head>
<style type="text/css">
body {
background-color:black;
margin-right:auto;
margin-left:auto;
margin-top:10px;
width:75%;
}
div#header
{
width:100%;
height:155px;
background-color:transparent;
text-decoration:none;
}
div#navigator
{
position:relative;
width:100%;
background-color:#A00;
height:30px;
}
div#menu
{
width:20%;
text-align:center;
font-size:15px;
height:30px;
float:left;
color:#FFDFFF;
font-family:georgia;
font-weight:bold;
}
div:hover
{
background-color:#D41F00;
text-decoration:underline;
}
div#container
{
position:relative;
width:100%;
background-color:white;
text-decoration:none;
color:black;
font-size:15px;
height:660px;
}
div#footer
{
width:100%;
height:80px;
font-size:15px;
color:white;
position:relative;
background-color:#2A00AA;
text-align:center;
font-weight:bold;
text-decoration:none;
}

</style>
<body>
<div id="header"><img src="headerGGCC.gif" width="100%" height="155px"/></div>

<div id="navigator">
<a href="index.html"><div id="menu">Home</div></a>
<a href="program.html"><div id="menu">Programmes</div></a>
<a href="duration.html"><div id="menu">Duration</div></a>
<a href="adverts.html"><div id="menu">Adverts</div></a>
<a href="contact.html"><div id="menu">Contact Us</div></a>
</div>
<div id="container">

<div id="leftcontent" style="width:70%;height:100%;float:left;text-decoration:none;background-color:transparent;text-align:justify;font-weight:bold;font-size:15px;padding-left:20px;padding-top:10px;">
<font style="color:red;font-weight:bold;font-size:25px;">Welcome Message</font>
<hr />

You are welcome to the Website of ... a Division ... founded January 2002. Over the years, we have produced students who have been able to apply the knowledge gained in various ways...<br />
<p align="right">Read more</p>
<p>
<font style="color:red;font-weight:bold;font-size:25px;">Our Services</font>
<hr />
Services offered by God's Grace Computers are:
<ul>
<li>Computer Training
<li>Photocopies
<li>Limination
<li>Printing
<li>Website Designing
<li>Biometric Capture
</ul>
Feel free to visit any page on this website to view our contents.

Thank you.
<p>
<div id="new" style="text-decoration:none;padding-left:10px;padding-top:10px;font-size:15px;width:90%;background-color:#2A1FFF;font-size:15px;color:white;font-family:tahoma;padding-right:10px;padding-bottom:5px;text-align:justify;">

<blink>NEW:</blink><br />
<ul>
<li>2012/2013 Jamb Registration is currently in Progress<br />
<li>2013 May/June West Africa Examination Registration in Progress
</ul>
</div>
<hr />
<marquee><img src="fadexadvert.jpg" /></marquee> </p>
</div>

<div id="rightcontent" style="width:25%;height:100%;float:right;border-left-style:ridge; border-left-color:#2A0000;text-decoration:none;background-color:transparent;padding-left:5px;padding-top:5px;">
Join us on: <a href="http://www.facebook.com/dxceller"><img src="facebook.png" alt="fb"></a><a href="http://www.twitter.com/dxceller"><img src="twitter_32.png" alt="twt" /></a><hr />

<div id="bar" style="width:90%;height:50px;background-color:transparent;text-decoration:none;font-weight:bold;font-size:15px;font-family:georgia;">

<font style="color:red;">Check your Results Here:</font>
<hr />
<marquee height="100px" direction="up" behavior="alternate" scrollamount="2" onMouseOver="this.stop();" onMouseOut="this.start();">
WAEC<br />
NECO<br />
NABTEB<br />
JAMB<br />
</marquee>
<font style="color:red;">NEWS:</font>
<hr />
<marquee height="100px" direction="up" behavior="alternate" scrollamount="2" onMouseOver="this.stop();" onMouseOut="this.start();">
Punch<br />
Vanguard<br />
Tribune<br />
BBC<br />
CNN<br />
</marquee>
<hr />
<img src="advert.jpg" width="120" height="100" />
Click Here to place advert(s).<br />

</div>

</div>

</div>
<div id="footer"><br /><sup>&copy;</sup>2013 - ...<sup>&reg;</sup><br />
Designed by FADEX Technologies<br />
Home | Programs | Duration | Adverts | Contact</div>
</body>
</html>

[size=20pt]please, help write the codes for mobile devices[/size]
Re: How Do I Make A Site Fits Any Screen Size Including Mobile. by winexviv: 11:20am On Dec 27, 2012
Sorry man. Your programming approach is poor.

1 Like

Re: How Do I Make A Site Fits Any Screen Size Including Mobile. by Raylight2(m): 1:50pm On Dec 27, 2012
Thanks. just a beginner. I did it by myself.
Re: How Do I Make A Site Fits Any Screen Size Including Mobile. by yawatide(f): 2:15pm On Dec 27, 2012
I have uploaded this and tested it out and not found anything to "scatter" on my samsung galaxy note. Perhaps you will need to show us a screenshot of what you are seeing on your mobile device.

Before you show us anything though, change the units of measurement of your fonts to either EM or %. While you're at it, there are 2 sections in the left column that are "bouncing" up and down. Remove this animation from the site - it is very distracting.

1 Like

Re: How Do I Make A Site Fits Any Screen Size Including Mobile. by Raylight2(m): 2:23pm On Dec 27, 2012
Ok. Thanks. i'll do that. Wat em or % should i give to the fonts?
Re: How Do I Make A Site Fits Any Screen Size Including Mobile. by yawatide(f): 5:59pm On Dec 27, 2012
You'll have to experiment with that. Try 1em, 2em...nem or 100%, 150%...n% and see which works for you. Your aim here is to get it looking the way you want such that if I am on a mobile device, which has less real estate, the fonts scale accordingly.

@winexviv
Since the approach is poor, how about you reply back with how to make it better?
Re: How Do I Make A Site Fits Any Screen Size Including Mobile. by 53cur3m0d3(m): 11:46am On Dec 28, 2012
yawa-ti-de:
I have uploaded this and tested it out and not found anything to "scatter" on my samsung galaxy note. Perhaps you will need to show us a screenshot of what you are seeing on your mobile device.

Before you show us anything though, change the units of measurement of your fonts to either EM or %. While you're at it, there are 2 sections in the left column that are "bouncing" up and down. Remove this animation from the site - it is very distracting.
Constructive posts like ds are wat made me vote U for webmasters Poster of the Year..Thumbs up Sis, hope to work with U someday
Re: How Do I Make A Site Fits Any Screen Size Including Mobile. by winexviv: 12:47pm On Dec 28, 2012
yawa-ti-de:
@winexviv Since the approach is poor, how about you reply back with how to make it better?
It's simple. OHe has to tidy up his codes by putting css files in separate pages and calling them up on the html page. Then for the mobile compatibility he should en-devour to use div and % to make it cross-browser and mobile friendly.
Re: How Do I Make A Site Fits Any Screen Size Including Mobile. by yawatide(f): 1:29pm On Dec 28, 2012
@winexviv
1) Good but how do you know that he didn't include the styles inline because adding a link to a css file would not allow you to see the codes? tongue
2) The English is good but why not follow it up with a coding sample of your own? I am sure you know that when you copy and paste here, it will all show up on a straight line unless you use the "code" element blocks

@53curl
Thanks. Don't get me wrong, as I have grown older, I have become less tolerant of crap but all in all, when the person shows a genuine interest in learning, I remember how I was when I first started and how people used to talk down to me wink

2 Likes

Re: How Do I Make A Site Fits Any Screen Size Including Mobile. by winexviv: 2:10pm On Dec 28, 2012
yawa-ti-de:
@winexviv
1) Good but how do you know that he didn't include the styles inline because adding a link to a css file would not allow you to see the codes? tongue
2) The English is good but why not follow it up with a coding sample of your own? I am sure you know that when you copy and paste here, it will all show up on a straight line unless you use the "code" element blocks
Mere looking at his sample codes you will know its not well structured. But anyway he is still a beginner and i know we made similar mistakes earlier. Maybe he can purchase my html and css video tutor but i can't start writing codes here on nairaland.
Re: How Do I Make A Site Fits Any Screen Size Including Mobile. by Raylight2(m): 3:04pm On Dec 28, 2012
You've all got me confused!
Re: How Do I Make A Site Fits Any Screen Size Including Mobile. by yawatide(f): 6:04pm On Dec 28, 2012
^^^ don't be. Just follow my lines and you should be good to go. Remember, wine gets better with age wink
Re: How Do I Make A Site Fits Any Screen Size Including Mobile. by Raylight2(m): 9:41am On Dec 29, 2012
@yawa-ti-de: thanks
Re: How Do I Make A Site Fits Any Screen Size Including Mobile. by Raylight2(m): 6:56pm On Dec 30, 2012
It seems as if designing a site using tables is easily arranged on mobile devices and different computer resolution than using 'div'. Is it advisable one uses it? Responses pls
Re: How Do I Make A Site Fits Any Screen Size Including Mobile. by yawatide(f): 12:16am On Dec 31, 2012
As the bible says, beware of the straight road, as it leadeth to hell tongue

Tables might be easy and convenient, but it isn't semantic for you to use it for other than presenting tabular data. Stick with DIVs.
Re: How Do I Make A Site Fits Any Screen Size Including Mobile. by Raylight2(m): 9:08am On Dec 31, 2012
Ok. Thank u. Can u pls write a simple code using div that fits mobile and the computer. So i c how it's done. The navigator bar i did overlaps when viewed on mobile with small screens.
Re: How Do I Make A Site Fits Any Screen Size Including Mobile. by yawatide(f): 11:43am On Dec 31, 2012
Use either a mobile library like jquery mobile or, if u do use regular html, make sure the DIVs widths are in %s or EMs. If you consider yourself a pro, take a look at responsive web design and you should be good to go.

good luck!
Re: How Do I Make A Site Fits Any Screen Size Including Mobile. by guru01(m): 12:24pm On Dec 31, 2012
yawa-ti-de:
Remove this animation from the site - it is very distracting.
good luck!
I have noticed you don't like animation on webpages grin
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Blessed International College</title>
</head>
<style type="text/css">
body {
background-color:black;
margin-right:auto;
margin-left:auto;
margin-top:10px;
width:75%;
}
div#header
{
width:100%;
height:155px;
background-color:transparent;
text-decoration:none;
}
div#navigator
{
position:relative;
width:100%;
background-color:#A00;
height:30px;
}
div#menu
{
width:20%;
text-align:center;
font-size:15px;
height:30px;
float:left;
color:#FFDFFF;
font-family:georgia;
font-weight:bold;
}
div:hover
{
background-color:#D41F00;
text-decoration:underline;
}
div#container
{
position:relative;
width:100%;
background-color:white;
text-decoration:none;
color:black;
font-size:15px;
height:660px;
}
div#footer
{
width:100%;
height:80px;
font-size:15px;
color:white;
position:relative;
background-color:#2A00AA;
text-align:center;
font-weight:bold;
text-decoration:none;
}

</style>
Try this:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Blessed International College</title>
<style type="text/css">
body {
background-color:black;
margin-right:auto;
margin-left:auto;
margin-top:10px;
width:75%;
}
div#header
{
width:100%;
height:155px;
background-color:transparent;
text-decoration:none;
}
div#navigator
{
position:relative;
width:100%;
background-color:#A00;
height:30px;
}
div#menu
{
width:20%;
text-align:center;
font-size:15px;
height:30px;
float:left;
color:#FFDFFF;
font-family:georgia;
font-weight:bold;
}
div:hover
{
background-color:#D41F00;
text-decoration:underline;
}
div#container
{
position:relative;
width:100%;
background-color:white;
text-decoration:none;
color:black;
font-size:15px;
height:660px;
}
div#footer
{
width:100%;
height:80px;
font-size:15px;
color:white;
position:relative;
background-color:#2A00AA;
text-align:center;
font-weight:bold;
text-decoration:none;
}

</style>
</head>

Also Dreamweaver CS5 has a device view, change it to mobile and test.
Re: How Do I Make A Site Fits Any Screen Size Including Mobile. by Raylight2(m): 8:42am On Jan 01, 2013
Still d same. Thanks. I'll keep trying till i get wat i wnt.
Re: How Do I Make A Site Fits Any Screen Size Including Mobile. by Raylight2(m): 3:15pm On Jan 01, 2013
I finally got wat I've been trying to get. I just discovered that creating a separate stylesheet makes the site fits mobile devices since they can't interpret css files.

Thanks to you all for your contribution to my question. Especially U!!!
Re: How Do I Make A Site Fits Any Screen Size Including Mobile. by yawatide(f): 6:10pm On Jan 01, 2013
Unless you are on certain models of BB and other phones (nokia?), all smartphones support CSS files. All the same, kudos for solving your own problem. Now, you have accumulated experience that you can take on to the next project(s).
Re: How Do I Make A Site Fits Any Screen Size Including Mobile. by Raylight2(m): 9:24am On Jan 02, 2013
thanks for your contribution.

(1) (2) (Reply)

Become A Hacker With These 20 Tips For Beginners / I've Finally Cracked The Paypal Code (see Pictures) / ***Search Engine Optimization Tutorial Part1 (rank #1 on google in 2weeks)***

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 54
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.