Search code examples
cssmobilezoomingresponsivemeta

Mobile devices loads page zoomed in

I am currently working on a website project and overall things are going alright. But for some reason when I run my website on a mobile device, eg galaxy s5 or iphone 5, the browser zooms in on the top left corner. I have tried to disable the zoom by using

<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />

but it only fixed the navbar and the rest of the body stayed zoomed-in. This my current meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

I've set the CSS for the body of my page to body {position: relative;}, as well as

@media screen and (max-width: 700px) {body {position: absolute;}}

for devices smaller than 700px wide (Because that fixes the 'body not filling up the entire mobile device width' problem).

I've also set the CSS for my navbar to 'position: fixed;'.

My website can be accessed here. Any ideas on how I can stop mobile devices from zooming my webpage upon loading? Thanks.

Solution

  • You set the font size for ".homeintrocontainer .homeintrohead" to 80px and you didn't reduce the font size for mobile devices. Can you reduce this font size and check. Or if you need the same font size, try to add word-break:break-all to the .homeintrocontainer .homeintrohead class.

    .homeintrocontainer .homeintrohead {
text-align: center;
padding-bottom: 15px;
font-size: 30px; /*for reference just edited the font size*/
padding-top: 200px;
padding-bottom: 30px;
margin: 0 auto;
word-break: break-all;

    }