Col-md-6 не отвечает на мобильных устройствах

У меня есть следующий раздел на рабочем столе, и мне нужно сделать в мобильном изображении вверху, а оранжевое поле внизу, но изображение перекрывает все.

Рабочий стол

МОБИЛЬНЫЙ Col-md-6 не отвечает на мобильных устройствах

.second-section .box-orange {
  background-image: url("/img/fundo2.png");
  height: 400px;
  color: white;
  margin-top: 10%;
  margin-bottom: 10%;
}

.second-section .box-orange img {
  height: 550px;
  margin-top: -10%;
  margin-left: 2%;
  object-fit: cover;
}

.second-section .box-orange h3 {
  font-size: 2.5em;
  margin-bottom: 5%;		
}

.second-section .box-orange h3 .line {
  font-size: 2.5em;
  margin-bottom: 5%;		
}

.second-section .box-orange p {
  font-size: 2.5em;
  margin-bottom: 5%;		
}

<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<section class = "second-section">
  <div class = "container">
    <div class = "row align-items-center box-orange">
      <div class = "col-md-6">
        <img class = "w-100" src = "img/campos.png">
      </div>
      <div class = "col-md-6 ml-5 ml-md-0 text-center">
        <h3>lorem lorem! <div class = "line"></div>
        </h3>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum nulla quod alias odio perspiciatis architecto, possimus, aliquid repellendus totam, quos nihil similique. Laborum eaque ipsa beatae amet sapiente temporibus. Rerum.
        </p>
      </div>
    </div>
  </div>
</section>

<script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Я не знаю, должен ли я структурировать свой CSS по-другому или какой-то носитель хочет оставаться таким, как мне нужно.

Нужно оставаться таким в мобильном телефоне.

Col-md-6 не отвечает на мобильных устройствах

После добавления медиа результат был такой.

@media only screen and (max-width: 800px) {
 .second-section img {
  height: unset;
  margin-left:unset;
}

 .textdiv {
  margin-left:0px;

}
}

Col-md-6 не отвечает на мобильных устройствах

Вы написали какой-нибудь медиа-запрос? Если нет, то удалите абсолютную позицию в медиа-запросе, и она будет работать для мобильного устройства.

— 11.06.2019 04:37

пожалуйста, добавьте CSS на SO, не добавляйте сюда scss

— 11.06.2019 07:39

1) загрузочная сетка распределена на 12 столбцов 2) класс: col-xs-6 представляет (6 столбцов для сверхмалых устройств, таких как мобильные) col-sm-6 представляет (6 столбцов для небольших устройств, таких как Ipad col-md-6 ( 6 столбцы для среднего устройства) и т. д. 3) Чтобы исправить это, вы можете использовать соответствующий класс, он будет работать

— 11.06.2019 12:58

col-xs-6 не работает,

— 11.06.2019 22:56

html css twitter-bootstrap sass bootstrap-4

11.06.2019 03:13

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

129

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

HTML-код:

<!DOCTYPE html>
<html>
    <head>
        <link rel = "stylesheet" type = "text/css" href = "my.css">
        <meta name = "viewport" content = "width=device-width, initial-scale=1">
        <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
        <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
        <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
        <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>     
    </head>
    <body>
        <section class = "second-section">
            <div class = "container">
                <div class = "row align-items-center box-orange">
                    <div class = "col-md-6">
                    <img class = "w-100" src = "img.jpg">
                    </div>
                    <div class = "col-md-6 ml-md-0 text-center textdiv">
                    <h3>lorem lorem! <div class = "line"></div></h3>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eum nulla quod alias odio perspiciatis architecto, possimus, aliquid repellendus totam, quos nihil similique. Laborum eaque ipsa beatae amet sapiente temporibus. Rerum.</p>
                    </div>
                </div>
            </div>
        </section>  
    </body>    
</html>

CSS:

Мой.css:

.box-orange {
background-image: url("/img/fundo2.png");
height: 400px;
color: white;
margin-top: 10%;
margin-bottom: 10%;
}
.second-section img {
  height: 550px;
  margin-top: -10%;
  margin-left: 2%;
  object-fit: cover;
}
.second-section h3 {
  font-size: 2.5em;
  margin-bottom: 5%;
}
.second-section.line {
    width: 80%;
    border: 2px solid #77d3c2;
    position: absolute;
    left: 33%;
    top: 100%;
  }

  .second-section p {
  font-size: 1.4em;
  padding: 0% 10%;
}
.textdiv {
  margin-left: 3rem;
}

@media only screen and (max-width: 800px) {
    .second-section img {
      height: unset;
      margin-left:unset;

    }

    .textdiv {
      margin-left:0px;

    }
}

Поскольку вы указали фиксированную высоту изображения, и эта же высота применяется и к мобильной версии, чтобы исправить это, я включил медиа-запрос

Проверьте это, это сработает

добавьте col-xs-6 в это место

— 11.06.2019 13:19

11.06.2019 06:58