响应式文本问题

Question

我有以下代码：

body{
    width:100%;
    font-family:sans-serif;
    background: transparent;  
}
.testimonials{
    margin:0;
    display:grid;
    grid-template-columns: repeat(auto-fit,minmax(350px, 1fr));
    grid-gap:20px;
}
.testimonials .card{
    position:relative;
    width:350px;
    margin:0 auto;
    background:#333;
    padding:20px;
    box-sizing: border-box;
    text-align:center;
    box-shadow: 10px 8px 20px rgba(0,0,0,.5);
    overflow: hidden;
}
.testimonials .card .layer{
    position: absolute;
    top: calc(100% - 3px);
    width:100%;
    height:100%;
    left:0;
    background:linear-gradient(#034e70, #390375);
    z-index:1;
    transition:0.5s;
}
.testimonials .card:hover .layer{
    top:0;
}
.testimonials .card .content{
    position:relative;
    z-index:2;
}
.testimonials .card .content p{
    font-size:18px;
    line-height:24px;
    color:#FFF;
}
@media all and (max-width: 500px) {
.testimonials .card .content p{
width: 100%;
}
}

.testimonials .card .content .image{
    width:100px;
    height:100px;
    margin: 0 auto;
    border-radius:50%;
    overflow:hidden;
  margin-bottom: 16px;
    box-shadow: 0 10px 20px rgba{0,0,0, .2};
}
.testimonials .card .content .details h2{
    font-size:15px;
    color:#fff;
}
.testimonials .card .content .details h2 span{
    color:#03a9f4;
    font-size:12px;
    transition:0.5s;
}
.testimonials .card:hover .content .details h2 span{
    color:#fff;
}

<section id="References">
      <div class="section-title">
        <h2>References</h2>
        </div>
    <div class="testimonials">
    <!-- CARD 1 START-->
    <div class="card">
      <div class="layer"></div>
      <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate dui a eros pretium commodo sit amet quis tortor. Maecenas suscipit suscipit est non ullamcorper. Fusce tincidunt, eros non ornare mollis, enim erat placerat erat, dignissim egestas magna elit eget dolor. Nullam sed leo maximus, ullamcorper ante lacinia, semper augue. Etiam convallis tempus elit.</p>
        <div class="image">
          <img src="https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry" alt="">
        </div>
        <div class="details">
          <h2>
            Sample Text <br>
            <span>Sample Text Goes Here Too</span>            
          </h2>
        </div>
      </div>
    </div>
    <!-- CARD 1 end-->
    
    <!-- CARD 2 START-->
    <div class="card">
      <div class="layer"></div>
      <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate dui a eros pretium commodo sit amet quis tortor. Maecenas suscipit suscipit est non ullamcorper. Fusce tincidunt, eros non ornare mollis, enim erat placerat erat, dignissim egestas magna elit eget dolor. Nullam sed leo maximus, ullamcorper ante lacinia, semper augue. Etiam convallis tempus elit.</p>
        <div class="image">
          <img src="https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry" alt="">
        </div>
        <div class="details">
          <h2>
            Sample Text <br>
            <span>Sample Text Goes Here Too</span>           
          </h2>
        </div>
      </div>
    </div>
    <!-- CARD 2 end-->
    <!-- CARD 3 START-->
    <div class="card">
      <div class="layer"></div>
      <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate dui a eros pretium commodo sit amet quis tortor. Maecenas suscipit suscipit est non ullamcorper. Fusce tincidunt, eros non ornare mollis, enim erat placerat erat, dignissim egestas magna elit eget dolor. Nullam sed leo maximus, ullamcorper ante lacinia, semper augue. Etiam convallis tempus elit.</p>
        <div class="image">
          <img src="https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry" alt="">
        </div>
        <div class="details">
          <h2>
           Sample Text <br>
            <span>Sample Text Goes Here Too</span>            
          </h2>
        </div>
      </div>
    </div>
    <!-- CARD 3 end-->
  </div>
</section>

我将上述代码嵌入到一个网站中，因此当我在较小的屏幕上查看该网站时，我得到以下输出：

白色文本、图像和蓝色文本没有响应。然而，卡是。就这三件事，我尝试添加媒体查询使它们响应，但由于某种原因它不起作用，输出与上面完全相同。

预期输出

当我检查它并在 414 宽度上查看它时，我得到了上面的预期输出 这就是我想要的。但是，在 414 宽度以下，我得到的输出如第一张图片所示。我将如何解决这个问题？有什么建议吗？

Answer 1

这是因为您为您的元素设置了 width 的固定 350px。当您使 window 宽度小于 ~370px 时，固定宽度会阻止元素变得更小。尝试使用 % 等相对大小。

Answer 2

尝试更新 grid-template-columns 媒体查询以响应 design/mobile 屏幕。

body {
  width: 100%;
  font-family: sans-serif;
  background: transparent;
  margin: 0;
}

.testimonials {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  grid-gap: 20px;
  padding: 20px;
}

.testimonials .card {
  position: relative;
  max-width: 350px;
  margin: 0 auto;
  background: #333;
  padding: 20px;
  box-sizing: border-box;
  text-align: center;
  box-shadow: 10px 8px 20px rgba(0, 0, 0, .5);
  overflow: hidden;
}

.testimonials .card .layer {
  position: absolute;
  top: calc(100% - 3px);
  width: 100%;
  height: 100%;
  left: 0;
  background: linear-gradient(#034e70, #390375);
  z-index: 1;
  transition: 0.5s;
}

.testimonials .card:hover .layer {
  top: 0;
}

.testimonials .card .content {
  position: relative;
  z-index: 2;
}

.testimonials .card .content p {
  font-size: 18px;
  line-height: 24px;
  color: #FFF;
}

.testimonials .card .content .image {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: 0 10px 20px rgba(0,0,0,.2);
}

.testimonials .card .content .details h2 {
  font-size: 15px;
  color: #fff;
}

.testimonials .card .content .details h2 span {
  color: #03a9f4;
  font-size: 12px;
  transition: 0.5s;
}

.testimonials .card:hover .content .details h2 span {
  color: #fff;
}

@media all and (max-width: 500px) {
  .testimonials {
    grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
  }
  .testimonials .card .content p {
    width: 100%;
  }
}

<section id="References">
  <div class="section-title">
    <h2>References</h2>
  </div>
  <div class="testimonials">
    <!-- CARD 1 START-->
    <div class="card">
      <div class="layer"></div>
      <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate dui a eros pretium commodo sit amet quis tortor. Maecenas suscipit suscipit est non ullamcorper. Fusce tincidunt, eros non ornare mollis, enim erat placerat erat, dignissim
          egestas magna elit eget dolor. Nullam sed leo maximus, ullamcorper ante lacinia, semper augue. Etiam convallis tempus elit.</p>
        <div class="image">
          <img src="https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry" alt="">
        </div>
        <div class="details">
          <h2>
            Sample Text <br>
            <span>Sample Text Goes Here Too</span>
          </h2>
        </div>
      </div>
    </div>
    <!-- CARD 1 end-->

    <!-- CARD 2 START-->
    <div class="card">
      <div class="layer"></div>
      <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate dui a eros pretium commodo sit amet quis tortor. Maecenas suscipit suscipit est non ullamcorper. Fusce tincidunt, eros non ornare mollis, enim erat placerat erat, dignissim
          egestas magna elit eget dolor. Nullam sed leo maximus, ullamcorper ante lacinia, semper augue. Etiam convallis tempus elit.</p>
        <div class="image">
          <img src="https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry" alt="">
        </div>
        <div class="details">
          <h2>
            Sample Text <br>
            <span>Sample Text Goes Here Too</span>
          </h2>
        </div>
      </div>
    </div>
    <!-- CARD 2 end-->
    <!-- CARD 3 START-->
    <div class="card">
      <div class="layer"></div>
      <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vulputate dui a eros pretium commodo sit amet quis tortor. Maecenas suscipit suscipit est non ullamcorper. Fusce tincidunt, eros non ornare mollis, enim erat placerat erat, dignissim
          egestas magna elit eget dolor. Nullam sed leo maximus, ullamcorper ante lacinia, semper augue. Etiam convallis tempus elit.</p>
        <div class="image">
          <img src="https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry" alt="">
        </div>
        <div class="details">
          <h2>
            Sample Text <br>
            <span>Sample Text Goes Here Too</span>
          </h2>
        </div>
      </div>
    </div>
    <!-- CARD 3 end-->
  </div>
</section>

响应式文本问题

Responsive Text Issue

html

javascript

css

responsive-design

responsive

预期输出