Wordpress Customizrテーマを使用したメディアクエリ

Question

私はWordpressのテーマCustomizrを使用していますが、div（.about、.house divの下の.about）をページに表示すると問題があります。その他）。私はディスプレイを試しました：インラインブロック、ディスプレイ：ブロック、幅：100％など。なぜそれらが所望の効果を得ていないのか分かりません。私は何をすべきか？前もって感謝します。

CSS：

div.house { 
    display: flex; 
    width: 100%; 
    border-bottom: thin solid rgb(25,99,175); 
    padding: 0.5%;, 
} 

a { 
    color: rgb(25,99,175); 
} 

.about { 
    display: inline; 
    padding: 1%; 
    margin-left: 0.5%; 
    width: 45%; 
} 

.title { 
    font-weight: bold; 
} 

.desc{ 
    margin: 0.5%; 
    padding: 0.5% !important; 
} 
.price { 
    font-style: italic; 
    float: right; 
} 

.images { 
    display: inline; 
    margin-right: .5%; 
} 


.gallery{ 
    margin: 0.5%; 
} 

figure { 
    padding: 0.5% !important; 
} 

div.price { 
    width: 32%; 
    margin: 0.25%; 
    padding: 0.25%; 
    border-radius: 10px; 
    margin-top: .75%; 
} 

div.day { 
     border: thick solid rgb(254,205,11); 
} 
div.night{ 
    border: thick solid rgb(242,104,35);  
} 
div.both { 
     border: thick solid rgb(153,202,61); 
     margin-right: 1.5%; 
} 

div.day-div { 
    padding-bottom: 2%; 
    margin: 2%; 
    border: thick solid rgb(25,99,175); 
    overflow:auto; 
    border-radius: 10px; 
} 

div.day-div > h3 { 
    margin: .5%; 
    color: rgb(53,33,100); 
    font-size: 1.3em; 
} 

div.day-div > h2 { 
    color: rgb(25,99,175); 
    margin-top: 1%; 
    font-weight: 900; 
} 

div#about { 
    text-align: center; 
    width: 70%; 
    margin: auto; 
} 

h1.entry-title { 
    margin: auto; 
    width: 60%; 
    text-align: center; 
    font-weight: 700; 
    color: rgb(25,99,175); 
} 
form{ 
     text-align: center; 
} 
input { 
    width: 100%; 
} 

div.link-button > a { 
    text-decoration: none; 
    background-color: rgb(54,198,244); 
    color: white; 
    padding: 5%; 
} 

div.link-button, div.link-button > a { 
    padding-bottom: 5%; 
    border-radius: 10px; 
} 

HTML：

<div id="mickey" class="house"> 
<div class="images"> 

[gallery columns="2" link="file" ids="56,44"] 

</div> 
<div class="about"> 

<span class="title"><a href="/bounce-houses/mickey-park-house">Disney's Mickey Park</a></span> 
<p class="description">Join Mickey and Friends for jumping jubilee throughout the day! This Mickey Mouse Clubhouse themed area has Mickey, Donald, Minnie, Daisy, Goofy, and Pluto on the front wall. Make your party magical, reserve today!</p> 
<span class="price">STARTING AT $169 PER DAY*</span> 

</div> 
</div> 
<div style="clear: both;"></div> 
<div id="spongebob" class="house"> 
<div class="about"> 

<span class="title"><a href="/bounce-houses/spongebob-squarepants">Spongebob Squarepants House</a></span> 
<p class="description">Join Spongebob, Squidward and Patrick on a crazy jellyfishing adventure. This blue and green house will bring lots of jellyfishing joy with bounce-tastic memories to share. Brighten your party with lots of giggling fun today!</p> 
<span class="price left">STARTING AT $159 PER DAY*</span> 

</div> 
<div class="images"> 

[gallery columns="2" link="file" ids="49,48"] 

</div> 
</div> 
<div style="clear: both;"></div> 
<div id="princess" class="house"> 
<div class="images"> 

[gallery columns="2" link="file" ids="57,45"] 

</div> 
<div class="about"> 

<span class="title"><a href="/bounce-houses/disney-princess-castle">Disney Princess Castle</a></span> 
<p class="description">Invite Snow White, Jasmine, Cinderella, Belle, and Aurora to bounce with your little Princesses. This brilliant castle will complete your royal reception with hours of dazzling delight. Make your princess themed party unforgettable, reserve today!</p> 
<span class="price">STARTING AT $159 PER DAY*</span> 

</div> 
</div> 
<div style="clear: both;"></div> 
<div id="castle" class="house"> 
<div class="about"> 

<span class="title"><a href="/bounce-houses/castle">Storm Castle</a></span> 
<p class="description">Storm the castle with this fun bounce house. This house makes a great addition to any party no matter the theme. Top off your get together with exceptional fun today!</p> 
<span class="price">STARTING AT $120 PER DAY*</span> 

</div> 
<div class="images"> 

[gallery columns="2" link="file" ids="58,47"] 

</div> 
</div> 
<div style="clear: both;"></div> 
<div id="double" class="house"> 
<div class="images"> 

[gallery columns="2" link="file" ids="59,52"] 

</div> 
<div class="about"> 

<span class="title"><a href="/bounce-houses/double-slide">Double Slide</a></span> 
<p class="description">Double slide, double the fun! Slide into a fantastic event with this wonderful double-slide bounce house. The jumping fun starts before the slide where you climb up to the double slide for twice the fun! Add the slides to your party today!</p> 
<span class="price">STARTING AT $195 PER DAY*</span> 

</div> 
</div> 
<div style="clear: both;"></div> 
<div id="pirate" class="house"> 
<div class="about"> 

<span class="title"><a href="/bounce-houses/pirate-captain">Pirate Captain</a></span> 
<p class="description">Be the captain of the pirates. Slide down to the treasure filled with great memories. This pirate themed combo displays a fun pirate with flags atop a large bounce area with a slide beneath a canon. Discover a treasure of fun! Reserve today!</p> 
<span class="price">STARTING AT $239 PER DAY*</span> 

</div> 
<div class="images"> 

[gallery columns="2" link="file" ids="122,126"] 

</div> 
</div> 
<div style="clear: both;"></div> 
<div id="sports" class="house"> 
<div class="images"> 

[gallery columns="2" link="file" ids="42,41"] 

</div> 
<div class="about"> 

<span class="title"><a href="/bounce-houses/sports-slide">Sports Slide</a></span> 
<p class="description">Bring the play to the party with this sports themed combo. There are four different types of sports balls atop the pillars of this house; a basketball, a soccer ball, a football, and a baseball. Score top prize by reserving today!</p> 
<span class="price">STARTING AT $249 PER DAY*</span> 

</div> 
</div> 
<div style="clear: both;"></div> 
<div id="water" class="house"> 
<div class="about"><span class="title"><a href="/bounce-houses/combo-house">Combo House</a></span> 
<p class="description">This large house includes a large slide that can be wet or dry! The large bounce area has a basketball hoop inside for even more jumping fun! Bring the extreme fun to the party today!</p> 
<span class="price">STARTING AT $265 PER DAY*</span> 

</div> 
<div class="images"> 

[gallery columns="2" link="file" ids="53,54"] 

</div> 
</div> 
<div style="clear: both;"></div> 
<div id="party" class="house"> 
<div class="images"> 

[gallery columns="2" link="file" ids="39,40"] 

</div> 
<div class="about"> 

<span class="title"><a href="/bounce-houses/party-slide">Party Slide</a></span> 
<p class="description">This large slide and bounce house combo creates the perfect atmosphere for fun and laughs. This castle features balloons printed on the side and a double arch to make your trip down the slide even more fun. Reserve it today!</p> 
<span class="price">STARTING AT $198*</span> 

</div> 
</div> 
<sub>*Prices based on weekend pricing.</sub> 

Answer 1

あなたはdiv.house要素にdisplay: flexプロパティを使用していて、デフォルトの動作は、左から右方向を表示することです。

子要素を互いに重ね合わせたい場合は、div.houseクラスにflex-direction: column;を追加します。また、display: flexプロパティを削除し、子要素からdisplay: inlineを削除することもできます。

あなたはここにフレキシボックスについて詳しく知ることができます。https://css-tricks.com/snippets/css/a-guide-to-flexbox/