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

Question

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

0

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

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

<div class="row" style="margin-top: 3%">
    <div class="small-3 columns">
        <h2 class="entry-title">Articles</h1>
    </div>

    <div class="small-9 columns">

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

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

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

                    <div class="small-3 columns">
                        <?php get_template_part( 'content-box', get_post_format() ); ?>                             
                    </div>

                <?php endwhile; ?>              

            <?php endif; ?>

    </div>          
</div>

ple103 14 дек. 2013, в 06:58

Источник

Теги:

html

zurb-foundation

css

1 ответ

Ещё вопросы

Santiago Baigorria · Accepted Answer · 2013-12-14T07-59-00.000Z

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

Например, для экранов размером менее 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%; }
}

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

Удача!