Квадратные прямоугольники изменяются на прямоугольники на меньших экранах

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

Вот код, используемый для отображения строки "Статьи":

<div>
 <div>
 <h2>Articles</h2>
 </div>

 <div>

 <!--?php query_posts( array( 'category_name=articles', 'posts_per_page' =--> 4 ) );?> 

 <!--?php if ( have_posts() ) : ?-->

 <!--?php while ( have_posts() ) : the_post(); ?-->

 <div>
 <!--?php get_template_part( 'content-box', get_post_format() ); ?--> 
 </div>

 <!--?php endwhile; ?--> 

 <!--?php endif; ?-->

 </div> 
</div>
1 ответ

Вы можете легко создать сетку с помощью медиа-запросов.

Например, для экранов размером менее 640 пикселей создайте столбцы на 100%... Это можно сделать, создав точку останова и выбрав, какие правила CSS должны быть ниже этого разрешения экрана.

Вот пример:

.small-9 { width: 40%; } /* At some point, the box will be very small */

так что... вы делаете это:

@media only screen and (max-width: 680px) {
 .small-9 { width: 100%; }
}

Просто как тот. Если вы этого не сделаете, вы можете посмотреть несколько руководств по отзывчивому дизайну или не стесняться оставлять комментарии, и я постараюсь лучше.

Удача!

licensed under cc by-sa 3.0 with attribution.