My website is zooming in on tablets and phones

HTML & CSS
1

On my website, ever since I added javascript it seems to look fine on PC but zoomed right in on tablets and phones. Here is my code:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Website</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="navbar.css" rel="stylesheet" type="text/css" />
</head>

<body class="menu">
<header>
<a href="#" class="menu-toggle"><img src="http://i.imgur.com/p2Yxaex.jpg" onmouseover="this.src='http://i.imgur.com/Vrl4tBl.jpg'" onmouseout="this.src='http://i.imgur.com/p2Yxaex.jpg'" /></a>
<nav class="menu-side">
This is a side menu
</nav>
</header>


<center>Content Here
</center>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script> 
(function() {
           var body = $('body');
           $('.menu-toggle').bind('click', function() {
                body.toggleClass('menu-open');
                return false;
                });
          })();
var $body = $('body');
$body.on('click', function(event) {
  var clickedOutside = $(event.target).closest('.menu-side').length == 0;
  if (clickedOutside && $body.hasClass('menu-open')) {
    $body.removeClass('menu-open');
  }
})
</script>
</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */

.menu {
    overflow-x:hidden;
    position: relative;
    left: 0px;
}

.menu-open {
    left: 231px;
    
}

.menu-open .menu-side {
    left: 0;
}

.menu-side,
.menu {
    -webkit-transition: left 0.3s ease;
    -moz-transition: left 0.3s ease;
    transition: left 0.3s ease;
    
}

.menu-side {
    background-color:#333;
    border-right:1px solid #000;
    color:#fff;
    position:fixed;
    top: 0;
    left: -231px;
    width: 210px;
    height: 100%;
    padding: 10px;
    
    
}

Any ideas as to why it’s zooming in and if there would be a way to fix it?

2

Hi,

I can’t see any difference on desktop or phone with what you have posted. Do you have a link to the live version to make sure we are seeing the same thing?

If you don’t have a live site then maybe a screenshot of the differences that you see may help us narrow down the problem.:slight_smile:

3

Same with me. I dont see eny difference. On what device you have seen that?

4

www.purewhiteguild.com

Sorry fellas, here’s the live site.

5

Your image is 350px wide and therefore on devices smaller than 350px (such as iphone5) then the image will be too big to fit as the iphone5 is only 320px wide.

This means that the viewport will need a scrollbar to make that portion visible and thus the other elements on the page will scale smaller.

A quick fix would be to set your images to never be larger than 100%.

e.g.

img{max-width:100%;height:auto}

What should really be doing though is using media queries to control the display at points where the design no longer seems to fit.

7

Thanks Paul,

Where would I put that tag though? In my HTML or CSS?

8

in your CSS

9

Thank you!

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.