больше ширины отображается в мобильном макете - PullRequest
Новая
       29

больше ширины отображается в мобильном макете

1 голос
/ 28 марта 2020

Я бэкэнд-разработчик, и поэтому я не очень хорошо знаком с фронтэнд-разработкой. В последнее время из-за отсутствия дизайнера интерфейса я создаю веб-сайт, на котором я столкнулся с проблемой. Это не отвечающий требованиям сайт, который отлично выглядит на рабочем столе, но в мобильном макете показывает более 100%, я прилагаю скриншоты 

@charset "utf-8";
/* CSS Document */

.top-all {
 margin: 0 auto;
  width: 900px;
  position: relative;
  margin-top: 5px;
}
.top-header {
  height: 120px;
  background-color: #1A1318;
  margin-bottom: -2px;
  margin-left: 1px;
  margin-right: 1px;
  position: relative;
}
.main-body {
 margin: 0 auto;
 width: 900px;
  background-color:  #ffffe6;
  position: relative;
  height: auto;


}
.header {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}
.logo-container {
  height: 100px;
  width: 180px;
  background-color: #E4E4E4;
  float: right;
  margin-right: 40px;
  margin-top: 5px;
  }
.container {
  width: 100%;
	background-color: #E8E8E8;
}

.main-left {
  width: 60%;
  display: inline-block;
  background-color:  #ffffe6;
  
}
.main-right {
  display: inline-block;
  float: right;
  width: 36%;

}
.news {
 border: 1px solid  #d5ff80;
  margin-bottom: 10px;
  border-radius: 8px;
  background-color: #f0f5f5;
}
ul {
  list-style-type: square;
}
ul li {
  color:#00001a;
  margin-top: 9px;
}
.announcement {
 border: 1px solid  #d5ff80;
  margin-bottom: 10px;
  border-radius: 8px;
  background-color: #f0f5f5;
}
.quick-inquiry {
  height: 400px;
  border: 1px solid  #d5ff80;
  border-radius: 8px;
  background-color: white;
}
h1 {
  color: #ffffff;
  font-size: 60px;
  font-weight: bold;
  font-family: "Lucida Console", Courier, monospace;
  padding: 30px;
  margin-left: 30px;
}
h3 {
  font-size: 24px;
  text-align: CENTER;
  color: white;
}
h4 {
  font-size: 18px;
  font-family: arial;
  margin-right: 6px;
  margin-left: 6px;
}
h5 {
  color: #ffffff;
  font-size: 30px;
}
h6 {
  color: white;
  font-size: 24px;
  margin-left: 8px;
}
.h6 {
  padding-top: 1px;
  background-image: linear-gradient( #ffff66,#999900, #ffff66);
  height: 48px;
  width: 400px;
}
h7 {
  font-size: 26px;
  color: white;
  margin-left: 8px;
}
.h7 {
    padding-top: 3px;
  background-image: linear-gradient(#706B6B,#000000,#706B6B);
  height: 50px;
}
h8{
  font-size: 20px;
  color: white;
  margin-left: 8px;
 
}
.h8{
   padding: 4px;
  background-color: #006633;
  background-image: linear-gradient(#4dffa6,#006633,#4dffa6);
  height: 40px;
  width: 120px;
}
p{
  font-size: 16px;
  margin-left: 5px;
}
.p {
 background-color:  #ffffff;
  border: 1px solid #b3b3ff;
  margin-bottom: 10px;
  border-radius: 8px;
}

.h3 {
  background-color: black;
  height: 68px;
  margin-right: 7px;
  margin-left: 7px;
  padding-top: 1px;
  background-image: linear-gradient(#706B6B,#000000,#706B6B);

}
marquee {
  border-top : 4px solid #ffff00;
  border-bottom : 4px solid #ffff00;
  height: 70px;
  background-color: #0EB177;
}
.footer {
  height: 200px;
  background-color: #150F0F;
  margin-bottom: 20px;
}
body {
  font-family: Arial;
  color: #535151;
  background-color: #e6ffff;
  padding: 0px;
  max-width: 100%;
  min-width: 99%;
  position: relative;
}
image

рабочий стол сайта

мобильный вид сайта

1 Ответ

0 голосов
/ 28 марта 2020

Есть пара вещей, которые необходимо изменить:

  1. Удалите встроенные стили на изображениях в ползунке

  2. добавьте Медиа-запрос для мобильного просмотра

  3. Удалите display: inline-block; float: right; в новостях и в главном правом контейнере.
  4. Удалите метку выделения, она устарела.

Как уже упоминалось кем-то другим, измените все фиксированные ширины на максимальные. Поскольку вы также включаете bootstrap, я бы использовал их систему сетки и классы для вашего макета и базового стиля c, в противном случае удалите его. 

@charset "utf-8";
/* CSS Document */

.top-all {
 margin: 0 auto;
  max-width: 900px;
  position: relative;
  margin-top: 5px;
}
.top-header {
  height: 120px;
  background-color: #1A1318;
  margin-bottom: -2px;
  margin-left: 1px;
  margin-right: 1px;
  position: relative;
}
.main-body {
 margin: 0 auto;
 max-width: 900px;
  background-color:  #ffffe6;
  position: relative;
  height: auto;


}
.header {
  height: auto;
  margin-bottom: 20px;
}
.logo-container {
  height: 100px;
  width: 180px;
  background-color: #E4E4E4;
  float: right;
  margin-right: 40px;
  margin-top: 5px;
  }
.container {
	background-color: #E8E8E8;
}

.main-left {
  width: 60%;
  display: inline-block;
  background-color:  #ffffe6;
  
}
.main-right {
  display: inline-block;
  float: right;
  width: 36%;
}
.news {
 border: 1px solid  #d5ff80;
  margin-bottom: 10px;
  border-radius: 8px;
  background-color: #f0f5f5;
}
ul {
  list-style-type: square;
}
ul li {
  color:#00001a;
  margin-top: 9px;
}
.announcement {
 border: 1px solid  #d5ff80;
  margin-bottom: 10px;
  border-radius: 8px;
  background-color: #f0f5f5;
}
.quick-inquiry {
  height: 400px;
  border: 1px solid  #d5ff80;
  border-radius: 8px;
  background-color: white;
}
h1 {
  color: #ffffff;
  font-size: 60px;
  font-weight: bold;
  font-family: "Lucida Console", Courier, monospace;
  padding: 30px;
  margin-left: 30px;
}
h3 {
  font-size: 24px;
  text-align: CENTER;
  color: white;
}
h4 {
  font-size: 18px;
  font-family: arial;
  margin-right: 6px;
  margin-left: 6px;
}
h5 {
  color: #ffffff;
  font-size: 30px;
}
h6 {
  color: white;
  font-size: 24px;
  margin-left: 8px;
}
.h6 {
  padding-top: 1px;
  background-image: linear-gradient( #ffff66,#999900, #ffff66);
  height: 48px;
  width: 400px;
}
h7 {
  font-size: 26px;
  color: white;
  margin-left: 8px;
}
.h7 {
    padding-top: 3px;
  background-image: linear-gradient(#706B6B,#000000,#706B6B);
  height: 50px;
}
h8{
  font-size: 20px;
  color: white;
  margin-left: 8px;
 
}
.h8{
   padding: 4px;
  background-color: #006633;
  background-image: linear-gradient(#4dffa6,#006633,#4dffa6);
  height: 40px;
  width: 120px;
}
p{
  font-size: 16px;
  margin-left: 5px;
}
.p {
 background-color:  #ffffff;
  border: 1px solid #b3b3ff;
  margin-bottom: 10px;
  border-radius: 8px;
}

.h3 {
  background-color: black;
  height: 68px;
  margin-right: 7px;
  margin-left: 7px;
  padding-top: 1px;
  background-image: linear-gradient(#706B6B,#000000,#706B6B);

}
marquee {
  border-top : 4px solid #ffff00;
  border-bottom : 4px solid #ffff00;
  height: 70px;
  background-color: #0EB177;
}
.footer {
  height: 200px;
  background-color: #150F0F;
  margin-bottom: 20px;
}
body {
  font-family: Arial;
  color: #535151;
  background-color: #e6ffff;
  padding: 0px;
  position: relative;
}

@media screen and (max-width: 650px) {
 .main-left {
  background-color:  #ffffe6;
  display: block;
  width: auto;
 }
 .main-right {
  float: none;
   width: auto;
 }
}
image
...