在我的主頁上的“快速鏈接”下，我有一些圖像。在桌面上，它們顯示得非常完美。然而，在移動設備上則不然。我想讓它們在一行中并排顯示 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 -->
1 回答
紫衣仙女
TA貢獻1839條經驗 獲得超15個贊
只需將媒體查詢添加到您的 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>
- 1 回答
- 0 關注
- 153 瀏覽
添加回答
舉報
0/150
提交
取消