keytoneIam Posted January 6, 2017 Share Posted January 6, 2017 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 Link to comment Share on other sites More sharing options...
Ingolme Posted January 6, 2017 Share Posted January 6, 2017 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 More sharing options...
keytoneIam Posted January 6, 2017 Author Share Posted January 6, 2017 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 Link to comment Share on other sites More sharing options...
silversquid Posted January 7, 2017 Share Posted January 7, 2017 (edited) 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 January 7, 2017 by silversquid Link to comment Share on other sites More sharing options...
Ingolme Posted January 8, 2017 Share Posted January 8, 2017 That's just one of the elements necessary for responsive design. It alone won't solve everything. Link to comment Share on other sites More sharing options...
keytoneIam Posted January 8, 2017 Author Share Posted January 8, 2017 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 <!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 More sharing options...
dsonesuk Posted January 8, 2017 Share Posted January 8, 2017 (edited) 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 January 8, 2017 by dsonesuk Link to comment Share on other sites More sharing options...
Ingolme Posted January 8, 2017 Share Posted January 8, 2017 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 More sharing options...
dsonesuk Posted January 8, 2017 Share Posted January 8, 2017 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 Which is discussed here in your topic http://w3schools.invisionzone.com/index.php?showtopic=56315&hl= Link to comment Share on other sites More sharing options...
keytoneIam Posted January 8, 2017 Author Share Posted January 8, 2017 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 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now