Question

我使用了引导程序进行布局，但是当您在移动设备上查看此页面时，覆盖的文字似乎隐藏了大部分图像，我尝试了几种其他方式，例如媒体查询。

我还对一般网站增加了一些媒体查询，这有助于文本保留在框中，但仍覆盖了大部分图像。

/* CONTACT Page */

.somesection {
  margin-top: 50px!important;
}

body {
  font-size: 16px;
  font-family: raleway;
}

img {
  max-width: 100%;
}

h3 {
  font-size: 18px;
}

.overlay-text {
  font-size: 16px;
  width: 50%;
  /*important*/
  bottom: 21vw;
  /*important*/
  padding: 25px;
  background: #f7f7f7;
}


/*responsive */


   
@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class*="col-"] {
    width: 100%;
  }
}


/* For mobile phones: */

[class*="col-"] {
  width: 100%;
}

<div class="page-content inset">
  <div class="row">





    <div class="col-md-12">
      <div class="row">
        <hr>




        <div class="container somesection">
          <div class="row col-xs-8">
            <img align="left" src="images/contact.jpg">
          </div>
          <div class="col-xs-3 col-sm-offset-4 overlay-text">
            <h1>CONTACT STEPHANIE</h1>
            <br>
            <p>If you have any questions or any design requests please email me at:</p>


            <h3><i>EMAIL</i></h3>



          </div>

        </div>

Answer 1

/ *联系人页面* /

.somesection {
  margin-top: 50px!important;
}

body {
  font-size: 16px;
  font-family: raleway;
}

img {
  max-width: 100%;
}

h3 {
  font-size: 18px;
}

<div class="page-content inset">

        <hr>




        <div class="container somesection">
          <div class="row">
          <div class="col-md-6 col-xs-8 col-sm-8">
            <img align="left" src="images/contact.jpg">
          </div>
          <div class="col-md-6 col-sm-3 col-xs-3">
            <h1>CONTACT STEPHANIE</h1>
            <br>
            <p>If you have any questions or any design requests please email me at:</p>


            <h3><i>EMAIL</i></h3>



          </div>

        </div>

尝试此方法可以解决您的问题！

如何使我的图片在移动设备上更加可见

1 个答案: