0
0

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>КиноМонстр - это портал о кино</title>
<meta name="description" content="Киномонстр - это портал о кино" />
<meta name="keywords" content="фильмы, фильмы онлайн, hd" />
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>

@media only screen
and (min-device-width: 320px)
and(max-device-width: 568px){

.header{
min-width: 100%;
height: 20%;
text-align: center;

}

.logo{
width: 100%;

}

.site_content{
width: 100%;

}
.menubar{
width: 100%;
height: 100%;
}

.site_content{
width: 100%;
text-align: center;
}
}


Диана Хребтова
3 years ago






погуглите по свойствам min/max-device-width, попробуйте использовать так

@media only screen

and (min-width : 320px)
and (max-width : 568px)

Вадим Семенов
3 years ago

Один ответ