resize chat bar on mobile

时间：2017-07-04 作者：Krystian

如下图所示，我希望在移动设备上为该页面缩小商店页面上的聊天栏：ergotopia.de 我用这段代码进行了尝试，这使得它变小了，但也打开了窗口（如图所示）。

@media (max-width:849px){
      .single-product.zopim{
               margin-left: -10px;
               margin-bottom: 38px!important;
              width: 37px!important;
     }
  }
如何调整此代码，使条很小，但打开的窗口与正常一样大？

我也试过，但没有成功：

@media (max-width:849px){
      .single-product.zopim{
               margin-left: -10px;
               margin-bottom: 38px!important;
       .single-product.zopim .jx_ui_Widget{
              width: 37px!important;
     }
  }

enter image description here

1 个回复
最合适的回答,由SO网友:Manoj Deswal 整理而成

使用下面的CSS实现您的目标，使button\\u栏的最小宽度自动并隐藏button\\u文本

@media (max-width:849px){
   .meshim_widget_components_chatButton_Button .button_bar{min-width:auto;}
   .meshim_widget_components_chatButton_ButtonBar .button_text{display:none;}
}
谢谢

结束
标签： css   mobile   小码农  

相关推荐

保护快捷代码、自定义JS和CSS不受主题更新影响

我是一名经验丰富的PHP开发人员，但对WordPress还是新手。我创建了一个站点，并添加了一些自定义JavaScript、CSS和一些短代码。我的CSS刚刚添加到样式中。css（当我点击侧栏中的外观->编辑器时的默认设置）和JavaScript的挂钩以及短代码都在我的主题函数中。php文件。很自然，主题更新了，我所有的更改都被删除了。谢天谢地，我保存了备份，所以我能够恢复我的自定义代码，但我真的希望我的所有自定义代码完全独立于主题。处理短代码、css和脚本/样式嵌入的正确方法是什么，这样主题更改就