<分区>
<分区>
我用 bootstrap 构建了一个 WordPress 主题，整个页面都是响应式的，除了我无法响应的部分是下面的部分:
.showcase {
height: 600px;
padding: 100px 20px;
text-align: center;
border-bottom: #ccc 1px solid;
margin-bottom: 30px;
color: #fff;
}
.showcase h1 {
font-size: 35px;
padding-bottom: 20px;
color: #fff;
}
.showcase p {
font-size: 20px;
margin-bottom: 50px;
}<section class="showcase">
<div class="container">
<h1>
<?php echo get_theme_mod('showcase_heading', 'Jon Doe'); ?>
</h1>
<p>
<?php echo get_theme_mod('showcase_text', 'Making The Tractors Work For You!'); ?>
</p>
<a href="<?php echo get_theme_mod('btn_url', '#'); ?>" class="btn btn-primary btn-lg">
<?php echo get_theme_mod('btn_text', 'Read More'); ?>
</a>
</div>
</section>任何帮助或提示将不胜感激，谢谢。
最佳答案
将 background-size: cover 添加到 .showcase div 中的图像，以便它填充它的容器。使用媒体查询根据屏幕宽度修改图像的位置，或者换入在该屏幕宽度下看起来更好的新图像。下面是一些让您入门的代码:
.showcase {
background: url(http://www.web2dezine.com/wp-content/uploads/2017/12/showcase.jpg) no-repeat center center;
background-size: cover;
}
@media screen and (max-width:480px) {
// modified image styles for mobile here
}
关于wordpress - 我网站上唯一响应的部分？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48083077/