col-md-6 не реагирует на мобильные - PullRequest
Новая
       18

col-md-6 не реагирует на мобильные

1 голос
/ 11 июня 2019

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

Desktop

DESKTOP

MOBILE how is doing in mobile

.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 по-другому, или я хочу, чтобы какой-то тип медиа оставался таким, каким он мне нужен.

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

mobile

После добавления носителя получился следующий результат. 

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

 .textdiv {
  margin-left:0px;

}
}

result after media querie

1 Ответ

0 голосов
/ 11 июня 2019

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:

My.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;

    }
}

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

Проверьте, это будет работать

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...