Html 具有wordpress自定义主题的媒体查询

Html 具有wordpress自定义主题的媒体查询,html,css,wordpress,Html,Css,Wordpress,我正在使用wordpress主题定制器,但无法将页面上的div(.about,.images位于.house div下)以块的形式显示(一个垂直放置在另一个上)。我尝试过显示:内联块、显示:块、宽度:100%等等。我不确定为什么这些都没有达到预期效果。我该怎么办?提前谢谢 CSS: HTML: [gallery columns=“2”link=“file”ids=“56,44”] 加入米奇和朋友的行列,一整天都在欢庆!这个米老鼠俱乐部主题区域的前墙上有米奇、唐纳德、米妮、黛西、高飞和布鲁托。让

我正在使用wordpress主题定制器,但无法将页面上的div(.about,.images位于.house div下)以块的形式显示(一个垂直放置在另一个上)。我尝试过显示:内联块、显示:块、宽度:100%等等。我不确定为什么这些都没有达到预期效果。我该怎么办?提前谢谢

CSS:

HTML:


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

加入米奇和朋友的行列,一整天都在欢庆!这个米老鼠俱乐部主题区域的前墙上有米奇、唐纳德、米妮、黛西、高飞和布鲁托。让你的派对充满魅力,今天就预订吧

起价为每天169美元*

加入海绵宝宝、乌贼沃德和帕特里克的疯狂水母钓鱼冒险之旅。这座蓝色和绿色的房子将带来很多海蜇钓鱼的乐趣,与大家分享美味的回忆。今天,让你的派对充满欢乐

起价为每天159美元* [gallery columns=“2”link=“file”ids=“49,48”] [gallery columns=“2”link=“file”ids=“57,45”]

邀请白雪公主、茉莉花、灰姑娘、美女和极光与您的小公主们一起跳起来。这座辉煌的城堡将为您的皇家招待会带来数小时令人眼花缭乱的欢乐。让您的公主主题派对难忘,今天预订

起价为每天159美元*

用这座有趣的弹跳屋冲击城堡。无论主题是什么,这座房子都是聚会的绝佳补充。今天,以非凡的乐趣结束你的聚会

每天120美元起价* [gallery columns=“2”link=“file”ids=“58,47”] [gallery columns=“2”link=“file”ids=“59,52”]

双滑,双倍乐趣!借助这座奇妙的双滑弹跳屋,滑入精彩的活动。跳跃的乐趣在滑梯开始之前就开始了,在滑梯上你可以爬到双滑梯,享受两倍的乐趣!今天将幻灯片添加到您的聚会中

起价为每天195美元*

担任海盗船长。滑到充满美好回忆的宝藏。这个以海盗为主题的组合展示了一个有趣的海盗,在一个巨大的弹跳区域上有一面旗帜,在佳能的下方有一个滑梯。发现乐趣的宝藏!今天预订

起价为每天239美元* [gallery columns=“2”link=“file”ids=“122126”] [gallery columns=“2”link=“file”ids=“42,41”]

通过这一运动主题组合,将该剧带到派对上。这座房子的柱子上有四种不同类型的运动球;一个篮球、一个足球、一个足球和一个棒球。今天预定,获得最高奖

起价为每天249美元*

这个大房子包括一个大滑梯,可以是湿的也可以是干的!大弹跳区内有一个篮球圈,可提供更多的跳跃乐趣!给今天的聚会带来极大的乐趣

起价为每天265美元* [gallery columns=“2”link=“file”ids=“53,54”] [gallery columns=“2”link=“file”ids=“39,40”]

这一大型幻灯片和弹跳屋组合为娱乐和欢笑营造了完美的氛围。这座城堡的侧面印有气球和双拱门,让您的滑梯之旅更加有趣。今天就预订吧

起价198美元* *价格基于周末定价。
您正在div.house元素上使用
display:flex
属性,默认行为是显示从左到右的方向

增加
flex方向:列编码到div.house类。您还可以删除
display:flex
属性,并从子元素中删除
display:inline


您可以在此处了解有关flexbox的更多信息:

标题显示“媒体查询”,但您不使用任何媒体查询。您的问题是关于CSS显示属性的吗?我需要它在媒体查询下垂直显示:@media screen和(max width:800px){},以便仅在较小的设备上查看。
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;
}
<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>