Отзывчивая колонка для мобильного - PullRequest
Новая
       38

Отзывчивая колонка для мобильного

0 голосов
/ 19 марта 2019

У меня есть 3 столбца, созданные в HTML. Все это выглядит хорошо, но столбец со встроенным Twitter не будет иметь тот же размер, если размер браузера уменьшен или при просмотре на мобильном телефоне.

Mobile View Mobile view

Рабочий стол 1 Desktop View

Рабочий стол 2

Desktop View 2

Независимо от того, что я делаю, оно всегда либо слишком большое, либо слишком маленькое. У меня это в 

<div class="twitterContainer">

Потому что твиттер продолжает выходить за границы.

Я пробовал медиазапросы, как видно из этого ответа

Ответ на стек

Вот мой последний код: 

<!-- wp:columns {"columns":3} -->
<div class="wp-block-columns has-3-columns">
<!-- wp:column -->
<div class="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 --></div>

<!-- wp:column -->
<div class="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>

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

<div class="wp-block-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 --></div>
<!-- /wp:column --></div></div>
</div>
</div>
<!-- /wp:columns -->

* редактировать CSS Добавлено 

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

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

Что я делаю не так? ТИА

** Редактировать

Image mis alignment

1 Ответ

0 голосов
/ 19 марта 2019

Хорошо.Таким образом, у вас есть wp-block-column внутри вашего twitterContainer.Удалите внутренний контейнер и соедините 2 класса в 1 деление.

Так вот: 

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

<div class="wp-block-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 --></div>
<!-- /wp:column --></div>

Получается так: 

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