0

Я еще не совсем разобрался во флексбоксах и не могу понять, как сделать так, что бы при масштабировании или открытии на мобильных устройствах бокс с информацией перемещался влево. Как можно это сделать?

Как сделать

* {
  margin: 0; 
  padding: 0;
}
body {  
  background-color: #f2f2f2;
  font-family: "Futura PT", sans-serif;
  -webkit-font-smoothing: antialiased;
  /* для корректного отображения текста на всех экранах*/
  -webkit-overflow-scrolling: touch;
  /*для нормального скроллинга*/
}
.header-top {
   height:40px;
    background: #ffffff;
    line-height:40px;    
}
main{
  display: flex;
  flex-direction: column;
  width: 90%;
}

main .top-slide{
  background: url(img/Чуваки.png);
  width: 1240px;
  height: 376px;
  margin-top: 5%;
  margin-left: 5%; 
  margin-right: 5%;
  margin-bottom: 5%;
  display: block;
  vertical-align: middle;
}

.box-white{
  background-color: #ffffff;
  width: 292px;
  height: 292px;  
  position: absolute;
  margin-top: 42px;
  margin-left: 860px; 
  margin-right: 86px;
  margin-bottom: 42px;
}

.first-p{
  width: 262px;
  height: 37px;
  color: #5497cc;
  font-family: "Futura PT";
  font-size: 20px;
  font-weight: 300;
  position: absolute;
  margin-top: 18px;
  margin-right: 16px;  
  margin-bottom: 243px;
  margin-left: 14px; 
}

.cool-p{
  width: 262px;
  height: 59px;
  color: #000000;
  font-family: "Futura PT";
  font-size: 20px;
  font-weight: 600;
  position: absolute;
  margin-top: 48px;   
  margin-right: 15px;
  margin-bottom: 185px;
  margin-left: 15px;
}
.third-p{
  width: 262px;
  height: 86px;
  color: #000000;
  font-family: "Futura PT";
  font-size: 16px;
  font-weight: 300;
  position: absolute;
  margin-top: 119px;   
  margin-right: 15px;
  margin-bottom: 87px;
  margin-left: 15px;
}
.read-more-p a{  
  width: 95px;
  height: 37px;
  color: #5497cc;
  font-family: "Futura PT";
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
  position: absolute;
  margin-top: 253px;   
  margin-right: 51px;
  margin-bottom: 2px;
  margin-left: 146px;
}
.read-more-p img{
  position: absolute;
  margin-top: 257px;   
  margin-right: 31px;
  margin-bottom: 23px;
  margin-left: 247px;
}
<header>
  <div class="header-top">
    Header top
  </div>
</header>
<div id="container" style="width:1366px;margin:0 auto;">
  <!-- С помощью этого кода мы центрируем сайт-->	
<main>
<section class="top-slide">
  <section class="box-white">
    <p class="first-p">Головне</p>
    <p class="cool-p">Тут буде також дуже крутий заголовок</p>
    <p class="third-p">Integer quis interdum libero. Praesent et ante et dolor tincidunt semper. Nulla id nibh vel metus molesti</p>
    <p class="read-more-p"><a href="#">Читати далі</a><img src="img/arrow.png" alt="arrow"></p>				
  </section>
</section>

3
  • Или на флоатах.
    – Nulliza
    2 авг 2018 в 8:37
  • Просто задайте блокам которые должны масштабироваться относительную ширину в %
    – midia
    2 авг 2018 в 8:44
  • Нужно чтобы плавно перемещался влевый край? 9 авг 2018 в 18:05

1 ответ 1

1

Я так понял, что тебя надо, чтоб на мобильных экранах бокс перемещался влево.

@media(max-width: 991px) {
    .content {
        justify-content: flex-start;
    }
}

Вот игра, которая тебе поможет разобраться во flex'ах: http://flexboxfroggy.com/#ru

1
  • Да я уже разобрался и все сделал с помощью медиа запроса. За игру спасибо)
    – Nulliza
    10 авг 2018 в 14:31

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.