У меня проблема с переполнением моего сайта в режиме разделенного экрана с максимальной шириной 1200 пикселей
У меня проблема с моим сайтом. Когда я помещаю его в разделенный экран с максимальной шириной 1200 пикселей, происходит небольшое переполнение веб-сайта, который создает горизонтальную полосу прокрутки на веб-сайте. Мне нужна помощь, как это исправить. Мне может понадобиться рефакторинг моего кода, если это так, как мне это сделать? Мой код ниже.
-----РЕДАКТИРОВАТЬ-----
На данный момент я не считаю этот пост полезным для сообщества переполнения стека. Я использовал очень дезорганизованный код, который затрудняет чтение для кого-либо еще с такой же проблемой, и, к сожалению, из-за того, что я больше не работаю над этим проектом и больше не имею кода, нет никаких шансов, что этот пост может быть исправлено, чтобы помочь другим пользователям. Я решил закрыть этот пост и удалить его. Если кто-то еще считает, что публикация того же мнения, проголосуйте за ее закрытие, чтобы модератор мог быть уведомлен об удалении этого сообщения.
HTML
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Some Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href= "Logo.png" type="img/SVG" style="width: 100%; height: 100%">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel = "stylesheet" href="stylesheet.css">
</head>
<body>
<div class="Header" id="myHeader">
<a class = "headerLogo">
<a href="file:///C:/Noah's%20stuff/Home.html" ><h1 class = "header" style="color:white; font-family: Verdana; font-style: italic; font-size: x-large;
text-align: center; padding-top: 20px">Some Title</h1></a>
<style>
a{text-decoration: none;}
a:hover{
text-decoration:none;
}
</style>
</a>
<div class="socialmedia">
<a class = "Facebook">
<a href="https://www.facebook.com/" target="_blank"><img src = "https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px"></a>
</a>
<a class = "Instagram">
<a href="https://www.instagram.com/"><img src = "https://images.seeklogo.net/2016/06/Instagram-logo.png" width="50px" height="50px"></a>
</a>
<a class = "Youtube">
<a href="https://www.youtube.com/channel/" target="_blank"><img src = "https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px"></a>
</a>
<a class = preorder>
<button style = "background-color: white;">Pre-Order</button>
</a>
</div>
</div>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-item active">
<img class="d-block img-fluid" src="http://coolwildlife.com/wp-content/uploads/galleries/post-3004/Fox%20Picture%20003.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="http://ichef-1.bbci.co.uk/news/976/media/images/83351000/jpg/_83351965_explorer273lincolnshirewoldssouthpicturebynicholassilkstone.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://c1.staticflickr.com/2/1520/24330829813_944c817720_b.jpg" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
CSS
body {
margin: 0;
}
.Header {
position: fixed;
z-index:1;
width: 100%;
height: 70px;
background-color: #B2B2B2;
text-align: right;
}
.socialmedia {
position: fixed;
right: 100px;
top: 35px;
transform: translate(0, -50%);
display: flex;
/* add this */
align-items: center;
/* add this */
}
.preorder button {
background-color: white;
border: 0;
height: 35px;
width: 110px;
margin-left: 35px;
}
.footer {
display: flex;
align-items: center;
width: 100%;
height: 90px;
background-color: black;
}
.img-fluid{
width: inherit;
height: 782px;
}
.mySlides~.mySlides {
position: absolute;
top: 0;
left: 100%;
transition: 0.7s;
}
.show-split {
display: none;
}
#shot{
margin-top: 50px;
float: right;
}
#shot2 {
float: right;
margin-right: 10px;
}
@media (max-width: 1200px) {
.header {
text-align: left !important;
padding-left: 20px;
}
.img-fluid {
height:500px;
}
.header2 {
text-align: left;
}
.hide-split {
display: none;
}
.show-split {
display: block;
}
}
2 ответа
Вы, вероятно, должны взглянуть на свой код и посмотреть, что происходит. Что-то, вероятно, имеет много отступов или полей и заставляет горизонтальную полосу.
"Легким" способом было бы просто скрыть переполнение элемента body, и ваша горизонтальная полоса исчезнет.
body {
overflow-x:hidden;
}
Лучший способ отладить такого рода проблемы переполнения - это обвести все элементы следующим образом:
* {
outline: 1px solid red;
}
Я сразу вижу, что ваш заголовок исчезает с экрана, и на странице также есть случайные p-теги с ужасными горизонтальными линиями.
Я рекомендую очистить ваш код или начать заново. Удачи.