如何为手机创建响应式页脚

Posted 2023-03-21

【中文标题】如何为手机创建响应式页脚

【英文标题】：How do I create a responsive footer for mobiles

【发布时间】：2021-10-22 16:36:29

【问题描述】：

我在以下网站上有一个固定的页脚；

https://sen-seis.com/dev/

如果通过手机访问网站，我希望能够更改页脚的内容。

如果使用移动设备，有没有办法修改footer.php 文件以仅显示页脚的某些部分。代码是；

<footer id="colophon" class="site-footer" role="contentinfo" <?php sydney_do_schema( 'footer' ); ?>>
<table  border="0px" align="center">

  <tr border="0px">
      <td ><div class="site-info">
            Copyright <?php echo date('Y'); ?> © Sen Seis. All rights reserved
        </div><!-- .site-info -->
          <!-- .site-info --> </td> 
     
      <td > <div class="contact-email" ><span><i class="sydney-svg-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#069146" d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z"></path> </svg></i></span> <b><a href="mailto:[e-mail]"> [e-mail]</a></b> </div>
            </td>
      <td>
         <a href="https://www.facebook.com/relaxmymuscles/" >  <svg xmlns="http://www.w3.org/2000/svg"   viewBox="0 0 24 24" fill="#069146"><path d="M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0zm4 7.278V4.5h-2.286c-2.1 0-3.428 1.6-3.428 3.889v1.667H8v2.777h2.286V19.5h2.857v-6.667h2.286L16 10.056h-2.857V8.944c0-1.11.572-1.666 1.714-1.666H16z"/></svg> </a href>

          
         <a href="https://www.instagram.com/senseis._/" >  <svg xmlns="http://www.w3.org/2000/svg"   viewBox="0 0 24 24" fill="#069146"><path d="M12 0c6.6274 0 12 5.3726 12 12s-5.3726 12-12 12S0 18.6274 0 12 5.3726 0 12 0zm3.115 4.5h-6.23c-2.5536 0-4.281 1.6524-4.3805 4.1552L4.5 8.8851v6.1996c0 1.3004.4234 2.4193 1.2702 3.2359.7582.73 1.751 1.1212 2.8818 1.1734l.2633.006h6.1694c1.3004 0 2.389-.4234 3.1754-1.1794.762-.734 1.1817-1.7576 1.2343-2.948l.0056-.2577V8.8851c0-1.2702-.4234-2.3589-1.2097-3.1452-.7338-.762-1.7575-1.1817-2.9234-1.2343l-.252-.0056zM8.9152 5.8911h6.2299c.9072 0 1.6633.2722 2.2076.8166.4713.499.7647 1.1758.8103 1.9607l.0063.2167v6.2298c0 .9375-.3327 1.6936-.877 2.2077-.499.4713-1.176.7392-1.984.7806l-.2237.0057H8.9153c-.9072 0-1.6633-.2722-2.2076-.7863-.499-.499-.7693-1.1759-.8109-2.0073l-.0057-.2306V8.885c0-.9073.2722-1.6633.8166-2.2077.4712-.4713 1.1712-.7392 1.9834-.7806l.2242-.0057h6.2299-6.2299zM12 8.0988c-2.117 0-3.871 1.7238-3.871 3.871A3.8591 3.8591 0 0 0 12 15.8408c2.1472 0 3.871-1.7541 3.871-3.871 0-2.117-1.754-3.871-3.871-3.871zm0 1.3911c1.3609 0 2.4798 1.119 2.4798 2.4799 0 1.3608-1.119 2.4798-2.4798 2.4798-1.3609 0-2.4798-1.119-2.4798-2.4798 0-1.361 1.119-2.4799 2.4798-2.4799zm4.0222-2.3589a.877.877 0 1 0 0 1.754.877.877 0 0 0 0-1.754z"/></svg>   </a href>

      <a href="https://www.google.com/maps/place/Sen-Seis+Massage+Therapy/@51.5969996,-0.284717,15z/data=!4m5!3m4!1s0x0:0x62567b567dd73a63!8m2!3d51.5970056!4d-0.2847197">
        <svg xmlns="http://www.w3.org/2000/svg"   viewBox="0 0 24 24" fill="none" stroke="#069146" stroke- stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="10" r="3"/><path d="M12 21.7C17.3 17 20 13 20 10a8 8 0 1 0-16 0c0 3 2.7 6.9 8 11.7z"/></svg>   
           </a>

      <a href="https://wa.me/447368647489">
        <svg xmlns="http://www.w3.org/2000/svg"   viewBox="0 0 24 24" fill="#069146"><path d="M12 0a12 12 0 1 1 0 24 12 12 0 0 1 0-24zm.14 4.5a7.34 7.34 0 0 0-6.46 10.82l.15.26L4.5 19.5l4.08-1.3a7.38 7.38 0 0 0 10.92-6.4c0-4.03-3.3-7.3-7.36-7.3zm0 1.16c3.41 0 6.19 2.76 6.19 6.15a6.17 6.17 0 0 1-9.37 5.27l-.23-.15-2.38.76.77-2.28a6.08 6.08 0 0 1-1.17-3.6 6.17 6.17 0 0 1 6.19-6.15zM9.66 8.47a.67.67 0 0 0-.48.23l-.14.15c-.2.23-.5.65-.5 1.34 0 .72.43 1.41.64 1.71l.14.2a7.26 7.26 0 0 0 3.04 2.65l.4.14c1.44.54 1.47.33 1.77.3.33-.03 1.07-.43 1.22-.85.15-.42.15-.78.1-.85-.02-.05-.08-.08-.15-.12l-1.12-.54a5.15 5.15 0 0 0-.3-.13c-.17-.06-.3-.1-.41.09-.12.18-.47.58-.57.7-.1.1-.18.13-.32.08l-.4-.18a4.64 4.64 0 0 1-2.13-1.98c-.1-.18-.01-.28.08-.37l.27-.31c.1-.1.12-.18.18-.3a.3.3 0 0 0 .01-.26l-.1-.23-.48-1.15c-.15-.36-.3-.3-.4-.3l-.35-.02z"/></svg> 
           </a>
      </td>   
    </tr>
        </table>
    </footer><!-- #colophon -->

【参考方案1】：

哟

Tty 这个

 @media screen and (max-width:1200) 
 .texttohide 
 display : none;
 
 
  

 <div> 
<span class="textodisplayallthetime">BLABLABLA</span>
 <span class="texttohide">this text will be hidden if the width of the device is  under 1200 px, this should work for the majority of the cellphone</span>
 
 </div>

【讨论】：

谢谢，我已经按照建议尝试了代码。将第一部分添加到附加 CSS 中，然后将 span 类添加到我要隐藏的页脚部分。但是在我的手机上检查时它仍然出现

尝试删除缓存