Столбец не выровнен по центру на мобильном устройстве - PullRequest
Новая
       40

Столбец не выровнен по центру на мобильном устройстве

3 голосов
/ 23 марта 2019

Я создал сайт WP и на главной странице добавил виджет HTML с 3 столбцами. Все хорошо, кроме на мобильном устройстве, три колонки справа от экрана. Я не могу отцентрировать их при просмотре на мобильном устройстве, как показано на рисунке ниже.

Mobile view

<div class="wrapper">
<!-- wp:columns {"columns":3} -->
<div class="wp-block-columns has-3-columns">
<!-- wp:column -->

<div class="wp-block-column"><!-- wp:heading -->
<h2>News</h2>
<!-- /wp:heading -->

<!-- wp:image {"id":482,"align":"center","linkDestination":"custom"} -->
<div class="wp-block-image"><figure class="aligncenter"><a href="http://www.patricianprimaryschool.ie/home/newsletter/"><img src="http://www.patricianprimaryschool.ie/wp-content/uploads/2019/03/Newsletter.png" alt="" class="wp-image-482"/></a> . 
</figure></div>
<!-- /wp:image --></div>
        <!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:heading -->
<h2>Calendar</h2>
<!-- /wp:heading -->

<!-- wp:image {"id":481,"align":"center","linkDestination":"custom"} -->
<div class="wp-block-image"><figure class="aligncenter"><a href="http://www.patricianprimaryschool.ie/home/school-calender/"><img src="http://www.patricianprimaryschool.ie/wp-content/uploads/2019/03/SchoolCalendar-01-1024x1024.png" alt="" class="wp-image-481"/></a></figure></div>
<!-- /wp:image --></div>
        <!-- /wp:column -->


<div class="wp-block-column twitterContainer">
<!-- wp:column -->

<!-- wp:heading -->
<h2>Follow Us</h2>
<!-- /wp:heading -->

<!-- wp:html -->
<a class="twitter-timeline" data-height="300" data-theme="light" href="https://twitter.com/PPSNewbridge?ref_src=twsrc%5Etfw">Tweets by PPSNewbridge</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<!-- /wp:html -->
<!-- /wp:column --></div></div></div>
<!-- /wp:columns -->

И мой CSS: 

 .wp-block-column {
min-width: 220px; 
max-width: 550px; 
}


.wp-block-columns {
margin: 112px;
}

.wp-block-column  {
border: 2px solid #354063;
padding: 2px 10px;
}

Ответы [ 3 ]

1 голос
/ 23 марта 2019

Ваши столбцы имеют максимальную ширину 550 пикселей, а родительский элемент имеет поле в 112 пикселей. Если размер экрана меньше (550 + 120 * 2) = 790 пикселей, столбцы выравниваются вправо. Чтобы предотвратить это, используйте поле 0, если размер экрана меньше 800 пикселей. Используйте следующий CSS для этого. 

@media only screen and (max-width: 800px) {
  .wp-block-columns {
    margin: 0px;
  }
}
1 голос
/ 23 марта 2019

В настоящее время ширина вашего столбца не может быть меньше 220 пикселей: 

.wp-block-column {
    min-width: 220px; 
}

А поля родительского блока приводят к тому, что левый край столбца находится на расстоянии 112 пикселей от левого края экрана: 

.wp-block-columns {
    margin: 112px;
}

Из-за этих двух обстоятельств правый край столбца начинает заходить слишком далеко вправо на узком экране.

Если вы просто прокомментируете это свойство, столбец уменьшится и останется в центре мобильного телефона. Но в этих ключах это становится нечитаемым.

Вам необходимо изменить поведение этого столбца на мобильном устройстве. На узком экране он должен занимать почти всю ширину экрана.

Например: 

.wp-block-column {
	border: 2px solid #354063;
	padding: 2px 10px;
	margin: 0 auto;
	min-width: 220px; 
	max-width: 80%; 
	width: 550px; 
}

.wp-block-columns {
	margin: 112px auto;
}

img {
	max-width: 100%;
}
<div class="wrapper">
<!-- wp:columns {"columns":3} -->
<div class="wp-block-columns has-3-columns">
<!-- wp:column -->

<div class="wp-block-column"><!-- wp:heading -->
<h2>News</h2>
<!-- /wp:heading -->

<!-- wp:image {"id":482,"align":"center","linkDestination":"custom"} -->
<div class="wp-block-image"><figure class="aligncenter"><a href="http://www.patricianprimaryschool.ie/home/newsletter/"><img src="http://www.patricianprimaryschool.ie/wp-content/uploads/2019/03/Newsletter.png" alt="" class="wp-image-482"/></a> . 
</figure></div>
<!-- /wp:image --></div>
        <!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:heading -->
<h2>Calendar</h2>
<!-- /wp:heading -->

<!-- wp:image {"id":481,"align":"center","linkDestination":"custom"} -->
<div class="wp-block-image"><figure class="aligncenter"><a href="http://www.patricianprimaryschool.ie/home/school-calender/"><img src="http://www.patricianprimaryschool.ie/wp-content/uploads/2019/03/SchoolCalendar-01-1024x1024.png" alt="" class="wp-image-481"/></a></figure></div>
<!-- /wp:image --></div>
        <!-- /wp:column -->


<div class="wp-block-column twitterContainer">
<!-- wp:column -->

<!-- wp:heading -->
<h2>Follow Us</h2>
<!-- /wp:heading -->

<!-- wp:html -->
<a class="twitter-timeline" data-height="300" data-theme="light" href="https://twitter.com/PPSNewbridge?ref_src=twsrc%5Etfw">Tweets by PPSNewbridge</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<!-- /wp:html -->
<!-- /wp:column --></div></div></div>
<!-- /wp:columns -->
0 голосов
/ 23 марта 2019

вы можете настроить для мобильных устройств, используя 

@media only screen and (max-width: 600px) {
//your style goes here
body {
background-color: lightblue;
}

}

для получения дополнительной информации посетите w3school

...