How can I make my web fit perfectly in any smart phone? - javascript

Please take a look at the link with your smart phone, you can see that it's a bit off. I center everything and the web looks fine in Desktop but not in smart phone(I use iPhone 5S). Is there any ways I can make it like the desktop for any kind of smart phone? Is there any ways I can make it look like Gmail app that you can not scroll everywhere?
I have done all the adjustment like the following code in the head tag. But it's not working. Here's the url if you need to look up in Desktop: https://johnny00520.github.io/Test.git.io/
Thank you so much.
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<title>MindScribe</title>
<!--<meta name="description" content="An interactive getting started guide for Brackets.">-->
<!-- Maybe I need. Note that Android and iOS ignore media="handheld"-->
<link rel="stylesheet" media="handheld, only screen and (max-device-width: 320px)" href="phone.css">
<link rel="stylesheet" media="only screen and (min-width: 641px) and (max-width: 800px)" href="ipad.css">
<!-- media="handheld" trick for Windows Mobile -->
<link rel="stylesheet" href="screen.css" media="Screen">
<link rel="stylesheet" href="mobile.css" media="handheld">
<!--smartphone conpatible-->
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes" />
<!-- Home screen icon -->
<link rel="apple-touch-icon" href="/static/images/identity/HTML5_Badge_64.png" />
<link rel="apple-touch-icon-precomposed" href="/static/images/identity/HTML5_Badge_64.png" />
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/main.css">

Try the following:
Add to body the following CSS properties:
box-sizing: border-box;
overflow: hidden;
margin: 0;
padding: 0;
box-sizng - The width and height properties (and min/max properties) includes content, padding and border, but not the margin.
overflow - to prevent the scrolling.
padding & margin resets just to clean up any extra space generated by the browser.
This will push your #cursive title up a bit, but you can bring it down with let's say (tweak to your benefit):
margin: 4em 0 1em;
You may chose to add the above inside a #media query for mobile viewport only or not, could be something like (tweak value to your benefit):
#media (max-width: 768px) {
body {
box-sizing: border-box;
overflow: hidden;
margin: 0;
padding: 0;
/* etc */
}
}

Related

My html site is not displaying in mobile devices

I am using the following CSS link code on my site:
<link rel="stylesheet" href="index_files/front.css" media="all" type="text/css" >
and also the following code
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
<meta http-equiv="cleartype" content="on">
Here is my site links - http://www.etutorbd.com/shopi/. It's displaying properly in desktop browser but It's not displaying in mobile browser. I have checked in my android phone. I have found this answered My phone is not displaying the mobile oriented version of my site but It's not working for me. I didn't found any console error. I had a problems like "Error: Failed to execute 'send' on 'XMLHttpRequest' ". But I have fixed that. What am I doing wrong here? Is there any jQuery or CSS media type issues.
You have to remove this from your HTML body:
overflow: hidden; height: 100%; font-size: 81.44%;
if you really need it, add it to your CSS and then use media-queries to disable it on mobile sizes
EDIT with code:
body{overflow:hidden /*use it only if needed, otherwise remove it */}
#media(max-width:768px){
body{overflow: auto; height: 100%; font-size: 81.44% /* change if needed */;}
}

How to run in full screen on start?

http://www.wimpyplayer.com/
Was searching in the docs, but did not find how to run in full screen. Anyone maybe knows it?
Or where is the new version of skin machine for that player? When I enter to Google, I only find some old which is for Rave, I assume its for old version of the player. But I saw one online editor for new version, which I can't find.
I would then just remove panel of buttons, and set the size of the player with setSize() function.
Skin machine found, from browser history. Google does not find it even when it looks like I use exact keywords http://www.wimpyplayer.com/skinmachine/
In the download ZIP there is a folder named "test" which includes this file:
"option-responsive-size-fullscreen.html"
... which you can use as a reference.
The trick is to use the "data-responsive" option to get wimpy to expand into the size of the page as defined in the CSS.
This is a cleaned-up version o the HTML needed to run in fullscreen:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Wimpy Player - Fullscreen</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!-- The following META tags are used to inform mobile-device browsers to present this page in full-screen mode.-->
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-title" content="Wimpy Player" />
<style type="text/css" media="screen">
/* Make page fill device window */
html, body {
width : 100%;
height : 100%;
margin:0;
padding:0;
overflow:hidden;
background-color:#484848;
}
/* For the Player Instance DIV */
.full {
left:0px;
top:0px;
width : 100%;
height : 100%;
}
</style>
<!-- Prevent entire page from "bouncing" -->
<script>document.addEventListener('touchmove',function(event){event.preventDefault();},false);</script>
<!-- Wimpy Engine -->
<!-- NOTE: Change WIMPY_INSTALLATION_FOLDER to target the wimpy.js file correctly. -->
<script src="WIMPY_INSTALLATION_FOLDER/wimpy.js"></script>
</head>
<body>
<!-- Set the DIV's class to "full" and set the "responsive" option
so the player automatically adjusts to fit snuggly within the view.
The responsive option also causes the player to adjust itself when
the orientation changes (e.g. from landscape to portrate) -->
<!-- NOTE: Change data-media to target media files or a playlist. -->
<div class="full" data-wimpyPlayer data-responsive data-media="song1.mp3|song2.mp3|song3.mp3"></div>
</body>
</html>
UPDATE:
This page on wimpyplayer.com that explains this as well.

Blue Menu does not appear during Pop Up in Chrome

On our company website http://exciga.com/Services.php# when one clicks on any of the services on the right hand side (ex: the IT Governance image), a Window Pops Up with information regarding IT Governance along with a Blue Menu on the left hand side. This Blue Menu can be seen in IE 10 but not in Chrome. Please help as I cant figure out what I have done wrong :-)
The 2nd issue I face is in the Service Lists. When I click on the list of Services (ex: the "+"sign near IT Governance), I get a list of services related to it. As you can see the fonts are different here. I am unable to place the same font as in the Service List header ("IT Governance"). If I try making a change, the font for the entire webpage changes. I want the font in the drop down list to be the same as the one in the Service List header ÏT Governance +" Hope I was clear for u guys.
Finally, what is the syntax to ensure that the size of an object does not change if I Zoom in and out in a browser.
The blue menu is actually present in Chrome. It's just that it's getting hidden by the pop up window's size: <div class="popupbox3_pm" id="popuprel3" style="display: block; margin-top: -355px; margin-left: -380px;">, which is its parent element. Because this <div> has position: fixed; and a set width/height, anything outside of its dimensions gets cut.
I'm not quite sure why the z-index: 999 on the blue menu is not setting it above the black space around it though. That might have to do with the placement of the element in the HTML. Also, it should have a higher z-element than the black fade box, which has z-index: 9999;.
First fix <head> section, you have included multiple jQuery libraries, if your plugins can work with latest jQuery (you should test it) then I suggest you to download jQuery 1.10.2 put it in your js folder and replace <script src="js/jquery-1.6.js" ></script> with <script src="js/jquery-1.10.2.min.js"></script>.
Now replace your <head> element with this new one and I wish you luck ;) P.S. I don't say that this will fix the problem you have.
<head>
<title>Exciga</title>
<meta charset="utf-8">
<meta name="description" content="Write short description of your site here.">
<meta name="keywords" content="write, site, keywords, here, like, this, comma, delimited">
<meta name="author" content="Name of the site author">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/style2.css"> <!-- Why style2.css ? Is this another style for entire site or you could merge style.css with style2.css ? -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/hover/style_common.css">
<link rel="stylesheet" href="css/hover/style2.css">
<link rel="stylesheet" href="css/jquery.akordeon.css">
<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="popup/style.css">
<link rel="stylesheet" href="assets/application-d7d505356b55e600106ef945bd484e9f.css">
<script src="js/jquery-1.6.js"></script>
<!-- These scripts you can/should put just before the </body> tag, if after that some elements lose functionality then put that script again in the <head> section -->
<script src="js/atooltip.jquery.js"></script>
<script src="js/jquery.akordeon.js"></script>
<script src="js/cufon-yui.js"></script>
<script src="js/cufon-replace.js"></script>
<script src="js/Vegur_300.font.js"></script>
<script src="js/PT_Sans_700.font.js"></script>
<script src="js/PT_Sans_400.font.js"></script>
<script src="popup/custom.js"></script>
<script src="assets/application-aa8aaa30c70f4a42013dec916e9b29b0.js"></script>
<script>
$(function() {
$('#buttons').akordeon();
$('#button-less').akordeon({ buttons: false, toggle: true, itemsOrder: [0, 1,2,3,4,5,6,7] });
});
</script>
<!-- End of scripts -->
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5.js"></script>
<link rel="stylesheet" href="css/ie.css" type="text/css" media="all">
<![endif]-->
<!--[if lt IE 7]>
<div style="clear: both; text-align:center; position: relative;">
<a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
<img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
</a>
</div>
<![endif]-->
</head>
Update: About font-family for the Service Lists open style.css and insert code below then change font family and size in accordance with your desires.
.responsive,
.responsive-half {
font-family: Verdana !important;
font-size: 16px !important;
}

Twitter bootstrap on Node.js and Express

How can I use Twitter Bootstrap on Node.js and Express?
I know I have to put CSS and Javascript files in ./public directory (if it's set default). But when I look for how to use Twitter Bootstrap on Node.js and Express, I get to know there are many variants on using Twitter Bootstrap.
For example, just put bootstrap CSS and JS files in appropriate directories, or specify :
<link rel='stylesheet' href='assets/css/bootstrap-responsive.css'>
<link rel='stylesheet' href='https://d396qusza40orc.cloudfront.net/startup%2Fcode%2Fbootstrap.js'>
etc, and also there are two sources, normal and .min.css file, each with CSS and JS. So how can I serve the appropriate Bootstrap file in Node.js and Express?
Here's a first few lines of my current code (is it necessary?), which is not working with responsive design (it doesn't stack vertically when I narrow the screen to mimic the size of smartphones, and instead just scale down the size with each ratio being the same).
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title><%= title %></title>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<link rel='stylesheet' href='/stylesheets/bootstrap.min.css'>
<link rel='stylesheet' href='assets/css/bootstrap-responsive.css'>
<script src='/javascripts/jquery-2.0.2.min.js'></script>
<style type='text/css'>
/* Large desktop */
#media (min-width: 980px) {
body {
padding-top: 60px;
}
}
/* smartphones */
#media (max-width: 480px) {
body {
padding-top: 30px;
}
}
</style>
</head>
Create one sub folder in public folder and name it as stylesheets.Then put all your twiter bootstraper css files in that stylesheets folder.Then you can link the file like below.Follow the same for js files also.
<link rel='stylesheet' href='stylesheets/bootstrap.min.css'>
<link rel='stylesheet' href='stylesheets/bootstrap-responsive.css'>
<script src='javascripts/jquery-2.0.2.min.js'></script>
Create a folder like .\public\js\lib\bootstrap and in bootstrap folder keep the two files bootstrap-combined.min.css and bootstrap.js whic you can get from bootstrap repository the in the ./views/index.html page include those files as
<link href="/js/lib/bootstrap/bootstrap-combined.min.css" rel="stylesheet">
<script src="/js/lib/bootstrap/bootstrap.js"></script>
it should now work for you....

Responsive Site Not Working In IE (Despite css3-mediaqueries.js)

I'm creating a Responsive Website but cannot seem to get it to work in IE (I'm testing in IE8). Now, I know that Internet Explorer 8 and below doesn't support CSS3 media queries. But I included the css3-mediaqueries.js Javascript file (hosted by Google) and it still doesn't work.
I stripped out all the code leaving the very minimum (literally only 26 lines of HTML and a combined 34 lines of CSS). The HTML successfully validates as HTML5 and the CSS validates as CSS level 3. Here's the code:
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />
<title>Responsive Site</title>
<link rel="stylesheet" type="text/css" href="css/custom.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width: 800px)" href="css/responsive.css" />
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- css3-mediaqueries.js for IE less than 9 -->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</head>
<body>
<div class="wrapper">
<div id="article"> </div>
<div id="side"> </div>
</div>
</body>
</html>
custom.css:
#charset "UTF-8";
/*html5 display rule*/
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {display: block;}
body {margin: 0px; padding:0px}
.wrapper {
width:78%;
margin:0 auto}
#article {
float:left;
width:61.224489795%;
margin:20px 0 0 0;
padding:0;
height:500px;
background-color:#000}
#side {
float:right;
width:30.775510204%;
margin:20px 0 0 0;
padding:0;
height:500px;
background-color:#999}
responsive.css:
#charset "UTF-8";
#article {
width:100%}
#side {
width:100%;
clear:left}
In addition to the inability to use #imported stylesheets (which is documented on the github and google code project) - there is a problem if one does not explicitly state the media query in a format similar to:
#media screen and (min-width: 666px) and (max-width: 1000px)
compared to:
#media and (min-width: 666px) and (max-width: 1000px)
please look at this issue in the github issues section for this project - after about an hour of trying to set this up - the lack of screen in my media-queries was causing them to not be recognized.
I finally figured it out! And only a few lines of code had to change.
A friend pointed out that the documentation for the css3-mediaqueries.js Javascript file reads:
Note: Doesn't work on #import'ed stylesheets (which you shouldn't use
anyway for performance reasons). Also won't listen to the media
attribute of the and elements.
I was using the media attribute in the link element in my HTML file. So, here's what I did to resolve the issue:
In the HTML file I removed:
<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width: 800px)" href="css/responsive.css" />
And replaced it with:
<link rel="stylesheet" type="text/css" href="css/responsive.css" />
I then added the media attribute to my responsive.css file:
#charset "UTF-8";
#media screen and (max-width: 800px) {
#article {
width:100%}
#side {
width:100%;
clear:left}
}
But it still didn't work. I then changed the ordering of the media and #charset attributes in my responsive.css file. I simply rearranged lines 1 & 2:
#media screen and (max-width: 800px) {
#charset "UTF-8";
That did the trick. Not sure exactly why the ordering of the character set makes a difference? Perhaps someone can shed some light on it.
Thanks David for the useful suggestions! It's good to have several option in the tool shed and I may turn to respond.js in the future. But for now, I am happy with the code that Google is hosting.
Have you tried respond.js ?
Good luck!
Update
It may be safer to combine your two CSS files into one. Add the mobile specs into your custom.css file with:
#media (min-width: 50px) and (max-width: 800px) {
/* mobile CSS here */
} /* close # media for mobile */
<meta http-equiv="X-UA-Compatible" content="IE=9">
You must place that before any other meta tags.

Categories