在移动设备上并排显示图像

Question

在我的主页上的“快速链接”下，我有一些图像。在桌面上，它们显示得非常完美。然而，在移动设备上则不然。我想让它们在一行中并排显示 3 个（因此第 1 行有 3 个，第 2 行有 3 个，第 3 行有 3 个）。但我不知道该怎么做。我尝试过添加 CSS 和 div 样式，但没有任何效果。我需要帮助。请在幼儿园级别与我交谈，因为我仍在学习这一点。网址：tjsaste.com这是我在 HTML 小部件中的内容（该类试图让它与 CSS 一起使用，但没有成功）：<div id="content-mobile" class="side-by-side"><!-- wp:columns --><div class="wp-block-columns"><!-- wp:column --><div class="wp-block-column"><!-- wp:group --><div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:image {"id":9820,"sizeSlug":"large","linkDestination":"custom"} --><figure class="wp-block-image size-large"><a href="https://tjstaste.com/recipe-index/"><img src="https://tjstaste.com/tjstaste-uploads/2020/02/Recipe-Index-A.png" alt="" class="wp-image-9820"/></a></figure><!-- /wp:image --><!-- wp:image {"id":9810,"sizeSlug":"large","linkDestination":"custom"} --><figure class="wp-block-image size-large"><a href="https://tjstaste.com/category/smoothies-shakes/"><img src="https://tjstaste.com/tjstaste-uploads/2020/02/Smoothies-Shakes-A.png" alt="" class="wp-image-9810"/></a></figure><!-- /wp:image --><!-- wp:image {"id":9812,"sizeSlug":"large","linkDestination":"custom"} --><figure class="wp-block-image size-large"><a href="https://tjstaste.com/category/creamers/"><img src="https://tjstaste.com/tjstaste-uploads/2020/02/Coffee-Creamers-A.png" alt="" class="wp-image-9812"/></a></figure><!-- /wp:image --></div></div><!-- /wp:group --></div><!-- /wp:column --><!-- wp:column --><div class="wp-block-column"><!-- wp:group --><div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:image {"id":9816,"sizeSlug":"large","linkDestination":"custom"} --><figure class="wp-block-image size-large"><a href="https://tjstaste.com/category/courses/main-dishes/"><img src="https://tjstaste.com/tjstaste-uploads/2020/02/Main-Dishes-A.png" alt="" class="wp-image-9816"/></a></figure><!-- /wp:image -->

Answer 1

只需将媒体查询添加到您的 CSS 样式表中即可。尝试这个：

@media screen and (max-width:740px){

.wp-block-group__inner-container, .wp-block-column{

  display:flex;

  flex-direction:row;

}

}

<div id="content-mobile" class="side-by-side"><!-- wp:columns -->

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

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

<div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:image {"id":9820,"sizeSlug":"large","linkDestination":"custom"} -->

<figure class="wp-block-image size-large"><a href="https://tjstaste.com/recipe-index/"><img src="https://tjstaste.com/tjstaste-uploads/2020/02/Recipe-Index-A.png" alt="" class="wp-image-9820"/></a></figure>

<!-- /wp:image -->

<!-- wp:image {"id":9810,"sizeSlug":"large","linkDestination":"custom"} -->

<figure class="wp-block-image size-large"><a href="https://tjstaste.com/category/smoothies-shakes/"><img src="https://tjstaste.com/tjstaste-uploads/2020/02/Smoothies-Shakes-A.png" alt="" class="wp-image-9810"/></a></figure>

<!-- /wp:image -->

<!-- wp:image {"id":9812,"sizeSlug":"large","linkDestination":"custom"} -->

<figure class="wp-block-image size-large"><a href="https://tjstaste.com/category/creamers/"><img src="https://tjstaste.com/tjstaste-uploads/2020/02/Coffee-Creamers-A.png" alt="" class="wp-image-9812"/></a></figure>

<!-- /wp:image --></div></div>

<!-- /wp:group --></div>

<!-- /wp:column -->

<!-- wp:column -->

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

<div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:image {"id":9816,"sizeSlug":"large","linkDestination":"custom"} -->

<figure class="wp-block-image size-large"><a href="https://tjstaste.com/category/courses/main-dishes/"><img src="https://tjstaste.com/tjstaste-uploads/2020/02/Main-Dishes-A.png" alt="" class="wp-image-9816"/></a></figure>

<!-- /wp:image -->

<!-- wp:image {"id":9824,"sizeSlug":"large","linkDestination":"custom"} -->

<figure class="wp-block-image size-large"><a href="https://tjstaste.com/category/courses/soups-salads/"><img src="https://tjstaste.com/tjstaste-uploads/2020/02/Soups-Salads-A.png" alt="" class="wp-image-9824"/></a></figure>

<!-- /wp:image -->

<!-- wp:image {"id":9814,"sizeSlug":"large","linkDestination":"custom"} -->

<figure class="wp-block-image size-large"><a href="https://tjstaste.com/category/creme-brulee/"><img src="https://tjstaste.com/tjstaste-uploads/2020/02/Creme-Brulees-A.png" alt="" class="wp-image-9814"/></a></figure>

<!-- /wp:image --></div></div>

<!-- /wp:group --></div>

<!-- /wp:column -->

<!-- wp:column -->

<div class="wp-block-column"><!-- wp:image {"id":9818,"sizeSlug":"large","linkDestination":"custom"} -->

<figure class="wp-block-image size-large"><a href="https://tjstaste.com/category/reader-favorites/"><img src="https://tjstaste.com/tjstaste-uploads/2020/02/Reader-Faves-A.png" alt="" class="wp-image-9818"/></a></figure>

<!-- /wp:image -->

<!-- wp:image {"id":9826,"sizeSlug":"large","linkDestination":"custom"} -->

<figure class="wp-block-image size-large"><a href="https://tjstaste.com/category/menu-plans/weekly-menu-plans/"><img src="https://tjstaste.com/tjstaste-uploads/2020/02/Weekly-Menus-A.png" alt="" class="wp-image-9826"/></a></figure>

<!-- /wp:image -->

<!-- wp:image {"id":9822,"sizeSlug":"large","linkDestination":"custom"} -->

<figure class="wp-block-image size-large"><a href="https://tjstaste.com/category/menu-plans/seasonal-menu-plans/"><img src="https://tjstaste.com/tjstaste-uploads/2020/02/Seasonal-Menus-A-1.png" alt="" class="wp-image-9822"/></a></figure>

<!-- /wp:image --></div>

<!-- /wp:column --></div>

<!-- /wp:columns --></div>