如何在手机上显示按钮

Question

大家好。

刚开始在公司工作，这给了我任务，以优化他们的网站(nigeria-friends(dot)com/staging.academix)负责，这是我一直在做的，并没有完全精通的PHP，HTML和CSS。但是，我可以自信地阅读和理解其中的一些东西。因此；

1. 我一直试图将所有内容集中在首页图像横幅上。
2. 在max-width:380px的移动设备上展示或制作一个特定的按钮“如何让您受益”没有成功，这让我感到困惑。

我已经搜索了所有的CSS，无法使我的头脑周围的任何一个来修复它。因此，我呼救。在查看了基于index.html的文件夹之后，我发现了一些东西，上面提到的按钮处于一个循环中，我不明白。

以下是索引代码：

<div class="col-sm-12 col-xs-10 col-centered">

  <?php if(!isset($_SESSION["acc_identifier"])){ ?>
    <!--
      <div class="col-sm-4 col-centered">
        <a href="<?php echo $URLMAIN; ?>/access/signup.html">
          <div id="fb-login" class="social-login">
            <div class="social-text">Sign up for free</div>
          </div>
        </a>
      </div>
    -->

    <div class="col-sm-6 col-centered">
      <a href="<?php echo $URLMAIN; ?>/about/benefits.html">
        <div id="yahoo-login" class="social-login">
          <div class="social-text">How <?php echo $web_shortName; ?> can benefit you</div>
        </div>
      </a>
    </div>

    <div class="col-sm-6 col-centered">
      <a href="<?php echo $URLMAIN; ?>/access/host.html">
        <div id="g-login" class="social-login">
          <div class="social-text">Host your journal on <?php echo $web_shortName; ?></div>
        </div>
      </a>
    </div>

  <?php }else{ ?>

    <div class="col-sm-6 col-centered">
      <a href="<?php echo $URLMAIN; ?>/about/benefits.html">
        <div id="yahoo-login" class="social-login">
          <div class="social-text">How <?php echo $web_shortName; ?> can benefit you</div>
        </div>
      </a>
    </div>

    <div class="col-sm-6 col-centered">
      <a href="<?php echo $URLMAIN; ?>/access/host.html">
        <div id="g-login" class="social-login">
          <div class="social-text">Host your journal on <?php echo $web_shortName; ?></div>
        </div>
      </a>
    </div>
  <?php } ?>

</div>

我不能在这里粘贴所有的index.html代码，因为它的长度和长度相当长，这会在我尝试时生成错误格式，这是php和html混合在一起的，其中PHP启动了index.html。CSS文件也是如此。

Answer 1

@media (min-width: 380px){
  #yahoo-login .social-text {
    display: none;
  }
}

或

@media (max-width: 380px){
  #yahoo-login .social-text {
    display: block;
  }
}