Question

我使用bootstrap构建了一个WordPress主题，除了这部分之外，整个页面都有响应，我无法获得响应，如下所示：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Screenshot

非常感谢任何帮助或提示，谢谢。

Answer 1

添加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
}

Answer 2

只需将background-size: contain;添加到.showcase规则即可。这将使整个图像适合各种尺寸的元素。

我网站的唯一部分是响应式的吗？

2 个答案: