Слишком маленькая ширина веб-сайта на мобильных устройствах (HTML/CSS)

Привет, у меня возникла проблема с этим веб-сайтом, который я разработал. Это нормально на большинстве экранов, кроме мобильных разрешений. Это по какой-то причине уменьшает ширину, и я не могу найти для себя источник проблемы.

Вот веб-сайт: http://hghazni.com/jewel

Вот код:

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="" /> [email protected]<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>[email protected]</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>

Harry 21.10.2016 источник

comment

Я вижу, ваши названия все в верхнем регистре. Вместо того, чтобы делать это вручную, загляните в CSS text-transform: uppercase; использовать. - Daniel Springer 26.10.2016

Ответы (2)

arrow_upward
3
arrow_downward

Для мобильных устройств вы должны включить в заголовок адаптивные метатеги, например:

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

Но, как рекомендует эта ссылка, вам следует использовать:

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

Также в этот знаменитый и очень полный репозиторий github вы можете найти другие интересные метатеги, которые, возможно, вам следует включить в свой проект.

Добавив этот тег на свой веб-сайт, вы увидите, что на нем все еще есть нужное место, это связано с используемыми вами <table>. Вам следует подумать о добавлении адаптивной оболочки вокруг этих таблиц, чтобы ими можно было управлять, например, в Bootstrap есть удобная оболочка .table-responsive http://getbootstrap.com/css/#tables-responsive

Lucas Lazaro 21.10.2016

comment

Спасибо, Лукас и AllDani, вся эта информация была очень полезной! Я ценю это, и все эти советы очень помогут мне в будущем. Я использую мета-теги области просмотра в качестве обходного пути, чтобы сделать его подходящим для мобильного экрана. Думаю, мне придется пересмотреть свою стратегию мобильного дизайна в будущем. Большое спасибо! - Harry; 21.10.2016

arrow_upward
0
arrow_downward

ваш класс bottom-bar имеет неправильную настройку, вы должны изменить ее на приведенную ниже, надеюсь, это поможет.

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

Chihying Wu 21.10.2016

comment

Эй, Чихинг, спасибо, что помогли хотя бы очистить мой код! - Harry; 21.10.2016

comment

@HaroonGhazni с удовольствием - Chihying Wu; 21.10.2016

Слишком маленькая ширина веб-сайта на мобильных устройствах (HTML/CSS)

Ответы (2)

Похожие вопросы