Menu
I coded two 'one page websites' on codepen for a project (the second one is not finished, the nav needs a little more code to look proper).
Looking at my code there is not much difference, so I don't see why the second page looks rubbish on mobile devices? I can scroll left to right and can't see the whole size of the page and not zoom out enough to do so.
Working First One
Not Working Second One
(Note: I used Bootstrap for these)
body {
font-family: Raleway;
background-image: no-repeat center center fixed;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-color: #92b8db;
color: white;
display: block;
margin: 0;
}
h1 {
text-align: center;
font-size: 70px;
margin: 2% 0 3.5% 0;
text-transform: uppercase;
}
nav {
text-align: center;
display: inline-block;
margin: 25px;
float: none;
overflow: none;
}
li,
ul {
text-decoration: none;
display: inline-block;
margin: 5px 20px;
}
h2 {
margin: 25px 0 0 20%;
}
p {
font-size: 20px;
margin: 5px 10% 20px 10%;
text-align: justify;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1" , user-scalable=no>
<body background="http://static.tumblr.com/38d4fa35aa182890b82bb598a50c8d8b/hti7sqq/7h2orgi26/tumblr_static_4g8ybvq3e4ys8sk4sgowscko8.jpg">
<div class="container-fluid">
<div class="row">
<div class="col">
<h2>Heartcube</h2>
</div>
<div class="col">
</div>
<div class="col">
<nav>
<ul>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
<div class="container-fluid container">
<h1> Betti Bremm</h1>
<p>
We are giants...
</p>
</div>
</div>
</body>
501
asked Nov 18 '25 01:11
The reason you can't "zoom" is because you have user-scalable set to "no" - if you remove that part you should be able to.
If you just leave the viewport meta at
meta name="viewport" content="width=device-width, initial-scale=1">
this should suffice.
The meta for the user-scalable is only set in the settings for the HTML on the site that doesn't work in your codepen (it doesn't seem to take into account the manual head meta settings in the codepen). Your bootstrap is also included twice in this codepen.
Hope this helps
166
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
