Колонки не ведут себя правильно на маленьком экране - PullRequest
Новая
       6

Колонки не ведут себя правильно на маленьком экране

0 голосов
/ 29 января 2019

У меня есть веб-страница, которая отображает 2 столбца.На ПК две колонки отображаются точно так, как я хочу, но при просмотре на экране мобильного устройства происходит что-то не так.

На экране мобильного устройства я хочу, чтобы вторая колонка опустилась ниже первой колонки, и я хочу, чтобы обе колонкибыть в центре экрана, но получается, что первый столбец находится слева от экрана, а второй столбец (который является фидом Facebook) слишком широк для экрана, хотя я установил ширину на 80%.

Вот мой HTML: 

<div class="section group">
<div class="col span_1_of_2">
<img class="img11" src="images/trout.jpg" alt="trout" title="The Trout Inn">
<hr style="width: 100%"/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus neque eu felis condimentum ullamcorper. Aliquam erat volutpat. Phasellus viverra lectus dignissim ex ultricies ornare. Donec interdum massa non neque consectetur, eget molestie libero faucibus. Nulla gravida finibus libero, eu dictum turpis porta a. Donec ex tellus, dictum et massa eget, mattis suscipit justo. Vivamus tempus enim at nibh lobortis semper vitae sed mi. Mauris efficitur ipsum a nulla ultricies, sed ultrices ligula dignissim
</div>
<div class="col span_2_of_2">
<label>Our Facebook Feed</label>
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Ftesttest%2F&tabs=timeline&width=340&height=1000&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=999999" width="340" height="1000" style="border:none;overflow:hidden" allow="encrypted-media"></iframe>
</div>
</div><!-- section  group -->

, а вот мой css: 

/*  SECTIONS  */
.section {
    clear: both;
    padding: 0px;
    margin: auto;
    width: 60%;
    }

/*  COLUMN SETUP  */
.col {
    display: block;
    float:left;
    margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }


/*  GROUPING  */
.group:before,
.group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}
.group {
    zoom:1; /* For IE 6/7 */
}

/*  GRID OF TWO  */
.span_1_of_2 {
    width: 63.1%;
padding-right: 15px;
border-right-style: solid;
border-color: #444444;
border-width: 1px;
}
.span_2_of_2 {
    width: 32.2%;
}

/*  IF screen is LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
/*  SECTIONS  */
.section {
    clear: both;
    padding: 0px;
    margin: auto;
    width: 90%;
    }

/*  COLUMN SETUP  */
.col {
    display: block;
    margin: auto;
}
.col:first-child { margin-left: 0; }


/*  GROUPING  */
.group:before,
.group:after {
    content:"";
    display:block;
margin: auto;
}
.group:after {
    clear:both;
}

/*  GRID OF THREE  */
.span_1_of_2 {
padding: 0px;
border: none;
display: block;
margin: auto;
    width: 70%;
}
.span_2_of_2 {
padding: 0px;
border: none;
display: block;
margin: auto;
    width: 50%;
}
}

Я пытался изменить множество параметров в CSS, но не могу заставить его работать итеперь я потерян для вариантов.

Может ли кто-нибудь помочь мне выровнять эти столбцы?

Большое спасибо

Tog

1 Ответ

0 голосов
/ 29 января 2019

с помощью направления flex & flex вы можете изменить расположение столбцов.

вы можете прочитать больше здесь https://css -tricks.com / snippets / css / a-guide-to-flexbox / 

.section{display:flex;flex-direction:column;}
.span_1_of_2{flex:1;padding:5px;}
.span_2_of_2{flex:1;padding:5px}

@media screen and (min-width:768px){
.section{display:flex;flex-direction:row;}
}
<div class="section group">
<div class="col span_1_of_2">
  <img class="img11" src="images/trout.jpg" alt="trout" title="The Trout Inn">
  <hr style="width: 100%"/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer finibus neque eu felis condimentum ullamcorper. Aliquam erat volutpat. Phasellus viverra lectus dignissim ex ultricies ornare. Donec interdum massa non neque consectetur, eget molestie libero faucibus. Nulla gravida finibus libero, eu dictum turpis porta a. Donec ex tellus, dictum et massa eget, mattis suscipit justo. Vivamus tempus enim at nibh lobortis semper vitae sed mi. Mauris efficitur ipsum a nulla ultricies, sed ultrices ligula dignissim
  </div>
<div class="col span_2_of_2">
  <label>Our Facebook Feed</label>
  <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Ftesttest%2F&tabs=timeline&width=340&height=1000&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=999999" width="340" height="1000" style="border:none;overflow:hidden" allow="encrypted-media"></iframe>
  </div>
</div><!-- section  group -->
...