Адаптация под мобильное устройство

133
11 ноября 2019, 11:10

В мобильной версии, элементы (кроме карусели) не адаптируются под ширину страницы при увеличении ширины экрана.

<div class="container">
    <div class="headerInner">
        <h2 class="zao">ЗАО "ВОЛОК"</h2>
        <div>
            <p class="new_par">Производство и продажа пиломатериалов</p>
            <p class="new_par">Производство и продажа пиломатериалов</p>
        </div>
        <div class="w3-content w3-display-container obratnyu_s" >
            <img class="mySlides" src="img/slaider.jpg" style="width:100%; height: 300px">
            <img class="mySlides" src="img/slaider2.jpg" style="width:100%; height: 300px">
            <button class="w3-button w3-black w3-display-left" onclick="plusDivs(-1)">&#10094;</button>
            <button class="w3-button w3-black w3-display-right" onclick="plusDivs(1)">&#10095;</button>
        </div>
        <style>
            .mySlides {display:none;}
        </style>
        <script>
            var slideIndex = 1;
            showDivs(slideIndex);
            function plusDivs(n) {
                showDivs(slideIndex += n);
            }
            function showDivs(n) {
                var i;
                var x = document.getElementsByClassName("mySlides");
                if (n > x.length) {slideIndex = 1}
                if (n < 1) {slideIndex = x.length}
                for (i = 0; i < x.length; i++) {
                    x[i].style.display = "none";
                }
                x[slideIndex-1].style.display = "block";
            }
        </script>
</div>
    <div class="row mt-30">
        <div id="main_form_wrapper">
            <div id="obr_s" style="width: 370px; margin: -402px 20px; background: lightgray; padding: 20px; height: 300px; min-width: 30%">
                <p style="color: black; text-align: center; font-size: 20px">Обратная связь</p>
                <form action="sendMessage.php" method="POST" id="main_form">
                    <input name="name" type="text" id="main_name" placeholder="Ваше Имя:">
                    <input name="email" id="main_email" type="email" placeholder="Ваш Email:">
                    <input name="phone" id="main_telephone" type="tel" placeholder="Ваш номер телефона:">
                    <button class="btn btn-default btn-head mt-20 mb-50">Отправить заявку</button>
                </form>
            </div>
        </div>
    </div>
@media (max-width: 600px) {
h5,.eschool .demo3 .excellence h5{font-size: 25px;}
h2{font-size: 36px;}
.btn{padding: 10px 20px !important;}
h1{font-size: 30px;}
.eschool .demo3 .header .video,.eschool .demo3 .header{margin-bottom: 0;}
h2.zao{ margin-left: 12%;}
.new_par{margin-left: 2%; font-size: 19px; margin-bottom: 50px; margin-top: 75px;}
.w3-content.w3-display-container {
    margin: 25%;
}
#main_form_wrapper {
    margin-left: -687px;
    margin-top: 400px;
}
READ ALSO
Как сделать обработку нажатия на какой-либо тег с конкретным классом?

Как сделать обработку нажатия на какой-либо тег с конкретным классом?

К примеру, у нас есть какой-то div, при нажатии на ссылку которого происходит смена класса в другом диве:

123
Баг в канвасе при отрисовке второго круга возникает линия

Баг в канвасе при отрисовке второго круга возникает линия

Есть канвас, на нем сетка, которую можно перерисовывать по нажатию на кнопки

143
Съезжает верстка

Съезжает верстка

Есть таймлайн на сайте, при попытке редактировать текст(уменьшить количество символов), вся верстка едет к чертямНе понимаю в чем дело CSS:

123
Не удается посмотреть стили

Не удается посмотреть стили

Пару раз сталкивался с сайтами, на которых нельзя посмотреть стили страницы, те допустим я сижу с хрома, и кликая правой кнопкой мыши - ноль...

119