Сделайте UL мобильным

Question

Я пытаюсь добавить СВЯЗАННЫЕ ПОСТЫ в мой блог на https://reviewyourgear.com

Я могу заставить его выглядеть примерно так, как я хочу на рабочем столе / планшете ... но мобильный телефон выглядит ужасно.

Я пытаюсь получить по одному на строку на малых экранах мобильных устройств и по 2 на строку на больших экранах.

Есть идеи, что я делаю не так? ОГРОМНОЕ СПАСИБО !!!

Я использую следующий CSS для моего UL:

.relatedposts {width: 100%; margin: 5px 1px 1px 1px; float: left; font-size: 15px; background-color: #000000;}
.relatedposts h3 {color :#ffffff; font-size: 20px; margin: 5px 5px 5px 5px; }
.relatedthumb {margin: 0 1px 0 1px; float: left;}
.relatedthumb img {margin: 0 0 3px 0; padding: 0;}
.relatedthumb a {color :#ffffff; text-decoration: none; display:block; padding: 1px; width: 150px;}
.relatedthumb a:hover {background-color: #000000; color: #ada771;}
.relatedposts ul {
    margin-top: 10px;
    list-style-type:none;
    display:flex;
    justify-content: center;    
}

@media (max-width: 960px) and (min-width: 501px) {
    .relatedposts li { width: 50%; } /* Show 2 logos per row on medium devices (tablets, phones in landscape) */
}
@media (max-width: 500px) {
    .relatedposts li { width: 100%; } /* On small screens, show one logo per row */
}

Вот мой КОД СВЯЗАННЫХ ПОСТОВ (в single.php в Wordpress):

<div align="center">        
                <div class="relatedposts">
<?php $orig_post = $post;
global $post;
$categories = get_the_category($post->ID);
if ($categories) {
$category_ids = array();
foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;

$args=array(
'category__in' => $category_ids,
'post__not_in' => array($post->ID),
'posts_per_page'=> 3, // Number of related posts that will be shown.
'caller_get_posts'=>1
);

$my_query = new wp_query( $args );
if( $my_query->have_posts() ) {
echo '<div id="related_posts"><h3>Related Reviews and Articles</h3><ul>';
while( $my_query->have_posts() ) {
$my_query->the_post();?>

<div class="relatedthumb">
<li style="list-style: none;"><div class="relatedthumb"><a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_post_thumbnail(); ?></a></div>
<div class="relatedcontent">
<a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a>
</div>
      </div>
</li>
<?
}
echo '</ul></div>';
}
}
$post = $orig_post;
wp_reset_query(); ?>
                </div></div>

Answer 1

В вашем css вы должны добавить flex-wrap к списку.

.relatedposts ul {
    flex-wrap: wrap;
}

W3schools flex-wrap учебник и демо .

Более подробная информация, различные подходы в предыдущих вопросах:

1. количество элементов в строке с использованием медиа-запросов во flexbox
2. Flexbox - Cater for 2,3 или 1 предмет в строке

Answer 2

У вас есть небольшая проблема с вашим div и вложением.Это должно быть так:

<div align="center">
<div class="relatedposts">
    <?php $orig_post = $post;
    global $post;
    $categories = get_the_category($post->ID);
    if ($categories) {
        $category_ids = array();
        foreach ($categories as $individual_category) $category_ids[] = $individual_category->term_id;
        $args = array(
            'category__in' => $category_ids,
            'post__not_in' => array($post->ID),
            'posts_per_page' => 3, // Number of related posts that will be shown.
            'caller_get_posts' => 1
        );
        $my_query = new wp_query($args);
        if ($my_query->have_posts()) {
            echo '<div id="related_posts"><h3>Related Reviews and Articles</h3><ul>';
            while ($my_query->have_posts()) {
                $my_query->the_post(); ?>

                <li style="list-style: none;">
                    <div class="relatedthumb">
                        <a href="<? the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_post_thumbnail(); ?></a>
                    </div>
                    <div class="relatedcontent">
                        <a href="<? the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a>
                    </div>
                </li>
                <?
            }
            echo '</ul></div>';
        }
    }
    $post = $orig_post;
    wp_reset_query(); ?>

</div></div>

Что касается CSS - вы должны добавить «flex-wrap: wrap» ваши декларации flex:

.relatedposts {width: 100%; margin: 5px 1px 1px 1px; float: left; font-size: 15px; background-color: #000000;}
.relatedposts h3 {color :#ffffff; font-size: 20px; margin: 5px 5px 5px 5px; }
.relatedthumb {margin: 0 1px 0 1px; float: left;}
.relatedthumb img {margin: 0 0 3px 0; padding: 0;}
.relatedthumb a {color :#ffffff; text-decoration: none; display:block; padding: 1px; width: 150px;}
.relatedthumb a:hover {background-color: #000000; color: #ada771;}
.relatedposts ul {
    margin-top: 10px;
    list-style-type:none;
    display:flex;
    justify-content: center;
    flex-wrap: wrap;
}
@media (max-width: 960px) and (min-width: 501px) {
    .relatedposts li { width: 50%; } /* Show 2 logos per row on medium devices (tablets, phones in landscape) */
}
@media (max-width: 500px) {
    .relatedposts li { width: 100%; } /* On small screens, show one logo per row */
}

Я также предложу сделать2 элемента подряд "li" 49% или даже 48%, поэтому между ними будет свободное пространство.