0

Like in the following picture I would like to make the chat bar on shop pages a bit smaller on mobile devices for this page: ergotopia.de I tried it with this code, which makes it smaller but the opened window as well (like you see in pic).

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

How to adjust this code, so the bar is small, but the opened window as big as normal?

I also tried this, but without success:

@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

closed as off-topic by Jack Johansson, Mark Kaplun, fuxia Jul 4 '17 at 8:46

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

  • 1
    Can you post the full code of the window or pass the site url please? – Cesar Henrique Damascena Jul 4 '17 at 3:59
  • please pass the Site url – Manoj Deswal Jul 4 '17 at 4:58
  • Thanks for fast response. I did, but maybe not obviously its www.ergotopia.de – Krystian Manthey Jul 4 '17 at 5:41
0

Use Below CSS to achieve your goal, make min-width of button_bar to auto and hide the button_text

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

Thanks

  • it works beautifully by onsite editing, but when I put it into backend custom css it doesnt. Thats quite strange. May it be a result of, its a script loaded external (zendesk)? – Krystian Manthey Jul 4 '17 at 7:36
  • Yes this is the issue most of the time but let me recheck on this, could you create a user and give some right to put css and check . so I can debug it with custom css – Manoj Deswal Jul 4 '17 at 7:43
  • Try using important with css because class name remains same on each load , so this can help – Manoj Deswal Jul 4 '17 at 7:46
  • I did, but not working. Thank you very very much for your help. I wrote ZenDesk if they have a solution for this, as I cannot give access to others. – Krystian Manthey Jul 4 '17 at 8:06
  • They will help you, I saw mobile small button available in upgraded version, If you have upgraded version then I can tell you settings where to do that – Manoj Deswal Jul 4 '17 at 8:12

Not the answer you're looking for? Browse other questions tagged or ask your own question.