Viewing Mobile site is slightly zoomed on load

  1. Portal Home
  2. Forum
  3. EverWeb
  4. How do I...?

Mobile site is slightly zoomed on load



User: John R. 9 years ago
Hi,

So my mobile version of my site loads on mobile devices slightly zoomed in, I have no idea how to fix it, but I do think it's a conflict with my mobile navigation bar. Hopefully someone can help me.

I have it as a HTML snippet with the following:

<style>
/*

Responsive Mobile Menu v1.0
Plugin URI: responsivemobilemenu.com

Author: Sergio Vitov
Author URI: http://xmacros.com

License: CC BY 3.0 http://creativecommons.org/licenses/by/3.0/

*/


.rmm {
display:block;
position:relative;
width:100%;
padding:0px;
margin:0 auto !important;
text-align: center;
line-height:19px !important;
}
.rmm * {
-webkit-tap-highlight-color:transparent !important;
font-family:Arial;
}
.rmm a {
color:#ebebeb;
text-decoration:none;
}
.rmm .rmm-main-list, .rmm .rmm-main-list li {
margin:0px;
padding:0px;
}
.rmm ul {
display:block;
width:auto !important;
margin:0 auto !important;
overflow:hidden;
list-style:none;
}


/* sublevel menu - in construction */
.rmm ul li ul, .rmm ul li ul li, .rmm ul li ul li a {
display:none !important;
height:0px !important;
width:0px !important;
}
/* */


.rmm .rmm-main-list li {
display:inline;
padding:padding:0px;
margin:0px !important;
}
.rmm-toggled {
display:none;
width:100%;
position:relative;
overflow:hidden;
margin:0 auto !important;
}
.rmm-button:hover {
cursor:pointer;
}
.rmm .rmm-toggled ul {
display:none;
margin:0px !important;
padding:0px !important;
}
.rmm .rmm-toggled ul li {
display:block;
margin:0 auto !important;
}




/* GRAPHITE STYLE */

.rmm.graphite .rmm-main-list li a {
display:inline-block;
padding:8px 30px 8px 30px;
margin:0px -3px 0px -3px;
font-size:15px;
text-shadow:1px 1px 1px #333333;
background-color:#444444;
border-left:1px solid #555555;
background-image:url('../rmm-img/graphite-menu-bg.png');
background-repeat:repeat-x;
}
.rmm.graphite .rmm-main-list li a:hover {
background-image:url('../rmm-img/graphite-menu-bg-hover.png');
}
.rmm.graphite .rmm-main-list li:first-child a {
-webkit-border-top-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius-topleft: 6px;
-moz-border-radius-bottomleft: 6px;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.rmm.graphite .rmm-main-list li:last-child a {
-webkit-border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-radius-topright: 6px;
-moz-border-radius-bottomright: 6px;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.rmm.graphite .rmm-toggled {
width:95%;
background-color:#555555;
min-height:36px;
border-radius:6px;
}
.rmm.graphite .rmm-toggled-controls {
display:block;
height:36px;
color:white;
text-align:left;
position:relative;
background-image:url('../rmm-img/graphite-menu-bg.png');
background-repeat:repeat-x;
border-radius:6px;
}
.rmm.graphite .rmm-toggled-title {
position:relative;
top:9px;
left:15px;
font-size:16px;
color:white;
text-shadow:1px 1px 1px black;
}
.rmm.graphite .rmm-button {
display:block;
position:absolute;
right:15px;
top:8px;
}

.rmm.graphite .rmm-button span {
display:block;
margin-top:4px;
height:2px;
background:white;
width:24px;
}
.rmm.graphite .rmm-toggled ul li a {
display:block;
width:100%;
background-color:#555555;
text-align:center;
padding:10px 0px 10px 0px;
border-bottom:1px solid #333333;
border-top:1px solid #777777;
text-shadow:1px 1px 1px #333333;
}
.rmm.graphite .rmm-toggled ul li a:active {
background-color:#444444;
border-bottom:1px solid #444444;
border-top:1px solid #444444;
}



/* SAPPHIRE STYLE */

.rmm.sapphire .rmm-main-list li a {
display:inline-block;
padding:8px 30px 8px 30px;
margin:0px -3px 0px -3px;
font-size:15px;
text-shadow:1px 1px 1px #3e587b;
background-color:#537b9f;
border-left:1px solid #3e587b;
background-image:url('../rmm-img/sapphire-menu-bg.png');
background-repeat:repeat-x;
}
.rmm.sapphire .rmm-main-list li a:hover {
background:#3e597b;
}
.rmm.sapphire .rmm-main-list li:first-child a {
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.rmm.sapphire .rmm-main-list li:last-child a {
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.rmm.sapphire .rmm-toggled {
width:95%;
background-color:#537b9f;
min-height:36px;
border-radius:6px;
}
.rmm.sapphire .rmm-toggled-controls {
display:block;
height:36px;
color:white;
text-align:left;
position:relative;
background-image:url('../rmm-img/sapphire-menu-bg.png');
background-repeat:repeat-x;
border-radius:5px;
}
.rmm.sapphire .rmm-toggled-title {
position:relative;
top:9px;
left:15px;
font-size:16px;
color:white;
text-shadow:1px 1px 1px #3e587b;
}
.rmm.sapphire .rmm-button {
display:block;
position:absolute;
right:9px;
top:7px;
width:20px;
padding:0px 7px 0px 7px;
border:1px solid #3e587b;
border-radius:3px;
background-image:url('../rmm-img/sapphire-menu-bg.png');
background-position:top;
}

.rmm.sapphire .rmm-button span {
display:block;
margin:4px 0px 4px 0px;
height:2px;
background:white;
width:20px;
}
.rmm.sapphire .rmm-toggled ul li a {
display:block;
width:100%;
background-color:#537698;
text-align:center;
padding:10px 0px 10px 0px;
border-bottom:1px solid #3c5779;
border-top:1px solid #6883a6;
text-shadow:1px 1px 1px #333333;
}
.rmm.sapphire .rmm-toggled ul li a:active {
background-color:#3c5779;
border-bottom:1px solid #3c5779;
border-top:1px solid #3c5779;
}
.rmm.sapphire .rmm-toggled ul li:first-child a {
border-top:1px solid #3c5779 !important;
}





/* MINIMAL STYLE */

.rmm.minimal a {
color:#333333;
}
.rmm.minimal a:hover {
opacity:0.7;
}
.rmm.minimal .rmm-main-list li a {
display:inline-block;
padding:8px 30px 8px 30px;
margin:0px -3px 0px -3px;
font-size:15px;
}
.rmm.minimal .rmm-toggled {
width:95%;
min-height:36px;
}
.rmm.minimal .rmm-toggled-controls {
display:block;
height:36px;
color:#333333;
text-align:left;
position:relative;
}
.rmm.minimal .rmm-toggled-title {
position:relative;
top:9px;
left:9px;
font-size:16px;
color:#33333;
}
.rmm.minimal .rmm-button {
display:block;
position:absolute;
right:9px;
top:7px;
}

.rmm.minimal .rmm-button span {
display:block;
margin:4px 0px 4px 0px;
height:2px;
background:#333333;
width:25px;
}
.rmm.minimal .rmm-toggled ul li a {
display:block;
width:100%;
text-align:center;
padding:10px 0px 10px 0px;
border-bottom:1px solid #dedede;
color:#333333;
}
.rmm.minimal .rmm-toggled ul li:first-child a {
border-top:1px solid #dedede;
}
</style>

<script type="text/java script" src="http://code.jquery.com/jquery.min.js"></script>

<script type="text/java script">
/*

Responsive Mobile Menu v1.0
Plugin URI: responsivemobilemenu.com

Author: Sergio Vitov
Author URI: http://xmacros.com

License: CC BY 3.0 http://creativecommons.org/licenses/by/3.0/

*/

function responsiveMobileMenu() {
$('.rmm').each(function() {



$(this).children('ul').addClass('rmm-main-list'); // mark main menu list


var $style = $(this).attr('data-menu-style'); // get menu style
if ( typeof $style == 'undefined' || $style == false )
{
$(this).addClass('graphite'); // set graphite style if style is not defined
}
else {
$(this).addClass($style);
}


/* width of menu list (non-toggled) */

var $width = 0;
$(this).find('ul li').each(function() {
$width += $(this).outerWidth();
});

// if modern browser

if ($.support.leadingWhitespace) {
$(this).css('max-width' , $width*1.05+'px');
}
//
else {
$(this).css('width' , $width*1.05+'px');
}

});
}
function getMobileMenu() {

/* build toggled dropdown menu list */

$('.rmm').each(function() {
var menutitle = $(this).attr("data-menu-title");
if ( menutitle == "" ) {
menutitle = "Menu";
}
else if ( menutitle == undefined ) {
menutitle = "Menu";
}
var $menulist = $(this).children('.rmm-main-list').html();
var $menucontrols ="<div class='rmm-toggled-controls'><div class='rmm-toggled-title'>" + menutitle + "</div><div class='rmm-button'><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span></div></div>";
$(this).prepend("<div class='rmm-toggled rmm-closed'>"+$menucontrols+"<ul>"+$menulist+"</ul></div>");

});
}

function adaptMenu() {

/* toggle menu on resize */

$('.rmm').each(function() {
var $width = $(this).css('max-width');
$width = $width.replace('px', '');
if ( $(this).parent().width() < $width*1.05 ) {
$(this).children('.rmm-main-list').hide(0);
$(this).children('.rmm-toggled').show(0);
}
else {
$(this).children('.rmm-main-list').show(0);
$(this).children('.rmm-toggled').hide(0);
}
});

}

$(function() {

responsiveMobileMenu();
getMobileMenu();
adaptMenu();

/* slide down mobile menu on click */

$('.rmm-toggled, .rmm-toggled .rmm-button').click(function(){
if ( $(this).is(".rmm-closed")) {
$(this).find('ul').stop().show(300);
$(this).removeClass("rmm-closed");
}
else {
$(this).find('ul').stop().hide(300);
$(this).addClass("rmm-closed");
}

});

});
/* hide mobile menu on resize */
$(window).resize(function() {
adaptMenu();
});
</script>

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
</head>
<body>
<div class="rmm">
<ul>
<li><a href=‘./mobile-home.html’>Home</a></li>
<li><a href=‘./mobile-services-icon.html’>Services</a></li>
<li><a href=‘./mobile-booking.html’>Booking</a></li>
<li><a href=‘./mobile-post.html’>An Post</a></li>
<li><a href='./mobile-contact.html’>Contact</a></li>

</ul>
</div>
User: Jumbo T. 9 years ago
This does no belong in a HTML Snippet :

</head>
<body>

And see if removing this helps :

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>

And it really helps if you provide a clickable link to the page.
User: Nora Q. 5 years ago
I am having the same problem... www.soulclinic.com the page loads up slightly zoomed in.. anyone have any ideas?


Post Reply
You must login or signup to post.