Hide Contact Dock on mobile devices

[mwiedmann]

I know there a several topics according this issue. Unfortunately none of them solved my problem.
I try to hide Content Dock from landscape mode iPhones, landscape/portrait mode iPads and similar sized screens.

I.e. this code wouldn’t work:

@media ( max-width: 768px ) { .tco-content-dock{ display: none !important; } }

Any idea what I can do?

[Prasant]

Hello @mwiedmann,

Thanks for asking.

Above code should work fine. Please try out following CSS under X/Pro > Theme Options > CSS:

@media only screen and (max-width: 600px) {
  .tco-content-dock {
    display: none !important;
  }
}

Please make sure to clear cache and try loading the website again.

Thanks.

[mwiedmann]

Hi, cache cleared but CD still appears on iPad and iPhone.

[basanta]

Hi @mwiedmann,

Thanks for updating the thread!

I found this CSS in in the page.

@media (max-width: 580px) ,
@media only screen and (max-width: 768px) {
.tco-content-dock {
    display: none !important;
}
}

Can you please remove it and add this CSS only.

@media ( max-width: 768px ) {
.tco-content-dock {
display: none !important;
} 
}

Hope this helps!

[mwiedmann]

Thanks, that helped a lot! I realized that I had one } bracket left open.
Now it’s working.

Anyway: In landscape mode on iPad I can still see the CD. How do I lift the CD for about 100px to the top?

Edit: This seems to work

@media { .tco-content-dock { margin-bottom: 100px; } }

[mldarshana]

Hi There @mwiedmann

For iPad landscape, you will have to change the media query accordingly. Please check the following guide on how to target specific device widths (https://css-tricks.com/snippets/css/media-queries-for-standard-devices/).

Hope that helps.