I created CSS mobile menu on my site and it works fine on my laptop. When i minimize browser on laptop under 680px default menu became mobile menu, but on smartphone don't work like that it stay default menu. What did I do wrong?
/* CSS Document */
body{
font-family: 'Prompt', Sans-serif;
background-image: url(wallpaper.png);
background-color:#ECCB6C;
background-repeat: no-repeat;
background-attachment: fixed;
margin: 0;
padding: 0;
text-align: center;
}
header{
background-image:url(logo.png);
background-repeat:no-repeat;
background-position:bottom left;
width:60%;
height:220px;
margin:0 auto;
padding:0;
}
nav{
width:70%;
height:auto;
margin:0 auto 3px auto;
background-image:url(hfbkg.png);
padding:0 80px 0 80px;
}
nav ul{
overflow:hidden;
padding:0;
text-align:center;
margin:0;
transition:max-height 0.4s;
-webkit-transition:max-height 0.4s;
-ms-transition:max-height 0.4s;
-moz-transition:max-height 0.4s;
-o-transition:max-height 0.4s;
}
nav ul li{
display:inline-block;
padding:5px 7px;
}
nav ul li:hover{
background-color:#FFFFFF;
}
.handle {
width:100%;
text-align:left;
box-sizing:border-box;
padding:15px 10px;
cursor:pointer;
color:#FFFFFF;
display:none;
}
#media screen and (max-width: 680px){
nav ul{
max-height:0;
}
.showing{
max-height:20em;
}
nav ul li{
box-sizing:border-box;
width: 100%;
padding:15px 0px;
margin:0;
text-align:left;
}
.handle{
display:block;
}
}
#media (max-width:680px){
#kontakt{
width:100%;
}
#iframe{
width:100%;
}
}
section{
width:70%;
height:auto;
background-image:url(textbkg.png);
line-height:1.5em;
font-size:1.1em;
padding:60px 80px;
margin:0 auto;
clear:both;
}
section a:link {
color:#000000;
}
section a:hover {
text-decoration: none;
color:#FFAE00;
}
section a:visited {
text-decoration: none;
color:#000000;
}
#textarea{
width:350px;
height:200px;
padding:2px;
margin:5px;
}
#ime{
width:350px;
height:20px;
padding:2px;
margin:5px;
}
#email{
width:350px;
height:20px;
padding:2px;
margin:5px;
}
#decoupauge img{
margin:1%;
border: thick solid;
with: 15px;
color: #353439;
padding:2px;
}
#ukrasi img{
margin:1%;
border: thick solid;
with: 15px;
color: #353439;
padding:2px;
}
#sponzori{
margin:5%;
align-content:center;
}
#kontaktobr{
width:400px;
height:auto;
margin:20px 0;
padding:10px;
float:left;
}
#iframe{
float:right;
margin:20px 0;
padding:10px;
}
#adresa { /* pošto su iframe i kontakt obrazac u floatu u adresi ne smije biti float zato što adresa razvlači section background do footera */
width:410px;
height:auto;
margin:10px;
padding:20px;
}
#adresa p {
margin:0px;
padding:0;
}
#adresa a:link{
color:#000000;
text-decoration: none;
}
#adresa a:hover{
text-decoration: none;
color:#FFAE00;
}
footer{
width:70%;
height:auto;
margin:3px auto 0 auto;
background-image:url(hfbkg.png);
padding:5px 80px;
text-align:end;
color:#FFFFFF;
clear:both;
}
footer a:hover{
color:#FBEE9A;
}
a{
margin:0;
}
a:link {
color: #FFFFFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color:#FFFFFF;
}
a:hover {
text-decoration: none;
color:#363539;
}
a:active {
text-decoration: none;
color: #363539;
}
p{
text-align:justify;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Index</title>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Prompt" rel="stylesheet">
<style type="text/css">
body,td,th {
font-family: Prompt, Sans-serif;
}
</style>
</head>
<body background="wallpaper.png">
<header>
</header>
<nav>
<ul>
<li>Početna</li>
<li>Terapije</li>
<li>Glerija</li>
<li>Donacije</li>
<li>Linkovi</li>
<li>Kontakt</li>
</ul>
<div class="handle">Menu</div>
</nav>
<section>
<h3><strong>O nama</strong></h3>
<p> Udruga je počela sa radom 2013. godine..</p>
</section>
<script>
$('.handle').on('click', function(){
$('nav ul').toggleClass('showing');
});
</script>
<footer>
<a>Copyright 2016</a>
</footer>
</body>
</html>
You didn't define a viewport?
It needs a meta tag in the <head> to work:
<meta name="viewport" content="width=device-width, initial-scale=1" />
Related
I'm working on a little project and I am making an admin panel. I have a tiny problem with my markup. I am trying to divide my page into 2 columns: left - admin panel, right contains navigation bar and content itself. The problem is that my content is expanding too much and becomes bigger than the html tag and that's causing my 2 columns to be uneven height. How can I fix it?
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
{{ stylesheet_link ('css/admin.css')}}
</head>
<body>
<div class="container">
<div class="admin-panel">
<h4>Navigation</h4>
<ul>
<li>
Dashboard
</li>
<li>
Email
</li>
<li>
Pages
</li>
<li>
Tables
</li>
</ul>
</div>
<div class="wrapper">
<div class="admin-navbar">
<ul>
<?= Tag::form(array('admin/search','method'=>
'GET')) ;?>
<?= Tag::textField(array('search', 'maxlength'=>
'30'));?>
<?= Tag::submitButton('Search');?>
<?= Tag::endForm(); ?>
<li>
Profile
<ul>
<li>
My Profile
</li>
<li>
Account Settings
</li>
<li>
Logout
</li>
</ul>
</li>
<li>
Home
</li>
</ul>
</div>
<div class="content">
<h2 id="dashboard" class="header">Dashboard</h2>
{{ content()}}
<h2 id="email">Email</h2>
</div>
</div>
<div class="clear"></div>
</div>
</body>
</html>
and css:
EDITED:
html, body {
margin:0;
padding:0;
height:100%;
}
body {
background: #eee;
}
.container {
position: relative;
}
.admin-panel, .wrapper {
float:left;
height:100%;
}
.wrapper {
margin:0;
width:1100px;
height:auto;
float:left;
}
.admin-navbar {
background: #222;
height:50px;
box-sizing: border-box;
-mozilla-box-sizing: border-box;
-webkit-box-sizing: border-box;
border-bottom:2px solid #000;
}
.admin-navbar ul {
height:50px;
line-height: 50px;
margin:0 auto;
padding:0;
}
ul li {
display: inline-block;
margin:0;
padding:0;
}
.admin-navbar ul li {
float:right;
}
.admin-navbar>ul>li>a {
display: block;
text-align: center;
color:#fff;
padding:0 5px;
width:140px;
}
.admin-navbar ul li a:hover {
background:#282828;
}
.admin-navbar ul li ul {
display: none;
position: absolute;
top:50px;
padding:5px;
background: #333;
width:140px;
right:0;
height: auto;
}
.admin-navbar ul li ul li {
margin:0;
padding:0;
display: block;
float:left;
width:100%;
}
.admin-navbar ul li ul li a{
display: block;
width:100%;
text-align: center;
line-height: 30px;
border-radius: 2px;
}
.admin-navbar ul li ul li a:hover{
background: #228856;
}
.admin-navbar ul li:hover ul {
display: block;
}
.admin-navbar form {
display: inline-block;
}
.admin-navbar form input {
margin:0;
padding:0;
height:30px;
}
.admin-navbar form input[type="text"] {
border:none;
width:200px;
}
.admin-navbar form input[type="submit"] {
background:#fff;
border:none;
width:70px;
color:#000;
}
.admin-navbar form input[type="submit"]:hover {
background: #285;
color:#fff;
cursor: pointer;
}
.admin-panel {
background: #222;
width:219px;
padding:20px 15px;
margin:0;
height:100%;
float:left;
}
.admin-panel h4 {
padding:0;
margin:0;
color:#fff;
}
.admin-panel ul {
margin:0;
margin-top:30px;
padding:0;
}
.admin-panel ul li {
display: block;
list-style-type: none;
margin-bottom:5px;
border-radius:5px;
}
.admin-panel ul li a {
display: block;
padding-top:10px;
line-height: 15px;
padding-left:20px;
padding-bottom:10px;
background: #333;
border-radius: 5px;
height:15px;
}
.admin-panel ul li a:hover {
background: #fff;
color:#111;
}
ul li a.active-item {
background: #285;
border-radius: 5px;
}
.content {
padding:10px;
}
.clear {
clear:both;
}
.header {
background: #fff;
}
a {
color:#fff;
text-decoration: none;
}
h1,h2,h3,h4,h5,h6 {
padding:0;
margin:0;
text-align: center;
}
h2 {
color:#111;
}
table {
padding:0;
border-spacing: 0;
background: #fff;
width:100%;
}
table tr {
margin:0;
padding:0;
background: #333;
}
table tr td {
color:#fff;
}
table tr a {
color:#fff;
display: inline-block;
}
table tr a:hover {
text-decoration: underline;
}
table tr td, table tr th {
border:1px solid #1d2939;
text-align: center;
}
table tr:hover {
background: #285;
}
table tr th {
background:#418bca;
}
ALL YOU NEED: for a good start
LIVE DEMO
*{margin:0; padding:0;} /* Ugly reset */
html, body {
height:100%;
background: #555; /* to fulfill page background */
}
/*admin*/
.admin-panel {
position:absolute; /* to make it height 100% */
height:100%;
width:219px;
background: #222;
}
.admin-content{ /* added in order to add inner paddings */
padding:20px 15px;
}
/*page*/
.wrapper {
margin-left:219px; /* admin width */
}
.admin-navbar, .content{
padding:20px 15px;
}
So all you need are 2 main containers, the ADMIN panel on the left and WRAPPER on the right.
Don't use floats or you'll mess it all up, set a width for ADMIN, and leave the browser decide for WRAPPER. Move WRAPPER to the ADMIN's right using margin-left.
Regarding the paddings, if you set paddings to i.e. ADMIN, you'll overflow the BODY height, so we need to use for both some inner containers to whom we'll apply the desired padding spaces.
I'm trying to create a horizontal menu with the width of the parent div and where the links are arranged in equal distances. Target is to create a navigation bar with a width of 900px. Maybe it is possible to realize it on another way? I'm a newbie in css and don't know how to fix my problem and hope you could help me!
#nav {
background:red;
width:900px;
}
ul#nav-bar, ul#nav-bar ul{
margin:0;
list-style:none;
padding:0;
background: white;
border: 1px solid black;
}
ul#nav-bar ul{
display:none;
position:absolute;
left:0;
}
ul#nav-bar li:hover>*{
display:block;
}
ul#nav-bar li{
position:relative;
display:block;
white-space:nowrap;
font-size:0;
float:left;
}
ul#nav-bar li:hover{
z-index:1;
}
ul#nav-bar{
font-size:0;
z-index:999;
position:relative;
display:inline-block;
zoom:1;
padding:0;
*display:inline;
}
* html ul#nav-bar li a{
display:inline-block;
}
ul#nav-bar>li{
margin:0;
}
ul#nav-bar a:active, ul#nav-bar a:focus{
outline-style:none;
}
ul#nav-bar a{
display:block;
vertical-align:middle;
text-align:center;
text-decoration:none;
font: 12px Arial;
color:#000000;
padding:5px 10px 5px 10px;
}
ul#nav-bar ul li{
float:none;
margin:0 0 0;
}
ul#nav-bar ul a{
text-align:left;
background-color:red;
color:#000;
}
ul#nav-bar li:hover>a{
background-color:#fff;
color:#000000;
}
ul#nav-bar span{
display:block;
overflow:visible;
background-position:right center;
background-repeat:no-repeat;
padding-right:0px;
}
<div id="nav">
<ul id="nav-bar">
<li>Link1</li>
<li><span>Link2</span>
<ul>
<li>lowerLink1</li>
<li>lowerLink2</li>
<li>lowerLink3</li>
</ul>
</li>
<li>Link3</li>
<li><span>longxxxxxxxxxxxxxxxxxxxxxxxxxxxlink</span>
<ul>
<li>lowerLink1</li>
<li>lowerLink2</li>
<li>lowerLink3</li>
</ul>
</li>
<li>Link5</li>
<li>Link6</li>
<li>longxxxxxxxxxxxxxlink</li>
</ul>
</div>
Thanks!
To get the #nav-bar to match the parent, simply add width:100% to your existing ul#nav-bar tag in css. This tells your child to fill up the parent, regardless of child's content.
As for spreading out the links, it has been my experience that the best way to do this is to add margins to the text once the navbar is complete. For your coded example, I would add the following to even them out:
ul#nav-bar->li{
margin:0px 20px 0px 20px;
text-align:center;
}
You can view it here and here is the css code
/*zero-height container problem fix for floated elements*/
.clearfix:before,
.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
#nav {
background:#999;
width:900px;
}
#nav ul{
list-style: none;
padding: 0;
margin: 0;
}
#nav li{
position: relative;
text-align: center;
padding: 10px 0px;
}
#nav a{
text-decoration: none;
display: block;
color: #f0f0f0;
}
#nav-bar > li{
float: left;
}
#nav-bar ul{
position: absolute;
left: 0;
width: 100%;
top: 100%;
background: #999;
display: none;
}
#nav-bar li:hover{
background: #666;
}
#nav-bar li:hover ul{
display: block;
}
As if you want width to be adjusted to text width in li elements so you need javascript
and here is the code i have updated the jsfiddle
$(document).ready(function(){
total_nav_width = $('#nav').width();
main_link = $('#nav-bar > li > a')
textWidths = [];
totalTextWidth = 0;
main_link.each(function(){
textWidths.push($(this).width())
})
for (var i = 0; i < textWidths.length; i++) {
totalTextWidth += textWidths[i];
}
additionValues = (total_nav_width - totalTextWidth)/main_link.length;
main_link).each(function(){
intialWidth = $(this).width()
$(this).width( intialWidth + additionValues )
})
})
Please take a look at my menu code on my site. You can view the source and css file on this site: http://a4um.com/menu.php
some of element is not supported by ie so you can include js for ie
for reference https://github.com/aFarkas/html5shiv
try this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="menu.css"><!-- your css without change -->
<!-- add this for ie support-->
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="big_wrapper">
<header id="top_header">
<nav>
<ul>
</li>
<li id="moreButton">Menu
<ul>
<li id="second">Logout</li>
<br>
<li id="second">Mail</li>
</ul>
</li>
</ul>
</nav>
</header>
</div>
</body>
you have used html 5 tags i.e; nav,header which are not valid in ie lower versions so follow the below code it may help you.
<div id="big_wrapper">
<div id="top_header">
<div class="nav">
<ul>
</li>
<li id="moreButton"><a href ="#" class = "hide">
Menu
</a>
<ul>
<li id = "second">Logout</li>
<br>
<li id = "second">Mail</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
*{
margin: 0px;
padding:0px;
}
.hide{
color: white;
text-decoration:none;
}
.hide:link{
color: white;
text-decoration:none;
}
.hide:visited{
color: white;
text-decoration:none;
}
.hide:hover{
color: white;
text-decoration:none;
}
.hide:active{
font: bold 23px Tahoma;
color: white;
text-decoration:none;
}
header,section,footer,aside,nav,article,hgroup{
display:block;
}
body{
width:100%;
height:110%;
display:-webkit-box;
-webkit-box-pack: center;
overflow-y: scroll;
overflow-x: scroll;
overflow: -moz-scrollbars-vertical;
}
#big_wrapper{
position:absolute;
top: 0; right: 0; bottom:0; left:0;
background:#F0F0F0;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-box-flex: 1
}
#top_header{
background: #252525;
display:inline-block;
border: 1px solid grey;
border-left:1px solid black;
-webkit-box-orient:horizontal;
-webkit-box-flex:1;
color: white;
position:absolute;
right:0;left:0;
}
#logoThing{
width:100px;
font: bold 25px Tahoma;
padding-left:300px;
padding-right:20px;
}
#otherTopStuff{
width:120px;
font: bold 25px Tahoma;
border-left: 1px solid grey;
padding-left:20px;
padding-right:20px;
}
#moreButton{
width:30px;
font: bold 25px Tahoma;
border-left: 1px solid grey;
padding-left:5px;
}
#userID{
width:120px;
font: bold 25px Tahoma;
padding-right:20px;
}
#top_header li{
display:inline-block;
list-style:none;
}
#loginStuff{
font: bold 12px Tahoma;
padding:0px;
margin:0px;
}
#new_div{
display:-webkit-box;
-webkit-box-orient:horizontal;
}
#new_div2{
display:-webkit-box;
-webkit-box-orient:horizontal;
border-top:80px solid #F0F0F0;
}
#otherForms{
background:white;
width: 300px;
border-top: 5px solid white;
text-align:left;
}
#whiteSpace{
background:white;
border-top:1px solid white;
border-radius:10px;
bottom:0;
width:900px;
padding:20px;
-webkit-box-flex:1;
}
#signupTitle{
font: bold 18px Tahoma;
}
#theForms{
padding-top:20px;
}
#textBox{
float:right;
}
#submitButton{
float:center;
}
#aligning{
text-align:center;
}
#the_footer{
text-align:center;
padding:20px;
border-top:2px solid black;
}
.nav ul ul {
display: none;
}
.nav ul li:hover ul {
display: block;
}
.nav ul:after {
content: ""; clear: both; display: block;
}
.nav ul li {
float: left;
}
.nav ul li:hover a {
color: #fff;
}
.nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
.nav ul ul li {
position: relative;
}
.nav ul ul li a {
padding: 0px 10px;
color: #fff;
}
.nav ul ul li a:hover {
background: #4b545f;
}
menu in webpage when zoomed in and out doesnt stay fixed to header image shown in figure:
the css script for this one is as follows
#navmenu{
z-index:99999;
margin-top:40px;
position:absolute;
width:100%;
margin:0;
padding:0;
min-width: 90%;
width:950px;
}
#navMenu li {
float:left;
color:#ececec;
list-style-type:none;
width:80px;
}
#navMenu ul {
width:970px;
font-size:16px;
color:#000000;
}
#navMenu li a{
height:15px;
float:left; display:inline;
font-weight:700;
float:left;
color:#707070;
display: block;
padding: 8px 12px;
text-decoration: none;display: block;
padding: 8px 12px;
text-decoration: none;
background-image: url(img/image_menubutton.JPG);
border-right:1px solid white;
margin-right:12px;
font-family:"Georgia",Georgia,Serif;
font-weight:900;
font-size:19px;
text-align: center;
zoom: 1;
max-width: 30%;
}
#navmenu li.item1{background-image: url(img/about.JPG);}
#navmenu li a:hover {
color:33CCFF;
}
what is the solution to this?
if you use position:fixed; then it will not move when scrolled which is what i assume you are looking for, also when zoomed same thing, it will stay position fixed to where you want it , add maybe top:0; left:0; depending on where you want this to be positioned at-- maybe try adding some html ? other than that this is about all i can help you with
#navmenu{
z-index:99999;
margin-top:40px;
position:fixed;
width:100%;
top:0;
left:0;
margin:0;
padding:0;
min-width: 90%;
width:950px;
}
#navMenu li {
color:#ececec;
list-style-type:none;
width:80px;
}
#navMenu ul {
width:970px;
top:0;
left:0;
font-size:16px;
color:#000000;
}
#navMenu li a{
position:fixed;
height:15px;
font-weight:700;
float:left;
color:#707070;
display: block;
padding: 8px 12px;
text-decoration: none;
background-image: url(img/image_menubutton.JPG);
border-right:1px solid white;
margin-right:12px;
font-family:"Georgia",Georgia,Serif;
font-size:19px;
text-align: center;
zoom: 1;
max-width: 30%;
}
I have web page which works fine on browser on device but when i save to home screen to that web page and open from that there exits some screen sizing issue while opening it from icon from desktop.how to settle this.
My css code is below
*, body, div, h1, h2, h3, h4, h5, h6, p, ul, li, img, nav, header, section {
margin: 0; padding: 0; border: 0;
}
/* Styles */
body {
width:2048px;
height:748px;
background-color: #fff;
overflow: hidden;
font-family:Verdana, Geneva, sans-serif;
}
#container {
position:absolute;
width: 2048px; margin:0;
overflow-x:hidden;
overflow-y:hidden;
padding: 0;
}
.panel{
background-image:url(image/testing_file_1.png);
background-repeat:no-repeat;
height:748px;
width:1024px;
position:relative;
float: left;
padding:0;
bottom:0;
top:0;
margin:0;
display:inline;
}
.main_heading{
float:left;
margin:47px 0 0 60px;
font-size:24px;
font-weight:bold;
color:#FFF;
}
.main_heading_two{
float:left;
margin:47px 0 0 60px;
font-size:24px;
font-weight:bold;
color:#FFF;
}
.menu {
float:right;
margin: 39px 18px 0 0;
height:47px;
background-repeat:no-repeat;
}
.menu ul li {
list-style:none;
float:left;
}
.menu ul li a {
text-decoration:none;
display:block;
}
.menu .active {
text-decoration:none;
background-image:url();
}
.menu .stix {
width:2px;
font-size:0px;
background-image:url(image/seperator.gif);
background-repeat:no-repeat;
padding:0;
height:47px;
}
.midmenu {
list-style-type:none;
float:left;
height:62px;
width:61px;
margin: 248px 0 0 0;
}
.midmenu1 {
float:right;
list-style-type:none;
height:62px;
width:61px;
margin: 248px -500px 0 0px;
}
.rightclass img{
padding: 2px 20px;
float:right;
width:459px;
height:560px;
z-index:10;}
.text_paragraph{
float:left;
width:450px;
color:#FFF;
margin-left:80px;
margin-top:-525px;
}
.text_paragraph_1{
float:left;
width:420px;
color:#FFF;
margin-left:80px;
margin-top:-464px;
}
.text_paragraph_1 ul{
float:left;
color:#FFF;
margin-left:40px;
margin-top:5px;
}
.text_paragraph_1 ul li{
margin-top:5px;
}
.text_paragraph_2{
float:left;
width:450px;
color:#FFF;
margin-left:80px;
margin-top:-285px;
}
.text_paragraph_2 ul{
float:left;
color:#FFF;
margin-left:40px;
margin-top:5px;
}
.text_paragraph_2 ul li{
margin-top:5px;
font-style:italic;
}
.text_paragraph_2 p{
float:left;
color:#FFF;
margin-top:5px;
}
.linkbutton{
margin:-70px 0 0 70px;
float:left;}
small
{
font-size:9px;
}
.rightclass_one img{
margin: 2px 21px;
float:right;
width:459px;
height:560px;
z-index:10;}
.midmenu_1 {
list-style-type:none;
float:left;
height:62px;
width:61px;
margin: -45px 0 0 0;
}
.midmenu_2 {
float:right;
list-style-type:none;
height:62px;
width:61px;
margin: -45px -500px 0 0px;
}
.right_text{
float:right;
color:#000;
margin-right:-470px;
width:440px;
text-align:center;
margin-top:-270px;}
.image_21{
float:right;
margin-right:-390px;
margin-top:-190px;}
.ratemeter{
float:right;
margin-right:-410px;
margin-top:20px;}
.image_one{
float:right;
margin-right:-450px;
margin-top:92px;
z-index:5;
}
.image_two{
float:right;
margin-top:93px;
margin-right:-254px;
z-index:10;
}
.image_one_one{
float:right;
margin-top:95px;
margin-right:-317px;
z-index:10;
}
.image_two_two{
float:right;
margin-right:-452px;
margin-top:92px;
}
Try to put this in your head from your webpage:
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no" name="viewport" />
Okay... that's completely clear, why you've got a fixed height... in your body you set height to 748px... thats not variable.
Try something like this:
I used this in my webapp and it worked fine:
body {
position: relative;
margin: 0;
-webkit-text-size-adjust: none;
min-height: 416px;
-webkit-touch-callout: none;
}
I tried to edit your code, but i don't know, if it will work for you. please have a try:
body {
width:2048px;
min-height:748px;
background-color: #fff;
overflow: hidden;
font-family:Verdana, Geneva, sans-serif;
-webkit-text-size-adjust: none;
-webkit-touch-callout: none;
margin: 0;
position: relative;
}