Need help converting template to mobile browser template.

I need little help converting this attached template file to a template which can be used in mobile browsers also.

All I need is 2 things,
1. proper font sizes so users need not zoom to read on mobiles,
If its possible, font adjusts automatically on laptop screens and does not appears too large.
What font size settings should I use?

2. and the design stretches from left to right automatically so that I can make use of available space.
I do not want the webpage to go beyond horizontal screen width...
Just fits from left to right automatically.

Will it be possible to use this same template on mobile browsers and also on laptop browsers?

Kindly suggest changes I need to make in the attached template file.

Thanks

 

@deathshadow has written on the subject of responsive pages. A quick search in this forum should provide everything you need to know.

 

Hi,
I can't seem to find the articles you mentioned.
Most of @deathshadow posts I found are about maintaining HTML structure.

I am thinking that my template is pretty much fluid in design, but my major problem is font sizes.
How do I set a font size so that its comfortable for both mobile users and for laptop users?

Thanks

 

That is typically because your HTML structure should help define your layout. Content dictates markup, content + markup dictate layout, NOT the other way around.

Which is why all that static JS and static CSS has zero blasted business in your markup, much less the mentally enfeebled style="" attribute trash.

Even during the development stages, I advise AGAINST using the <style> attribute. 1) such CSS has ZERO business in the HTML on deployment, 2) it's easier to work with two editor windows side-by-side so you can refer to the markup you are styling, than it is to constantly and pointlessly be scrolling up and down.

Rule of thumb, 99% of the time you see style="" and 100% of the time you see <style>, you're looking at it being done wrong in a "3i" sort of way. 3i == ignorance, incompetence, and ineptitude. That's usually not on the person doing it, so much as whoever they copied the methodology from... or whoever they copied it from... or who it was originally copied from. This is why "blind copypasta" of most outdated tutorial code is such trash, much less the derpitude that are frameworks.

Anywhere from small font 14-16px equivalent in EM (0.85 to 1em) is sufficient so long as you use EM and not PX. Hence why this:

body{ margin: 0px; padding: 0px; font-size: 16px; font-family: tahoma, arial, Lucida Grande, Verdana; background: rgba( 255, 255, 255, 1 ); color: rgba( 0, 0, 7, 1 ); }

h1{ font-size: 18px; font-weight: normal; }
h2, h3{ font-size: 16px; font-weight: normal; }
h4{ font-size: 14px; font-weight: normal; }
h5, h6{ font-size: 12px; font-weight: normal; }

Code (markup):

Is ignorant trash that's useless to me as a "IBM 8514 / windows 9x to XP Large font / 120dpi / 125% / Windows Vista and later Medium / Pick a huffing name already" font user without diving for the zoom.

It's called EM, use 'em! For anything and everything you think you can get away with. Only time to drop to PX might be the occasional border-width, static images that don't scale well, and once and a while it might help with text-shadow. Other than that, EVERYTHING should be done in EM. Saying "px" font-size on most anything is telling users with accessibility needs to sod off!

But then the mere presence of <center> likely means the entire mess needs to be tossed in the trash, but it's hard to say without a live page with the apparent "AJAX for nothing", JS for nothing, blocking scripts in the HEAD, run-on sentences masquerading as menus, lack of closing </p> that haven't been optional since 1997, etc, etc. That it appears to be a XHTML 4.01 TRANSITIONAL document with a HTML 5 doctype slapped atop it really making the whole thing a mess.

The incomplete viewport meta also likely causing issues. I would suggest:

<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

Code (markup):

The lack of initial-scale means mobile can screw with your font-sizes however they like, and that tends to be a complete disaster if you're actually trying to design for mobile.

Oh, and it's just "copyright", not "copyright copyright" ... use the symbol OR the word, not both!

Hence for what you have so far, at least in terms of what's working, there is ZERO reason for the HTML to be much more than:

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<meta
	name="viewport"
	content="width=device-width,height=device-height,initials-scale=1"
>
<link
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
>
<title>This is title</title>
</head><body>

<div id="top">
	<h1>Company name</h1>
	<ul>
		<li><a href="#">Link one</a></li>
		<li><a href="#"> Link two </a></li>
		<li><a href="#"> Link three </a></li>
	</ul><ul>
		<li><a href=""> Link one </a></li>
		<li><a href=""> Link two </a></li>
		<li><a href=""> Link three </a></li>
	</ul>
<!-- #top --></div>

<div id="content">
	<p>
		This is main content This is main content This is main content This is main content This is main content This is main content This is main content This is main content This is main content This is main content This is main content This is main content This is main content This is main content
	</p><p> 
		This is main content This is main content This is main content This is main content This is main content This is main content This is main content This is main content This is main content This is main content This is main content This is main content This is main content This is main content 
	</p><p>
		This is main content This is main content This is main content This is main content This is main content This is main content This is main content This is main content This is main content This is main content This is main content This is main content This is main content This is main content 
	</p><p>
		This is main content This is main content This is main content This is main content This is main content This is main content This is main content This is main content This is main content This is main content This is main content This is main content This is main content This is main content 
	</p>
<!-- #content --></div>

<div id="footer">
	<hr><!-- since you have no heading -->
	[FOOT] &copy; DOMAIN 2019,  All rights reserved 
</div>

</body></html>

Code (markup):

With CSS more like this, axing all the properties that right now do nothing.

/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,dl,dt,dd,
table,tr,td,th,p,img {
	margin:0;
	padding:0;
}

img, fieldset {
	border:none;
}

* {
	box-sizing:border-box;
}

hr {
	display:none;
	/*
		HR in my code are for semantic breaks in topic/section, NOT
		style/presenation, so hide them from screen.css users
	*/
}

@media (max-width:480px) {
	/* Fix for pre "viewport <meta>" mobile browsers */
	* {
		-webkit-text-size-adjust:none;
		-ms-text-size-adjust:none;
	}
}

html {
	height:100%;
}

body, button, input, table, textarea, select {
	font:normal 1em/1.5em tahoma,helvetica,sans-serif;
}

body {
	min-height:100%;
	display:flex;
	flex-direction:column;
}

#top, #footer {
	flex:0 0 auto;
}

#content {
	flex:1 0 auto;
}

h1 {
	padding:0.889em 1.778em;
	font:normal 1.125em/1.33em tahoma,helvetica,sans-serif;
}

#top ul {
	list-style:none;
	text-align:center;
	background:#2AE;
	margin-bottom:2px;
}

#top ul + ul {
	background:#1FE;
}

#top li {
	display:inline;
}

#top ul a {
	display:inline-block;
	padding:0.33em 0.66em;
	text-decoration:none;
	font-weight:bold;
	color:#FFF;
}

#top ul + ul a {
	color:#000;
}

#top ul a:focus,
#top ul a:hover {
	color:#FFF;
	background:#000;
}

#content {
	max-width:48em;
	margin:0 auto;
	padding:2em 2em 1em;
}

#content p {
	padding-bottom:1em;
}

#footer {
	text-align:center;
	margin:0 2em;
	padding:1em 0;
	border-top:2px solid #000;
}

@media (max-width:32em) {
	h1 {
		padding:0.889em;
	}
	#content {
		padding:1em 1em 0;
	}
	#footer {
		margin:1em 0;
	}
}

Code (markup):

Live demo here:

https://cutcodedown.com/for_others/Jeet/

I would consider wrapping the two UL in a div so that they could be turned into a modal-style menu for mobile devices when the screen is small enough for them to wrap. I'd also question if those two menus are actually separate menus semantically, despite their colouration.

As is though, to be usable on mobile all it really needed was a decrease to the padding, and to make it less of a "screw you" to really large screens some max-widths so long paragraphs won't become hard to follow.

About what you're looking to do?

 

@deathshadow
Thankyou so much for the help I will surely start using em font from here on and will also keep other points made by you in mind.

The 2 menus are separate. First one is for website's main navigation to access different sections of the website.
Second one is mostly user options like login/logout, edit profile, etc.

The other CSS like .div1, .div2 etc are to be used when outputting different things pulled out of database.

Once again, I'm very greatful to you for taking the time to fix my code, and for setting things straight so that I won't have problems in future as well!

I have one question though.
In the content section of CSS, there is this

content{ max-width:48em; }

Code (markup):

And when I am opening the template in browser, the text inside content is wrapping near about half my screen. Rest of the screen towards right side is empty.
When I change it to:

content{ max-width: 100em; }

Code (markup):

then its ok.
Is this setting suitable for mobile browsers? Or will this mess up things on mobiles?

Is there a particular reason why we are setting it to 48em?


Once again, Your help is really deeply appreciated, many many many thanks