How can I hide the chat icon on mobile view?

[bond1207]

Hi there,

i want to hide the shopify chat icon, but only on mobile view. I am using the pixelunion Empire theme. Can anybody help me out?  I could´t find a way and your help is highly appreciated!

Thanks in advance,

Oliver

[ThomKnepper]

Hi there,

I would recommend you to fix this with a little bit of CSS. Add the following CSS:

@media screen and (max-width 670px){
   div#shopify-chat{
      display: none;
   }
}

(you can add it to your theme quite easily as "custom liquid" as well by placing this CSS in a {% style %} your css here {% endstyle %})

Hope this helps!

[bond1207]

Hi ThomKnepper,

so i open the theme.css.liquid  - but where exactly do i have to place this?:

@media screen and (max-width 670px){
div#shopify-chat{
display: none;
}
}

At the very end of the theme.css.liquid - or somewhere in the existing chat part?

This is the last part/lines of my css.liquid. Could you have look?:

@media screen and (max-width: 719px) {
.slideshow-slide__content-background-link {
color: #000;
}
}
@media only screen and (min-width: 750px) {
.product-gallery.click-to-zoom-enabled {
position: sticky !important;
top: 120px !important;
height: 100% !important;
}
}
@media only screen and (min-width: 750px) {
iframe#dummy-chat-button-iframe {
bottom: 100px!important;
}
}
@media screen and (min-width: 750px) {
iframe#dummy-chat-button-iframe {
bottom: 220px!important;
}
}

/* globo css DC customize */

.swatches-globo--list {
padding-top: 6px;
}

.swatches-globo .swatch--gl li.swatches-more label.globo-size-medium:not(.globo-style--button),
.swatches-globo .swatch--gl li.swatches-more label:not(.globo-style--button) {
font-size: 11px !important;
display: flex;
justify-content: center;
align-items: center;
}

.swatches-globo--list .swatches-globo {
margin-bottom: 0 !important;
margin-top: 10px;
}

.swatches-globo--list .swatches-globo .swatch--gl {
margin: 0 !important;
}

Thanks!!! 

[ThomKnepper]

Hi there,

I would recommend you to simply put in a "custom liquid" section and within that section copy the exact following code:

{% style %}
@media screen and (max-width 670px){
   div#shopify-chat{
      display: none;
   }
}
{% endstyle %}

This will do the trick 😉

[bond1207]

In the theme editor i just added a "custom liquid" section and placed the code inside. Unfortunately the chat icon is still showing in mobile view. 

Thanks for your patience, i´m desperate here...

[bond1207]

If there are any other ideas or suggestions about what i am doing wrong, please let me know. I really want the icon to disappear from the mobile view. 

Thanks a lot

[ThomKnepper]

So I checked on a website which also had the Shopify Chat enabled and this code should work.

{% style %}
@media screen and (max-width 670px){
   div#shopify-chat,
   iframe#dummy-chat-button-iframe{
      display: none;
   }
}
{% endstyle %}

[PageFly-Oliver]

Hi @bond1207 ,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file -> Save

<style>
@media (max-width 767px){
   #shopify-chat{
      display: none !important;
   }
}
</style>

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

<phong cách>

@media (chiều rộng tối đa 767px){

div#shopify-chat{

hiển thị: không !quan trọng;

}

}

</style>

[bond1207]

Hi Oliver,

thanks a lot for your response and the suggestion. I just tried it, but unfortunately it didn´t work.

[PageFly-Oliver]

Hi, can you give me the URL so I can check it easy 

[bond1207]

Hi Oliver,

sorry for being late with my answer. Christmas took a lot of my time.

I tried every way provided in this thread, but still couldn´t make it work.

This is our website: https://www.moebelraute.de

Your help is highly appreciated.

Kind regards,

Oliver