Добрый день ! Есть проблема при адаптаций экрана 595x740 размер контейнера bootstrap col-md не меняется. Мне нужно чтобы при адаптаций экрана 595х740 показывало по 2 слайда.Как это сделать?
main.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="main.css" rel="stylesheet">
<link rel="stylesheet" href="css/font-awesome.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="wrapper">
<header>Номер и почта</header>
<main>
<nav>
<ul class="topmenu">
<li><a href="" class="active">Главная</a>
</li>
<li><a href="" class="">Вниз<span class="fa fa-angle-down"></span></a>
<ul class="submenu">
<li><a href="">меню второго уровня 0<span class="fa fa-angle-down"></span></a>
<ul class="submenu">
<li><a href="">меню третьего уровня</a></li>
<li><a href="">меню третьего уровня</a></li>
<li><a href="">меню третьего уровня </a></li>
</ul>
</li>
<li><a href="">меню второго уровня 1<span class="fa fa-angle-down"></span></a>
<ul class="submenu">
<li><a href="">меню третьего уровня</a></li>
<li><a href="">меню третьего уровня</a></li>
<li><a href="">меню третьего уровня </a></li>
</ul>
</li>
<li><a href="">меню второго уровня 2<span class="fa fa-angle-down"></span></a>
<ul class="submenu">
<li><a href="">меню третьего уровня</a></li>
<li><a href="">меню третьего уровня</a></li>
<li><a href="">меню третьего уровня </a></li>
</ul>
</li>
<li><a href="">меню второго уровня 2<span class="fa fa-angle-down"></span></a>
<ul class="submenu">
<li><a href="">меню третьего уровня</a></li>
<li><a href="">меню третьего уровня</a></li>
<li><a href="">меню третьего уровня </a></li>
</ul>
</li>
</ul>
</li>
<li><a href="" class="">Вниз тритий уровень<span class="fa fa-angle-down"></span></a>
<ul class="submenu">
<li><a href="">Вправо 1<span class="fa fa-angle-down"></span></a>
<ul class="submenu">
<li><a href="">меню третьего уровня</a></li>
<li><a href="">меню третьего уровня</a></li>
<li><a href="">меню третьего уровня </a></li>
</ul>
</li>
<li><a href="">Вправо 2<span class="fa fa-angle-down"></span></a>
<ul class="submenu">
<li><a href="">меню третьего уровня</a></li>
<li><a href="">меню третьего уровня</a></li>
<li><a href="">меню третьего уровня </a></li>
</ul>
</li>
<li><a href="">Вправо 3<span class="fa fa-angle-down"></span></a>
<ul class="submenu">
<li><a href="">меню третьего уровня</a></li>
<li><a href="">меню третьего уровня</a></li>
<li><a href="">меню третьего уровня </a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">Блог<span class="fa fa-angle-down"></span></a>
<ul class="submenu">
<li><a href="">Вправо 1<span class="fa fa-angle-down"></span></a>
<ul class="submenu">
<li><a href="">меню третьего уровня</a></li>
<li><a href="">меню третьего уровня</a></li>
<li><a href="">меню третьего уровня </a></li>
</ul>
</li>
<li><a href="">Вправо 2<span class="fa fa-angle-down"></span></a>
<ul class="submenu">
<li><a href="">меню третьего уровня</a></li>
<li><a href="">меню третьего уровня</a></li>
<li><a href="">меню третьего уровня </a></li>
</ul>
</li>
<li><a href="">Вправо 3<span class="fa fa-angle-down"></span></a>
<ul class="submenu">
<li><a href="">меню третьего уровня</a></li>
<li><a href="">меню третьего уровня</a></li>
<li><a href="">меню третьего уровня </a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">О нас</a></li>
<li><a href="">Блог</a></li>
<li><a href="">О нас</a></li>
</ul>
</nav>
<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<img src="image/australia.jpg" height="565px" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h1 style="font-size: 60px;">First slide label йцйцуйу уйуйуйуйуйу фыфыфуу</h1>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="image/parks.jpg" height="565px" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="image/skyfoll.jpg" height="565px" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</main>
<content class="tab">
<div class="container-prim">
<div class="element-1">Пункт 1</div>
<div class="element-2">Пункт 2</div>
<div class="element-3">Пункт 3</div>
<div class="element-4">Пункт 4</div>
</div>
<!-- <ul class="zebra">
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
<li>Пункт 3</li>
</ul> -->
</content>
<content class="zero">
<div class="row slider">
<div class="col-md-2">
<div class="details">
<h2>Заголовок 1</h2>
<p>Какая то информация для карусели первый</p>
<a href="">Прочитать</a>
</div>
</div>
<div class="col-md-12">
<div class="details">
<h2>Заголовок 2</h2>
<p>Какая то информация для карусели первый</p>
<a href="">Прочитать</a>
</div>
</div>
<div class="col-md-12">
<div class="details">
<h2>Заголовок 3</h2>
<p>Какая то информация для карусели первый</p>
<a href="">Прочитать</a>
</div>
</div>
<div class="col-md-12">
<div class="details">
<h2>Заголовок 4</h2>
<p>Какая то информация для карусели первый</p>
<a href="">Прочитать</a>
</div>
</div>
<div class="col-md-12">
<div class="details">
<h2>Заголовок 5</h2>
<p>Какая то информация для карусели первый</p>
<a href="">Прочитать</a>
</div>
</div>
<div class="col-md-12">
<div class="details">
<h2>Заголовок 6</h2>
<p>Какая то информация для карусели первый</p>
<a href="">Прочитать</a>
</div>
</div>
<div class="col-md-12">
<div class="details">
<h2>Заголовок 7</h2>
<p>Какая то информация для карусели первый</p>
<a href="">Прочитать</a>
</div>
</div>
</div>
</content>
<footer>Адреса и контактсы</footer>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js" integrity="sha512-HGOnQO9+SP1V92SrtZfjqxxtLmVzqZpjFFekvzZVWoiASSQgSr4cw9Kqd2+l8Llp4Gm0G8GIFJ4ddwZilcdb8A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="main.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<script>
$('.slider').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 4,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
arrows: false
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
arrows: false
}
}
// You can unslick at a given breakpoint now by adding:
// settings: "unslick"
// instead of a settings object
]
});
</script>
</body>
</html>
main.css
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
}
header {
height: 30px;
width:1200px;
margin: 0 auto;
padding: 1px;
}
footer {
height: 300px;
width:1200px;
margin: 0 auto;
padding:10px;
}
main {
}
body {
margin: 0;
}
header {
background-color: #daf0b3f6;
}
main {
background-color:#ecf0f1;
height: 600px;
width: 1200px;
margin: 0 auto;
}
content.tab {
background-color:#66c3ee;
height: 300px;
width:1200px;
margin: 0 auto;
padding:10px;
box-shadow: 0 -5px 5px 0 rgba(50, 50, 50, 0.5);
}
content.zero {
background-color:#b7e9b5;
height: 350px;
width:1200px;
margin: 0 auto;
padding:10px;
box-shadow: 0 -5px 5px 0 rgba(50, 50, 50, 0.5);
}
footer {
background-color:#000000;
color:white;
box-shadow: 0 -5px 5px 0 rgba(65, 62, 99, 0.596);
}
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600&subset=latin,cyrillic);
*{box-sizing: border-box;}
body {
margin: 0;
font-family: 'Open Sans', sans-serif;
}
nav {background: #2fa4e7 ;}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav ul:after {
content: "";
display: table;
clear: both;
}
nav a {
text-decoration: none;
display: block;
transition: .3s linear;
}
.topmenu > li {
float: left;
position: relative;
border-left: 1px solid black;
}
.topmenu > li:first-child {border-left: 0;}
.topmenu > li > a {
padding: 7px 30px;
font-size: 14px;
text-transform: uppercase;
color: #FEFDFD;
letter-spacing: 2px;
}
.topmenu > li > a.active {
color: rgb(0, 0, 0);
}
.submenu a:hover {color: #0037cf;}
.topmenu .fa,
.submenu .fa {
margin-left: 5px;
color: inherit;
}
.submenu {
position: absolute;
z-index: 5;
min-width: 200px;
background: white;
border-top: 1px solid #CBCBCC;
border-left: 1px solid #CBCBCC;
border-right: 1px solid #CBCBCC;
visibility: hidden;
opacity: 0;
transform-origin: 0% 0%;
transform: rotateX(-90deg);
transition: .3s linear;
}
.submenu li {position: relative;}
.submenu li a {
color: #282828;
padding: 10px 20px;
font-size: 13px;
border-bottom: 1px solid #CBCBCC;
}
.submenu .submenu {
position: absolute;
left: 100%;
top: -1px;
transition: .3s linear;
}
nav li:hover > .submenu {
transform: rotateX(0deg);
visibility: visible;
opacity: 1;
}
.container-prim {
font-size: 0;
padding: 10px 50px 15px;
text-align: center;
}
.element-1,
.element-2,
.element-3,
.element-4 {
display: inline-block;
width: 250px;
height: 265px;
font-size: 20px;
font-weight: 500;
text-align: center;
padding-top: 10px;
vertical-align: bottom;
box-shadow: 5px -5px 5px 0 rgb(0, 0, 0);
border-radius: 8px;
}
.element-1 {
background-color: #fbfdfd;
}
.element-2 {
color: rgb(0, 0, 0);
background-color: #fbfdfd;
margin-left: 20px;
}
.element-3 {
color: rgb(0, 0, 0);
background-color: #fbfdfd;
margin-left: 20px;
}
.element-4 {
color: #000000;
background-color: #fbfdfd;
margin-left: 20px;
}
.element-relative {
position: relative;
top: -20px;
left: -20px;
}
/* .zebra {
font: 14px Verdana, Geneva, sans-serif;
text-align: center;
}
.zebra li {
display : inline-block;
width : 250px;
height: 280px;
margin-bottom: 10px;
background: #ffffff;
vertical-align: top;
text-align: center;
line-height: normal;
box-shadow: 5px -5px 5px 0 rgb(0, 0, 0);
/* эмуляция inline-block для IE6-7*/
/* //display : inline;
//zoom : 1;
}
*/
.carousel-caption {
transform: translateY(-50%);
bottom: initial;
top: 50%;
}
.details {
margin: 20px 20px;
background-color: #fff;
padding: 30px 20px;
position: relative;
z-index: 1;
height: 260px;
}
.details h2 {
font-size: 22px;
text-transform: uppercase;
transition: 0.6s all;
}
.details p {
font-size: 14px;
transition: 0.6s all;
}
.details a {
text-decoration: none;
text-transform: capitalize;
color: #fff;
background-color: #2c3e50;
padding: 6px 12px;
display: inline-block;
font-size: 14px;
border: 1px solid #2c3e50;
transition: 0.6s all;
}
.details::before {
content: "";
width: 5px;
height: 100%;
background-color: #ff5722;
position: absolute;
left: 0;
top: 0;
z-index: -1;
transition: 0.6s all;
}
.details:hover::before {
width: 100%;
}
.details:hover h2,.details:hover p {
color: #fff;
}
.details:hover a {
background-color: transparent;
border: 1px solid #fff;
}
