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 you have read our privacy policy.

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