CODEWITHSUNDEEP
htmlcssmobileviewport
Connor Graham
Connor Graham

Reputation: 25

Website Mobile Issue - Viewport

I have just launched my website http://www.connorgraham.com.au and am having mobile viewing issues. Prior to launch, everything was working and looking perfect, however I have just realised that on mobile, you are able to scroll to the right to show a white bar that covers 20% or so of an iPhone screen. The website should be full width and you shouldn't be able to scroll to the right. I believe there is some kind of viewport issue, however I am unsure.

I would appreciate any help, and am happy to provide any of my code if it would help solve the issue.

Upvotes: 0

Views: 251

Answers (2)

the-nick-wilson
the-nick-wilson

Reputation: 616

I think this is what you need:

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

This should disable zoom and will prevent the issue (at least what I think the issue is).

EDIT:

As Charlie pointed out, there is a risk to completely disabling scaling, and a better alternative is to set it to a particular max value so users can still zoom some. This is particularly important for people with disabilities who may be trying to view your site.

Upvotes: 0

Charlie
Charlie

Reputation: 161

Im hoping you have access to the css files. You need to change the top logo and bottom logo widths using media queries. Right now there is a media query for the top logo set at 900px. This needs to be changed: 

@media (max-width: 399px) {

   .mobile-logo {
   width: 200px;
   float: left;
   }

   .footer img {
  width: 150px;
  }
} 

@media (min-width: 400px) and (max-width: 900px) {
   .mobile-logo {
   width: 300px;
   float: left;
   }
}

EDIT: I changed media query to 399px

EDIT: I made the header logo 50px wider (now it is 200px instead of 150px) in the small query

Also, I would change the meta view port to the this:

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

From my experience it is a bad idea to prevent scaling. This sets the initial scale to 1 and if people want to pinch and zoom they can. This is ideal because you do not always know what the user likes, or if they have a medical condition/disability.

Upvotes: 1

Related Questions