Как избавиться от некоторых интервалов, когда сайт переключается на мобильный вид
Я пытаюсь создать целевую страницу, на которой люди будут нажимать на веб-сайт, на который они хотят перейти. Я новичок в программировании и мне нужна помощь с мобильной версией сайта. Есть некоторый интервал, от которого я хочу избавиться, но я не уверен, как это сделать.
Здесь я пытаюсь избавиться от промежутков между блоками изображения в мобильной версии. Мобильная версия сайта
Спасибо!
CSS
body {
width:100%;
height: 100%;
margin: 0;
}
.flex {
display:flex;
max-width: 80%;
}
.flex div{
flex:1;
padding:20px;
}
img{
margin:30% auto 30%;
width:100%;
@media only screen and (max-width:620px) {
.flex, .flex div, img {
display:inline;
width:100%;
float:left;
}
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<body>
<div class = "flex">
<div>
<img src = "https://via.placeholder.com/926x1104" />
</div>
<div>
<img src = "https://via.placeholder.com/926x1104" />
</div>
<div>
<img src = "https://via.placeholder.com/926x1104" />
</div>
</div>
</body>
</html>
Ответы 2
Вы должны предоставить нам больше информации. Но чтобы избавиться от всех пробелов, вы можете попробовать это для мобильных устройств:
@media only screen and (max-width:620px) {
.flex, .flex div, img {
display:inline;
width:100%;
float:left;
max-width: 100%;
padding: 0;
margin: 0;
}
Извините, мне было трудно объяснить, что я пытался сделать. .Но ваш код, похоже, исправил интервал! Спасибо!
Несколько вещей, которые необходимо изменить:
убейте поплавок, который у вас есть в медиа-запросе. Вы используете flex, поэтому
Добавьте сброс как в html, так и в тело.
В медиазапросе используйте justify-content и flex-direction. Установите максимальную ширину на 100%
TL: DR того, что было неправильно, заключалось в том, что вы плавали элементы в медиа-запросе и давали им ширину менее 100%, поэтому они не были сосредоточены на мобильных устройствах.
html, body {
width:100%;
height: 100%;
margin: 0;
padding: 0;
}
.flex {
display:flex;
max-width: 80%;
}
.flex div{
flex:1;
padding:20px;
}
img{
margin:30% auto 30%;
width:100%;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
img:hover {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
@media only screen and (max-width:620px) {
.flex {
justify-content: center;
flex-direction: column;
max-width:100%;
}
}<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
</head>
<body>
<div class = "flex">
<div>
<img src = "https://via.placeholder.com/926x1104" />
</div>
<div>
<img src = "https://via.placeholder.com/926x1104" />
</div>
<div>
<img src = "https://via.placeholder.com/926x1104" />
</div>
</div>
</body>
</html>Надеюсь это поможет.
Пожалуйста, создайте рабочий пример скрипта js, чтобы мы могли увидеть его визуально. Также избавьтесь от всех этих префиксов -moz и -webkit, они режут наши глаза, и они вам больше не нужны.