#html #css
#HTML #css
Вопрос:
Хорошо, меня это очень раздражает. Я хочу, чтобы все мои элементы располагались горизонтально в центре страницы на небольших устройствах. Но некоторые из них слегка сдвинуты в сторону. И мой макет добавляет горизонтальную прокрутку. Похоже, что что-то уходит с экрана, но я не уверен, что именно. Кроме того, значки в разделе «О нас» не центрированы по вертикали. Что я пропустил? Буду признателен за любую помощь, потому что я теряю терпение и не хочу оставлять все как есть.
РЕДАКТИРОВАТЬ: Хорошо, мне удалось справиться с перекрытием. Меню навигации вызывало суету. Добавлено переполнение: скрыто, и это решило эту проблему. Теперь остается то, что divs, вложенные в .flexing и .grid, находятся немного левее. Должно быть в центре.
<header>
<nav id="myNav">
<div class="menu-icon" onclick="myFunction()">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
<img src="images/logo.png" alt="LOGO">
</div>
<div class="top-nav">
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Work</a></li>
</ul>
</div>
</nav><br>
</header>
<div class="aboutus">
<div class="container">
<h2>About us</h2>
<hr>
<h5 style="word-break: keep-all;">Lorem ipsum dolor sit amet consectetur adipisicing elit.</h5>
<section class=" flexing">
<div data-aos="fade-right">
<i class="fa fa-rocket" aria-hidden="true"></i>
<h3>Lorem ipsum</h3>
<p>Nam varius accumsan elementum. Aliquam fermentum eros in suscipit scelerisque.</p>
</div>
<div data-aos="fade-right">
<i class="fa fa-sun-o" aria-hidden="true"></i>
<h3>Lorem ipsum</h3>
<p>Nam varius accumsan elementum. Aliquam fermentum eros in suscipit scelerisque.</p>
</div>
<div data-aos="fade-right">
<i class="fa fa-google-wallet" aria-hidden="true"></i>
<h3>Lorem ipsum</h3>
<p>Nam varius accumsan elementum. Aliquam fermentum eros in suscipit scelerisque.</p>
</div>
<div data-aos="fade-right">
<i class="fa fa-trophy" aria-hidden="true"></i>
<h3>Lorem ipsum</h3>
<p>Nam varius accumsan elementum. Aliquam fermentum eros in suscipit scelerisque.</p>
</div>
</section>
<div class="item-link">
<!-- <div> -->
<a href="#">Learn more</a>
<!-- </div> -->
</div>
</div>
</div>
<div class="lorem" id="work">
<div class="container" data-aos="fade-left">
<div class="grid ipsum">
<div class="pic">
<img src="images/kamera.jpg" alt="">
</div>
<div class="lorem-text1">
<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque elementum augue sed est
porttitor, ac blandit nisl posuere. Pellentesque hendrerit suscipit mi eu lobortis.
Curabitur consectetur enim id elementum accumsan. Quisque metus purus, iaculis id tincidunt
non, blandit quis sapien. </p>
<a href="#">Learn more</a>
</div>
</div>
</div>
</div>
<div class="lorem" id="dorem">
<div class="container" data-aos="fade-left">
<div class="grid dorem">
<div class="lorem-text2">
<h2>Dolor sit amet</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque elementum augue sed est
porttitor, ac blandit nisl posuere. Pellentesque hendrerit suscipit mi eu lobortis.
Curabitur consectetur enim id elementum accumsan. Quisque metus purus, iaculis id tincidunt
non, blandit quis sapien. </p>
<a href="#">Learn more</a>
</div>
<div class="pic">
<img src="images/laptop.jpg" alt="">
</div>
</div>
</div>
</div>
html,
body {
margin: 0;
padding: 0;
width: 100%;
}
body {
font-family: Raleway, Raleway-Bold, Raleway-ExtraLight, ProximaNova-
Regular;
font-weight: lighter;
}
header {
width: 100%;
height: 100vh;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
}
/* NAVIGATION MENU */
nav {
position: fixed;
width: 100%;
line-height: 60px;
transition: all 1s;
z-index: 3;
}
nav ul {
line-height: 60px;
list-style: none;
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 0.5s;
overflow: hidden;
}
.menu li:hover {
background-color: rgba(240, 255, 255, 0.3);
}
nav ul li {
display: inline-block;
padding: 16px 40px;
}
.menu a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.scroll {
background-color: black;
}
.menu-icon {
line-height: 60px;
max-width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
/* ABOUT US */
hr {
height: 1px;
background-color: lightgreen;
border: none;
width: 50px;
}
h2, h5 {
text-align: center;
color: grey;
}
.container {
text-align: center;
margin-top: 60px;
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
width: 80%;
}
.aboutus {
margin-bottom: 50px;
}
.flexing {
display: flex;
margin-top: 70px;
justify-content: center;
}
.flexing i {
display: flex;
line-height: inherit;
width: 150px;
height: 150px;
border-radius: 50%;
background: whitesmoke;
align-items: center;
justify-content: center;
font-size: 60px;
color: grey;
margin: auto;
}
.flexing i:hover {
background: lightgreen;
color: white;
transition: all 0.5s;
}
.aboutus a {
width: 180px;
border: 2px solid white;
color: white;
background: lightgreen;
border-radius: 50px;
display: block;
margin: 100px auto 0;
padding: 10px 0;
text-decoration: none;
}
.aboutus a:hover {
background: black;
color: white;
transition: all 0.5s;
}
/* LOREM IPSUM PART */
.grid {
display: flex;
justify-content: space-between;
}
.lorem {
background: white;
padding: 10px 0 40px;
flex: 1;
margin-top: 0px;
}
.lorem img {
display: block;
margin-top:70px;
max-width: 600px;
height: auto;
}
.lorem h2 {
font-size: 60px;
line-height: 96px;
font-weight: 200;
}
.lorem p {
padding: 50px 0;
}
.lorem a {
width: 180px;
border: 2px solid white;
color: white;
background: lightgreen;
border-radius: 50px;
display: block;
text-align: center;
padding: 10px 0;
text-decoration: none;
}
.lorem a:hover {
background: black;
color: white;
transition: all 0.5s;
}
#work {
background: rgb(238, 237, 237);
}
.lorem-text1 {
margin-left: 45px ;
}
.lorem-text2 {
margin-right: 45px;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 769px) {
header {
width: 100%;
}
header.sticky {
padding: 5px 0;
}
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
.show-menu {
max-height: 400px;
}
.menu li:hover {
background-color: grey;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 15px;
text-align: center;
display: block;
}
nav ul li a {
display: block;
font-size: 20px !important;
font-weight: bold;
}
.menu-icon {
display: block;
}
.logo h1 a img {
padding-top: 5px;
}
/* ABOUT US */
.aboutus {
padding: 30px 0;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
}
.aboutus h2 , .lorem h2 {
font-size: 40px;
line-height: 58px;
}
.aboutus h2, .aboutus h5 {
margin-left: auto;
margin-right: auto;
}
/* .aboutus p.top {
padding: 35px 0 30px;
} */
.aboutus i {
width: 125px;
height: 125px;
padding-top: 8%;
}
.aboutus h3 {
padding: 20px 0 20px;
}
.aboutus p {
padding-bottom: 20px;
margin: auto;
}
.aboutus a {
margin: 25px auto 0;
}
.container {
max-width: 100%;
}
section.item {
text-align: center;
}
.flexing i {
align-items: center;
height: 100px;
}
/* LOREM */
.lorem p {
padding: 10px 0;
}
.lorem {
padding: 30px 0;
width: 100%;
margin-top: -30px;
}
.lorem img {
width: 100%;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
}
.lorem-text1 {
margin: auto;
width: 90%;
text-align: center;
word-wrap: break-word;
}
.lorem-text2 {
margin: auto;
width: 90%;
text-align: center;
word-wrap: break-word;
}
.flexing {
flex-direction: column;
width: 100%;
}
.flexing div {
width: 90%;;
}
.grid {
flex-direction: column;
width: 90%;
}
#dorem a{
margin-bottom: 30px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#work {
background: white;
}
#work a {
margin: auto;
}
.dorem {
/* display: flex; */
flex-direction: column-reverse;
/* margin: auto; */
}
}
@media only screen and (max-width: 990px){
.lorem p {
padding: 10px 0;
}
.lorem {
padding: 30px 0;
width: 100%;
margin-top: -30px;
}
.lorem img {
width: 100%;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
}
.lorem-text1 {
margin: auto;
width: 90%;
text-align: center;
word-wrap: break-word;
}
.lorem-text2 {
margin: auto;
width: 90%;
text-align: center;
word-wrap: break-word;
}
.flexing {
flex-direction: column;
width: 100%;
}
.flexing div {
width: 90%;;
}
.grid {
flex-direction: column;
width: 90%;
}
#dorem a{
margin-bottom: 30px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
#work {
background: white;
}
#work a {
margin: auto;
}
.dorem {
/* display: flex; */
flex-direction: column-reverse;
/* margin: auto; */
}
}
Комментарии:
1. К вашему сведению, тег заголовка не закрыт.
2. Это так, я просто неправильно скопировал его. 🙂
3. Добавьте это в свой вопрос.
4. Ссылка или пример codepen были бы полезны
5. Отредактированный вопрос.
Ответ №1:
Я подозреваю, что ваш класс .container может вызывать проблему с центрированием, его ширина составляет 80%. Это работает, но с ним легче работать, если он равен 100%, а затем отодвигается с каждой стороны экрана со значением отступа или поля с каждой стороны. У вас есть автоматическое поле с каждой стороны, например, вы можете использовать поле 5% с каждой стороны. Если вам нужно использовать overflow: hidden на всей странице, что-то не так, это означает, что проблемы будут распространяться. Отмените переполнение: скрыто и попытайтесь найти элемент, который выступает справа. Это неправильный элемент. Контейнер может составлять 80% от этого слишком широкого элемента, и все внутри него будет немного смещено от центра.
Комментарии:
1. Ну, как я уже упоминал, навигационное меню торчало справа. Итак, я добавил к нему overflow: hidden. Что меня сбивает с толку, так это то, что иногда, когда страница сжимается, она выглядит нормально, а иногда и нет. Может быть, это браузер? Или, может быть, что-то не так с шириной, но что? Что касается центрирующей части, я добавил margin-left: 5% aa и, похоже, это работает. Это может быть немного «грубый» метод, но если он работает и является законным, я воспользуюсь им.
2. Как я уже упоминал, если навигационное меню выступало вправо, это ошибка из-за плохо структурированного html или css. На здоровой веб-странице нет такого понятия, как нежелательное переполнение. Эта ошибка должна быть исправлена в первую очередь, а затем последующие ошибки может быть легче исправить.