Haroon Ghazni Haroon Ghazni - 1 month ago 6
HTML Question

Website width too short on Mobile (HTML/CSS)

Hi there I'm having quite an issue with this website I've developed. It's fine on most screens except for mobile resolutions. It for some reason reduces the width and I can't seem to find for the life of me the source of the problem.

Here's the website:
http://hghazni.com/jewel

Here's the code:



html {
margin: 0;
padding: 0;
background-color: #0c0e1b;
}

body {
margin: 0;
padding: 0;
}

/*contact bar*/

.contact-bar {
width: 100%;
height: 3.5em;
top: 0;
float: left;
background-color: #0c0e1b;
color: #fff;
z-index: 999;
border-bottom: solid 1px #232737;
}

.contact-bar p {
margin-left: 19%;
padding-bottom: 2em;
}

.myaccount {
top: 0%;
position: absolute;
text-align: center;
right: 0;
padding-right: 25%;
}

.phoneemail {
top: 0;
position: absolute;
text-align: center;
margin-left: 19%;
}

.phoneemail img {
vertical-align: bottom;
}

.phoneemail th {
font-weight: normal;
font-size: 1em;
}

.myaccount {
right: 0;
top: 0;
margin-top: 1em;
position: absolute;
}

/*navigation menu + logo */
.logo {
display: inline-block;
margin-left: -22%;
padding-bottom: 1.5em;
height: auto;;
width: auto;;
}

.search-icon {
display: inline-block;
padding: 0.2em;
padding-bottom: 2.2em;
padding-left: 1.5em;
}

.search-icon:hover {
opacity: 0.5;
}

.checkout {
display: inline-block;
padding: 0.2em;
padding-bottom: 2.2em;
}

.checkout:hover {
opacity: 0.5;
}


.top-bar {
width: 100%;
height: 7.4em;
background-color: #0c0e1b;
top: 0;
float: right;
}

.nav-item {
list-style-type: none;
text-decoration: none;
padding-left: 1em;
float: left;
color: #fff;
display: inline-block;
padding-bottom: 2.5em;
font-size: 1.2em;
}

.top-nav {
margin-left:10%;
}
.top-nav ul {
text-align: center;
}

.top-nav li {
display: inline-block;
}

.top-nav > ul {
text-decoration: none;
list-style-type: none;
}

.top-nav a:hover {
color: #e3b05f;
text-decoration: none;
}

/*banner*/

.banner {
background-color: #fff;
width: 100%;
height: 60em;
}

.banner img {
width: 100%;
}

/*exclusive section*/
.exclusive {
position: relative;
top: 100%;
background-color: #fff;
width: 100%;
float: left;
padding-top: 2%;
padding-bottom: 2%;
z-index: 999;
}


.exclusive img:hover {
opacity: 0.5;

}

/*royal banner*/

.royal-banner {
width: 100%;
position: relative;

}

.royal-banner img {
width: 100%;
}

/*rings section*/

.rings {
width: 100%;
margin: auto;
background-color: #fff;
}

.rings h3 {
padding-top: 1.5em;
font-size: 1.5em;
color: #a6834b;
text-align: center;
text-decoration: none;
font-weight: normal;
}

.rings img {
padding-top: 0.5em;
}

.ring-content {
margin:auto;
width:46em;
padding-bottom: 4em;
text-align: center;
}

.rings h3 {
font-size: 2em;
text-align: center;
}

.tgg {border-collapse:collapse;border-spacing:0;}
.tgg td{
overflow:hidden;
width: 100%;
}

.tgg h3 {
color: #222;
font-weight: bold;
font-size: 1em;
word-spacing: 0.3em;
padding-right: 5%;
padding-left: 5%;
}

.tgg h4 {
color: #a6834b;
font-size: 1.5em;
}
.tgg th{
font-size:14px;
font-weight:normal;
padding:10px 5px;
overflow:hidden;
}
.tgg .tg-r4y5{background-color:#fcf7f3;}
.tgg .tg-a8i3{background-color:#fcf7f3;text-align:center;}
.tgg .tg-i81m{background-color:#ffffff;text-align:center;}
.tgg .tg-3we0{background-color:#ffffff;}

#addcart {
cursor:pointer;
background:#c89a4f; /*the colour of the button*/
border:1px solid ##c89a4f; /*required or the default border for the browser will appear*/
/*give the button curved corners, alter the size as required*/
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border: 2px solid #c89a4f;
color: #000;
padding: 0.5em;
font-size: 1em;
font-weight: bold;
font-family: "Open Sans", sans-serif;
}

input#addcart:hover, input#addcart:focus{
background-color :#e9b45c; /*make the background a little darker*/
/*reduce the drop shadow size to give a pushed button effect*/
-webkit-box-shadow: 0 0 1px rgba(0,0,0, .75);
-moz-box-shadow: 0 0 1px rgba(0,0,0, .75);
box-shadow: 0 0 1px rgba(0,0,0, .75);
}

/*blog section*/

.blog {
width: 100%;
background-color: #fcf7f3;
margin: 0;
float: left;
padding-bottom: 5em;
}

.blog h3 {
text-align: center;
font-size: 2em;
}

.blog ul {
text-decoration: none;
list-style-type: none;
width: 65%;
margin: 0px auto;
}

.blog li {
text-align: left;
display: inline-block;
width: 29.5%;
color: #aa9146;
vertical-align: middle;
}

#blogtable {
width: 10%;
}

#blogtable h3 {
text-align: left;
font-weight: bold;
font-size: 1.3em;
color: #222;
padding: 0;
}

#blogtable p {
text-align: left;
font-size: 0.9em;
color: #7a7878;
font-family: "Open Sans", sans-serif;
}

#blogarrowright {
position: relative;
vertical-align: middle;
margin-top: -670%;
}

#blogarrowleft {

}

#blogarrowleft:hover {
opacity: 0.5;
}

#blogarrowright:hover {
opacity: 0.5;
}

/*bottom section*/
.bottom-wrapper {
background-color: #0c0e1b;
width: 100%;
padding-bottom: 3em;
}

.bottom-wrapper a {
color: #acacac;
text-decoration: none;
}

.bottom-wrapper a:hover {
color: #aa9146;
}
.bottom {
background-color: #0c0e1b;
width: 50%;
margin-left: 15%;
position: relative;
display: inline-block;
color: #fff;
-webkit-columns: 3;
-moz-columns: 3;
columns: 3;
column-gap: unset;
padding: 0;
padding-bottom: 3em;
}

.bottom h3 {
font-weight: lighter;
font-size: 1.5em;
padding: 0;
color: #aa9146;
}

.bottom ul {
list-style-type: none;
text-decoration: none;
margin: auto;
padding: 0;
font-family: "Open sans", sans-serif;
font-size: 0.85em;
color: #acacac;
}

.bottom li {
padding-bottom: .85em;
}

/*newsletter section*/
.newsletters {
position: relative;
color: #acacac;
display: inline-block;
}

.newsletters {
text-decoration: none;
list-style-type: none;
}

.newsletters h3 {
font-size: 1.5em;
color: #aa9146;
font-weight: normal;
}

.newsletters img:hover {
opacity: 0.5;
}


/*bottom bar (copyright)*/
.bottom-bar-wrapper {
width: 100%;
background-color: #0c0e1b;
position: relative;
}

.bottom-bar {
margin-left: 15%;
width: 63%;
background-color: #0c0e1b;
border-top: 1px solid rgb(255,255,255);

}

.bottom-bar table th {
padding-left: 3%;
font-weight: normal;
}

/*.bottom-bar l {
list-style-type: none;
text-decoration: none;
margin-left: 10%;
float: left;
padding-left: 0.5em;
padding-top: 2em;
background-color: #0c0e1b;
}*/

.bottom-bar p {
width: 250px;
text-align: center;
color: #acacac;
font-family: "Open sans", sans-serif;
font-size: 0.80em;
float: left;
padding-left: 10%;
padding-bottom: 1.5%;
padding-top: 1.5%;
margin: auto;
}

/*copyright bar */
.copyright-bar {
position: relative;;
width: 100%;
float: left;
background-color: #000000;
}

.copyright-bar p {
font-family: "Open sans", sans-serif;
color: #acacac;
text-align: center;
text-decoration: none;
font-size: 0.9em;
}

.copyright-bar a {
text-decoration: none;
font-weight: bold;
color: #aa9146;
}

.copyright-bar a:hover {
color: #acacac;
}

/*subscribe form*/
.newsletter-form form {
border-radius: 3em;
border: 2px solid #aa9146;
background-color: #000000;
}

/*responsive styling*/
/*iphone */
@media only screen and (max-width : 1023px) and (min-width : 480px){
.contact-bar {
height: 3em;
}
.contact-bar p {
margin-left: 5%;
}

.contact-bar p {
font-size: 2em;
}
.contact-bar a {
color: #fff;
text-decoration: none;
}
.contact-bar a:visited {
color: #fff;
}

.top-bar {

}
.top-nav {
float: left;
}

#logo {
height: 20%;
width: 20%;
}

.banner {
background-color: #fff;
width: 100%;
height: 36em;
}

.exclusive {
top: 100%;
background-color: #fff;
width: 100%;
z-index: 999;
align-items: center;
overflow-x: auto;
}

.exclusive img {
width: 98%;
height: 90%;
float: left;
position: relative;
}

.exclusive img:hover {
opacity: 0.5;
}

}
/*laptop 1*/
@media only screen and (max-width : 1366px) and (min-width : 1024px) {
.top-nav {
margin-left:15%;
}

.banner {
background-color: #fff;
width: 100%;
height: 45em;
}
}

/*laptop 2*/
@media only screen and (max-width : 1024px) and (min-width : 768px) {

}

<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<link rel="icon" href="img/crown.ico" type="image/x-icon" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans">
<title>Jewellery Shop</title>
</head>

<body>
<div class="contact-bar">
<table class="phoneemail">
<tr>
<th><img src="img/phone.jpg" alt="" /> 00 11 22 33 44 55 <img src="img/email.jpg" alt="" /> support@yourmail.com<div class="my-account">
</th>
<th>
</th>
</tr>
</table>

<table class="myaccount">
<tr>
<th>
<img src="img/myaccount.jpg" alt=""/>
</th>
</tr>
</table>
</div>
</div>


<div class="top-bar">
<nav class="top-nav">
<ul>
<img id="logo" src="img/logo.jpg" class="logo" alt="" />
<li><a href="#" class="nav-item">CONTACT US</a></li>
<li><a href="#" class="nav-item">BLOG</a></li></a>
<li><a href="#" class="nav-item">COLLECTIONS</a></li>
<li><a href="#" class="nav-item">FEATURES</a></li>
<li><a href="#" class="nav-item">PAGES</a></li>
<li><a href="#" class="nav-item">HOME</a></li>
<img src="img/search.jpg" class="search-icon" alt="" />
<img src="img/checkout.jpg" class="checkout" alt="" />
</ul>
</nav>
</div>
<div class="banner">
<img src="img/banner.jpg" alt="" />
</div>
<!-- exclusive content section -->
<div class="exclusive">
<table class="tg" align="center" >
<tr>
<th class="tg-baqh"><img src="img/27.jpg" alt="" /></th>
<th class="tg-baqh" rowspan="2"><img src="img/29.jpg" alt="" /></th>
<th class="tg-baqh"><img src="img/28.jpg" alt="" /></th>
</tr>
<tr>
<td class="tg-baqh"><img src="img/31.jpg" alt="" /></td>
<td class="tg-baqh"><img src="img/37.jpg" alt="" /></td>
</tr>
</table>


</div>

<div class="royal-banner">
<img src="img/royal-banner.jpg" alt="" />
</div>

<div class="rings">
<h3>Necklaces | <span style="color: #000; word-spacing: normal;">Diamond Ring</span> | Earrings<br>
<img class="under" src="img/sub_under.jpg" alt="" /></h3>
<div class="ring-content">
<table class="tgg" align="center" border="0px">
<tr>
<th class="tg-a8i3"><img src="img/ring1.jpg" alt="" /></th>
<th class="tg-i81m" rowspan="3"></th>
<th class="tg-a8i3"><img src="img/ring2.jpg" alt="" /></th>
<th class="tg-3we0" rowspan="3"></th>
<th class="tg-r4y5"><img src="img/ring3.jpg" alt="" /></th>
<th class="tg-3we0" rowspan="3"></th>
<th class="tg-r4y5"><img src="img/ring4.jpg" alt="" /></th>
</tr>
<tr>
<td class="tg-r4y5"><h3>PRODUCT NAME</h3><img src="img/ring_linebreak.jpg" alt="" /><h4>$ 5000.00/-</h4></td>
<td class="tg-r4y5"><h3>PRODUCT NAME</h3><img src="img/ring_linebreak.jpg" alt="" /><h4>$ 5000.00/-</h4></td>
<td class="tg-r4y5"><h3>PRODUCT NAME</h3><img src="img/ring_linebreak.jpg" alt="" /><h4>$ 5000.00/-</h4></td>
<td class="tg-r4y5"><h3>PRODUCT NAME</h3><img src="img/ring_linebreak.jpg" alt="" /><h4>$ 5000.00/-</h4></td>
</tr>
<tr>
<td class="tg-r4y5"><input id="addcart" type="submit" value="ADD TO CART" /></td>
<td class="tg-r4y5"><input id="addcart" type="submit" value="ADD TO CART" /></td>
<td class="tg-r4y5"><input id="addcart" type="submit" value="ADD TO CART" /></td>
<td class="tg-r4y5"><input id="addcart" type="submit" value="ADD TO CART" /></td>
</tr>
</table>
</div>
</div>

<div class="blog">
<h3>LATEST BLOGS<br>
<img class="under" src="img/sub_under_1.jpg" alt="" /></h3>

<table id="blogtable" align="center">
<tr>
<th><img id="blogarrowleft" src="img/blogarrow_left.png" alt="" /></th>
<th rowspan="3"><img src="img/blog1.jpg" alt="" /><h3>LOREM IPSUM DOLOR SIT AME</h3><p>Lorem ipsum dolor sit amet, consectetur adipsicin elit, do eiusmod temport {...}</p></th>
<th rowspan="3"><img src="img/blog2.jpg" alt="" /><h3>LOREM IPSUM DOLOR SIT AME</h3><p>Lorem ipsum dolor sit amet, consectetur adipsicin elit, do eiusmod temport {...}</p></th>
<th rowspan="3"><img src="img/blog3.jpg" alt="" /><h3>LOREM IPSUM DOLOR SIT AME</h3><p>Lorem ipsum dolor sit amet, consectetur adipsicin elit, do eiusmod temport {...}</p></th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td><img id="blogarrowright" src="img/blogarrow_right.png" alt="" />
</tr>
</table>
</div>


<div class="bottom-wrapper">
<div class="bottom">
<div class="aboutus">
<h3>ABOUT US</h3>
<ul>
<li><a href="#">My Account</a></li>
<li><a href="#">Order History</a></li>
<li><a href="#">Wish List</a></li>
<li><a href="#">Returns</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>
<div class="information">
<h3>INFORMATION</h3>
<ul>
<li><a href="#">My Account</a></li>
<li><a href="#">Order History</a></li>
<li><a href="#">Wish List</a></li>
<li><a href="#">Returns</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>
<div class="ourpolicy">
<h3>OUR POLICY</h3>
<ul>
<li><a href="#">My Account</a></li>
<li><a href="#">Order History</a></li>
<li><a href="#">Wish List</a></li>
<li><a href="#">Returns</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</div>
</div>
<div class="newsletters">

<h3>GET NEWSLETTERS</h3>

<form action="index.html" method="post" class="newsletter-form">
<input type="email" name="email" class="subscribe-input" placeholder="Email address" autofocus>
<button type="submit" class="subscribe-submit">Subscribe</button>
</form>

<h3>FOLLOW US</h3>
<a href="#"><img src="img/facebook.jpg" alt="" /></a>
<a href="#"><img src="img/twitter.jpg" alt="" /></a>
<a href="#"><img src="img/googleplus.jpg" alt="" /></a>
<a href="#"><img src="img/linkedin.jpg" alt="" /></a>
</div>

<div class="bottom-bar">
<table align="center">
<th rowspan="3">
<p><img src="img/contact.jpg" alt="" /><br> 00 11 22 33 44 | 22 33 44 55 66</p>
</th>
<th rowspan="3">
<p><img src="img/location.jpg" alt="" /><br>Lorem ipsum dolor sit amet, consectetur adipiscling elit, india.</p>
</th>
<th rowspan="3">
<p><img src="img/emailicon.jpg" alt="" /><br>Yourdomainname@youremail.com</p>
</th>
</table>
</div>
<div class="copyright-bar">
<p>
Copyright © 2016 by <a href="http://www.hghazni.com">hghazni</a> All rights reserved.
</p>
</div>
</body>
</html>




Answer

For mobile devices you should include responsive meta tags to your head, for instance:

<meta name="viewport" content="width=device-width">

But as this link recommends you should use:

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

Also on this famous and very complete github repository you can find out other interesting meta tags perhaps you should include in your project.

By adding this tag to you website you'd see that it still has a right space, that's due the <table>s you're using. You should consider adding a responsive wrapper around those table so that they will be manageable, for instance Bootstrap has a nice .table-responsive wrapper http://getbootstrap.com/css/#tables-responsive

Comments