Jump to content

making page resize to viewer's screen?


keytoneIam

Recommended Posts

Hi again everyone!

I am trying to find out where to look to find out how to make my pages adjust to the viewer's screen size. Everyone has different screen-sizes and they all have mobile phones too. I thought I knew how to do it, but I seem to have lost some gray matter along life's road.

If you can help with advice, I will be eternally grateful.

John :facepalm:

Link to comment
Share on other sites

Detecting device screen size is a bad idea. Look up responsive design, the technique of making pages flexible.

 

In general, use percentage widths instead of pixels and use media queries to rearrange elements on screens that are too small to have elements side by side.

Link to comment
Share on other sites

Thanks a Million!

That is exactly what I needed! And it can be done using only HTML and CSS. This is great! Thank you again,

John :)

sorry but this is what you are looking for-

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

add the above line to your <head> section. The page will adjust when you resize.

Edited by silversquid
Link to comment
Share on other sites

Well... I'm beginning to think that I'm just so far "out there" that I'd be pulling my hair out if I had any.

I've been trying everything I can find on making my background image fit the screen fully and not go over the screen or under the screen size. ( responsive design ) It may be time for basket-weaving!

At any rate, here is the mess that I'm trying to un-tangle.

( does the size of the image I'm using mean anything? )

As I said, I'm beginning to "lose it".

If you can tell me where to find the answer, that would be a true gift!

John :facepalm:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<title>JD's Web Market</title>
<head>
<meta charset="UTF-8">
<meta name="description" content="forthcoming, undetermined">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Multiple Combined Authors">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<style>
body { background-image: url('bg_images/pexels1.jpg');
background-repeat: no-repeat;
{
</style>
<link rel="stylesheet" type="text/css" href="splitmenubuttons.css" />
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script src="splitmenubuttons.js">
/* Split Menu Buttons: created: Aug 8th, 2012 by DynamicDrive.com. This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/
</script>
<script>
jQuery(function(){ // on document load
$('a[data-showmenu]').splitmenubuttonMenu() // Add split button menu to links with "data-showmenu" attr
})
</script>
</head>
<body>
<!-- Sample Menu buttons markup --!>
<center>
<div>
<a href="#" data-showmenu="dropmenu1" data-menucolors="dark red,green" class="splitmenubutton">Office</a>
Link to comment
Share on other sites

I don't know if this is partial code what but you have missing closing tags for div, body, html and the center tag which is not used anymore. Transitional doctype is old too, use html5 doctype, you have title outside head element when it should be within, and lastly two meta tags of name 'viewport' when there should be only one.

 

I suggest you learn basics of doctype and the correct layout of the main elements that make up a html document, and learn to validate using w3c validator.

Edited by dsonesuk
Link to comment
Share on other sites

Oh, no. Your page is very out of date. Drop the HTML 4.01 Transitional DOCTYPE. Here's an HTML 5 template:

<!DOCTYPE html>
<html>
  <head>
    <title>Website title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheeet" href="style.css">
  </head>
  <body>
    Page content goes here
  </body>
</html>

You should have a CSS file to style the page. Read about CSS here: http://www.w3schools.com/css/default.asp

Tags like <center> and <font> don't exist, attributes such as bgcolor and align don't exist. CSS takes care of all of that.

 

For a solution to your immediate query, you can use the background-size property. Setting it to "cover" or "contain" will work. Read about the background-size property here: http://www.w3schools.com/cssref/css3_pr_background-size.asp

Link to comment
Share on other sites

OK! I am going to give up and go back to the starting point and assume that everything that I thought I knew is either out-dated or invalid.

I reckon it's just what I need instead of confusing myself with bit's and pieces, not knowing for sure how they work and what I'm doing.

It's humbling, but I'm wasting my time and yours.

Thank you very much for the advice you've freely given me and showing me that I need understand the basics before I can just "copy code online and try to alter it myself" without knowing what it is doing!

I'm sure that I'll wind up asking for advice again at sometime in the future, though.

I'm beginning right here...http://www.w3schools.com/html/default.asp

Thanks again for pointing me in the right direction, that's what I asked for!

John :fool::D

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...