• 0

Website fine on desktop, broken on mobile browser?

Asked by Muessig,

 Share

Question

Community Regular

Muessig

Posted
Posted

I'm building a preview page for clients to view when I make them a website concept. Something quick and easy I can swap images in and out of to show a client roughly how a site might look without having to build the page itself completely.

 

The site in question is here: www.muessig.co.uk/preview

 

It's effectively one big 100% width background image and another central content image centralised with auto margins over the top.

 

At the moment I've got a client's concept website on there and it displays as intended through the browser on a website and on a tablet, but when viewed through a mobile browser you will see only a small section of the image you can vertically scroll through, but with no horizontal scroll ability.

 

Here's the html code for the page:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Muessig.co.uk - Preview</title>
        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script type="text/javascript" src=?http://cdnjs.cloudflare.com/ajax/libs/respond.js/1.2.0/respond.js"></script>
<script type="text/javascript" src=?http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
<![endif]-->

    <link href="css/styles.css" rel="stylesheet">
  </head>
<!-- NAVBAR================================================== -->
<body>
	<div class="back">
     	<div class="container marketing">
        	<div class="topcentre">
            	<div class="icon"></div>
            		<div class="nails"></div>
    					<div class="row">
                </div>
            </div>
		</div>
   	</div> 
</body>
<!--
<div class="container"></div>
<!-- Wrap the rest of the page in another container to center all the content. -->
    <!--<div class="faceupgreybgtiles">
    	<div class="faceuptiles">
    		<div class="container marketing">
    			<div class="row">
        		</div>    
    		</div> 
    	</div>
</div> -->

    <!-- /.container -->
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/holder.js"></script>
  </body>
</html>

and the CSS / less file:

body {
}
.container {
    width: 1189px;
    height: 4250px;

}
.marketing {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 1189px;
}
.back {
	width: 100%;
    background-image: url("../img/FaceUpBGComplete.jpg");
    background-repeat: no-repeat;
    position: relative;
    top: -7px;
    right: 0;
    overflow-x:hidden;
}
.icon {
	width: 100%;
	height: 797px;
    background-image: url("../img/FaceUpIcon.png");
    background-repeat: no-repeat;
    position: absolute;
    margin-right: auto;
    left: -450px;
    overflow-x:hidden;
}
.nails {
	width: 1650px;
	height: 797px;
    background-image: url("../img/FaceUpNails.png");
    background-repeat: no-repeat;
    position: absolute;
    margin-right: auto;
    margin-left: 350px;
    top: 1885px;
    overflow-x:hidden;
}
.topcentre {
	background-image: url("../img/FaceUpCompleteCentre.png");
	background-repeat: no-repeat;
	width: 100%;
	height: 4250px;
	margin-left: auto;
	margin-right: auto;
}

h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4,.h5{
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 500;
    line-height: 1.1;
    color: #707070 ;
}

Any ideas how to solve this conundrum?

Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0
Grand Master

Seahorsepip Veteran

Posted
  • Veteran
Posted

Did you reset your css or normalize it?

And <meta name="viewport" content="initial-scale=1"> forces it to mobile view, combining that with overflow-x: hidden; in your css prevents the horizontal scrolling.

Consider removing the meta tag and/or editing your css overflow properties.

Link to comment
Share on other sites
  • 0
Community Regular

Muessig

Posted
  • Author
Posted

Okay so I removed the meta tag and deleted references to overflow-x: hidden; and while the site still displays correctly on a browser, its still broken on a mobile browser. Now the website isn't centred at all. The background image doesn't completely render - only the left half of it.

 

I can't figure out why this is.

 

Here's the current HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Muessig.co.uk - Preview</title>
        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script type="text/javascript" src=?http://cdnjs.cloudflare.com/ajax/libs/respond.js/1.2.0/respond.js"></script>
<script type="text/javascript" src=?http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
<![endif]-->

    <link href="css/styles.css" rel="stylesheet">
  </head>
<!-- NAVBAR================================================== -->
<body>
	<div class="back">
     	<div class="container marketing">
        	<div class="topcentre">
            	<div class="icon"></div>
            		<div class="nails"></div>
    					<div class="row">
                </div>
            </div>
		</div>
   	</div> 
</body>
<!--
<div class="container"></div>
<!-- Wrap the rest of the page in another container to center all the content. -->
    <!--<div class="faceupgreybgtiles">
    	<div class="faceuptiles">
    		<div class="container marketing">
    			<div class="row">
        		</div>    
    		</div> 
    	</div>
</div> -->

    <!-- /.container -->
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/holder.js"></script>
  </body>
</html>

And the current CSS / less:

//Main
//Globlal Values
body {
}
.container {
    width: 1189px;
    height: 4250px;

}
.marketing {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 1189px;
}
.back {
	width: 100%;
    background-image: url("../img/FaceUpBGComplete.jpg");
    background-repeat: no-repeat;
    position: relative;
    top: -7px;
}
.icon {
	width: 100%;
	height: 797px;
    background-image: url("../img/FaceUpIcon.png");
    background-repeat: no-repeat;
    position: absolute;
    margin-right: auto;
    left: -450px;
}
.nails {
	width: 1650px;
	height: 797px;
    background-image: url("../img/FaceUpNails.png");
    background-repeat: no-repeat;
    position: absolute;
    margin-right: auto;
    margin-left: 350px;
    top: 1885px;
}
.topcentre {
	background-image: url("../img/FaceUpCompleteCentre.png");
	background-repeat: no-repeat;
	width: 100%;
	height: 4250px;
	margin-left: auto;
	margin-right: auto;
}

h1,h2,h3,h4,h5,.h1,.h2,.h3,.h4,.h5{
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 500;
    line-height: 1.1;
    color: #707070 ;
}

Any ideas?

Link to comment
Share on other sites
  • 0
Grand Master

The_Decryptor Veteran

Posted
  • Veteran
Posted

Well yeah, the width of the page is huge (The nail image being 1650px), mobile browsers only use a 960px wide viewport for non-responsive sites, so it's only showing around half of your page (Same thing happens in a desktop browser if you resize the window down)

You're going to want to use a fluid layout that scales to the window, vs. a fixed layout that requires the window to be a certain size.

Edit: Also you've got multiple <body> tags, don't do that.

Link to comment
Share on other sites
This topic is now closed to further replies.
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.